01-05. vue 변수 전달방법

html에  javascript를 가지고 다양한 일들을 한다.

 

값을 변경한다던지, 이벤트를 연동한다던지등등의 일을 한다 

 

우선은 vue도 동일하게 어떻게 하는지 한번 확인해 보자 

 

1.  html 태그내 변수 전달은 {{변수명}} 으로 한다 

  - <script> 블록내 data() 영역에 변수선언

  - template 영역에 변수 입력

data()에 변수정의, template에&amp;amp;nbsp; {{변수명}}으로 전달

결과

2. object 내 변수전달은 v-model이다 .( 또 다른 방법이 있겠지만 .. 우선)

  - 위 내용으로 봤을땐 유사하지 않을까?

  - input은 v-model을 사용해 변수와 연결한다 

html object 내 v-model을 사용한 변수전달

 

3. if else 는 v-if 

  - span에 v-if를 사용하면 Dom 객체에서 사라짐 

  - 브라우저 개발자 모드에서 네트워크를 봐도 해당 태그가 안보이네? 신기하구먼. 이건 나중에 알아보자 

v-if를 활용한 html 조건문 처리

 

4. for - loop 문 처리  v-for="객체 in 객체들" v-bind:key="키이름"

  - v-bind:key 속성을 쓰지 않으면 아래처럼 오류가 난다.. 

    > Elements in iteration expect to have 'v-bind:key'

v-bind:key 를 뺐을때

  -  v-bind:key="" 값을 추가했을때 잘나온다 

v-bind:key="변수명"