[Vue.js] 05 Template

템플릿 문법

• 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용한다.
• 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수있는 유효한 HTML이다.
• 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있다.

 

데이터 바인딩

• 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법

문자열

• 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)
• 속성이 변경될 때 마다 갱신된다.
• v-once를 사용하여 데이터 변경 시 업데이트를 방지 할 수지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다.

<div>{{ message }}</div>

new Vue({
  //delimiters: ['[[', ']]'],
  data: {
    message: 'Hello Vue.js'
  }
})

속성

• Mustaches는 HTML 속성에서 사용할 수 없어서 v-bind 디렉티브를 사용한다.
  • <div v-bind:id="dynamicId"></div>
• boolean 속성을 사용할 경우, 해당값이 false의 값을 가지면 disabled 속성은 렌더링 된<button>엘리먼트에 포함되지 않는다.
  • <button v-bind:disabled="isButtonDisabled">Button</button>

 

Javascript 표현식 사용

• 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
• 각 바인딩에 하나의 단일 표현식 만 포함될 수 있다

{{ number + 1 }}  // O
{{ ok ? 'YES' : 'NO' }}  // O
{{ message.split('').reverse().join('') }}  // O
{{ var a = 1 }}  // X
{{ if (ok) { return message } }} // X

디렉티브

• 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법
• 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공
• v- 접두사가 있는 특수 속성

조건

• 데이터의 boolean 표현에 따라 엘리먼트를 제거 또는 삽입한다.
• v-if, v-else-if, v-else
  • else-if 는 2.1.0에 추가됨

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• v-show
  • display:none 옵션이 추가된다.
  • <h1 v-show="ok">안녕하세요!</h1>

 

리스트

• v-for 리스트
  • items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 변수이다.

<ul id="example-2">
   <li v-for="(item, index) in items">
     {{ parentMessage }} - {{ index }} - {{ item.message }}
   </li>
</ul>

• v-for 객체
  • 객체의 속성을 반복할 수도 있다.
  • 객체를 반복할 때 순서는 `Object.keys()`의 키 나열 순서에 따라 결정된다.

new Vue({
   el: '#v-for-object',
   data: {
     object: {
         title: 'How to do lists in Vue',
         author: 'Jane Doe',
         publishedAt: '2016-04-10'
     }
   }
})

<div v-for="(value, name) in object">
 {{ name }}: {{ value }}
</div>

이벤트

• v-on
  • DOM 이벤트를 수신

<button v-on:click="counter += 1">Add 1</button>
<a v-on:click="doSomething">...</a>

data: {
  counter: 0,
},
methods: {
  doSomething: function(event) {}
}

• 수식어
  • 수식어를 통해 간단하게 여러 입력 이벤트를 감지할 수 있다.
  • 관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정
  • 키 수식어도 가능하다.

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>


<!-- 키 수식어 -->
<input v-on:keyup.enter="submit">

바인딩

• v-bind
  • 반응적으로 HTML 속성을 갱신하는데 사용
  • 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용

<div v-bind:id="dynamicId"></div>
<a v-bind:href="url">...</a>
<p v-bind:class="{ warning: isError }">Hello</p>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  dynamicId: 'AbcD',
  url: '[http://localhost.com](http://localhost.com)',
  isError: true,
  isActive: false,
  hasError: true
}

 

• v-model
  • Input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.

#문자열
<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

#multi line 
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

#checkbox
<div id='example-3'>
 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="john" value="John" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
 <label for="mike">Mike</label>
 <br>


 <span>체크한 이름: {{ checkedNames }}</span>
</div>

data: {
 checkedNames: []
}

#Radio
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>

약어

• 자주 사용되는 v-bind(:), v-on(@), v-slot(#) 은 약어가 존재한다
• v-bind: -> :

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

• v-on: -> @

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

 

computed 와 watch

computed

• 템플릿 내에 표현식을 넣을수 있지만 간단한 연산일 때만 이용하는 것이 좋다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵다.
• 종속 대상을 따라 저장(캐싱)된다
• 주로 validation 에 사용

<div id="example">
 <p>원본 메시지: "{{ message }}"</p>                  //안녕하세요
 <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>  //요세하녕안
</div>

var vm = new Vue({
 el: '#example',
 data: {
     message: '안녕하세요'
 },
 computed: {
     / 계산된 getter
     reversedMessage: function () {
     // `this` 는 vm 인스턴스를 가리킵니다.
         return this.message.split('').reverse().join('')
     }
 }
})

watch

• 대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있을 것이다.
• 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용하다

var vm = new Vue({
  el: '#example',
  data: {
     message: '안녕하세요'
  },
  computed: {
     / 계산된 getter
     reversedMessage: function () {
     // `this` 는 vm 인스턴스를 가리킵니다.
         return this.message.split('').reverse().join('')
     }
  },
  watch: {
    // 이전 데이터(old)와 갱신된 데이터(new) 모두 접근 가능하다.
    message: function(new, old) {
      axios.get();
    }
  }
})