[Vue.js] Vue 기본문법 - if문, for문, directive문

0. script에서 규칙

1) new Vue안에서 이름을 지켜주어야 할 것 (  - el, data, methods 2) input에서는 type="number"를 붙이면 숫자값 입력만 되고 인식할때는 문자열로 인식된다.  - 숫자로 인식하고 싶을때는 v-model 뒤에 .number를 붙일 것  - ex) <input ... v-model.number="value"> 3) 줄임 문법  - v-on:click -> @click  - v-bind:class -> :class 4) style을 지역변수화 하는 방법 : scoped  - vue 파일 안에서    <style scoped></style>  5) v-if와 v-show의 차이점  - 개발자도구의 Elements에서 if문일때는 tag도 안보이고, show는 tag는 보이지만 style="display: none;"으로 되어있다.  - v-show일때 화면상의 소스 : <div style="display: none;"> Loading... </div>  - v-show를 써야되는 시점 : 자주 화면이 변경되는 부분    ex. 사용자 시점가 라디오 버튼으로 ui 보이기/숨김 처리를 할 수 있게 해놓을 때 6) template 태그는 어떻게 적용될까?  - template 태그는 실제 화면에서 해당 태그가 사라지고, template 태그 안에 있는 태그들이 한단계 위로 올라온다.  - 가장 위의 template 태그 안에는 template을 못쓴다. (div로 감싸는게 편한 방법)

 

1. 데이터 바인딩

 설명 : data 속성에 정의한 value 속성 값을 렌더링할 때 사용하며, input에 값을 입력시 value 속성 값에 바로 적용된다.

<input type="number" v-model="value"> <div>{{value}}</div>

 

2. if문

 설명 : (변수) 값이 true일때 요소가 DOM에서 보이고, false일때 요소가 DOM에서 제거된다.

 예제

<div id="root">   <div v-if="liked">if문에 의해 안보이는 요소</div>   <button v-else v-on:click="onClickButton">if문에 의해 보이는 요소</button> </div> <script>  const app = new Vue({   el: '#root',   data: {     liked: false,   },   methods: {    onClickButton() {       this.liked = true;    }   }  }); </script>

- 버튼을 클릭했을때 (div가 보이고) 버튼이 안보이는 이유는 else문으로 엮어있기 때문이다.  - v-if안에는 자바스크립트 문법도 쓸 수 있다.

※ 소스 : https://github.com/developerKmhan/vueTraining/blob/master/ifExam.html

   참고 : https://www.youtube.com/watch?v=BRgikOe52PA&list=PLcqDmjxt30RsdnPeU0ogHFMoggSQ_d7ao&index=3

 

3. for문

 설명 : script의 array를 임의의 아이템명으로 가져와서 개수만큼 반복( 및 출력)한다.

1. v-for="아이템명 in array" 2. v-for="(아이템명, 인덱스) in array" 3. v-for="아이템명 in array" :key="아이템명.key값"   <div>아이템명.key값</div>   <div>아이템명.key2값</div>

html 예시) <li v-for="fruit in fruitList">   {{ fruit.name }} - {{ fruit.price }} </li>

script 예시) new Vue({   el: "#root",   data: {   fruitList : [     {name: "사과", price: "1000원"},     {name: "수박", price: "20000원"},    ]   } })

※ 소스 : https://github.com/developerKmhan/vueTraining/blob/master/forExam.html

참고 : https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90vuejs-v-for-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%98%EB%B3%B5%EB%AC%B8-83501d7a635a

 

3. directive문

 3-1) v-bind

  - v-bind:id="uuid" : 태그의 id값을 data 속성의 uuid와 연결

  - v-bind:class="name" : 태그의 class값을 data 속성의 name과 연결

 ※ id와 class가 각각 data binding 되었으므로, Vue 인스턴스의 uuid와 name 값에 따라 즉시 반영

 

 3-2) v-if / v-else

  - 조건이 true이면 실행되고, false이면 v-else가 실행

 

 3-3) v-show

  - 조건이 true이면 보여지고, false이면 안보임

 ※ v-if와 v-show에서 사용자 시점으로 차이점은 없지만, 실제로 v-show는 v-if처럼 dom에서 삭제되지는 않고 숨김(display=None;) 처리되어있습니다.

 

 3-4) v-model

  - v-model은 Vue data 속성과 input을 데이터 바인딩할 때 사용합니다.

 

 3-5) v-on

  - 메서드 지정용

 

 3-6) v-pre

  - 해당 디렉티브로 감싸면 Vue 객체는 컴파일하지 않고 콧수염(Mustach) 표현식이 문자열 그대로 출력됩니다.

  - 사용법

<span v-pre>{{message}}</span>

결과 (문자열로 표시) : {{message}}

 

 3-7) v-once

  - HTML 요소를 단 한 번만 렌더링하도록 설정합니다.

  - 사용법

<span v-once>{{message}}</span> // message 초기값이 "Hello World"일때

// console에서 소스 입력 vm.message = "Hello Vue.js" "Hello Vue.js"

결과 (화면상에 변화 없음) : Hello World

 

4. v-for 디렉티브와 v-if 디렉티브

 - v-for 디렉티브와 v-if 디렉티브는 함께 사용할 수 있습니다.

 ※ 주의할 점 : v-for 디렉티브가 먼저 수행되고 v-if 디렉티브가 적용됩니다.

 - 사용법

<tr v-for="(contract, index) in contracts"  v-if="contract.address.indexOf('서울') > -1">