템플릿 문법, 디렉티브
https://ryuzuka.github.io/VUE/tutorial/03_template.html
<div id="app">
<div>{{ msg }}</div> <!-- Mustache( 이중괄호 {{ }} ) -->
<div v-once>{{ msg }}</div> <!-- v-once ( 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행 ) -->
<div v-text="msg"></div> <!-- v-text ( 문자열 그대로 표기 ) -->
<div v-html="msg"></div> <!-- v-html ( 문자열 html 적용 ) -->
<div><a v-bind:href="link">link</a></div> <!-- v-bind ( html 속성에 Vue data 바인딩 ) -->
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello, <b style="color: red">Vue!</b>',
link: 'http://www.google.com'
}
});
</script>
<!-- JavaScript 표현식 사용 가능 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
- v-if
<div id="app">
<div v-if="isIf">v-if true</div> <!-- v-if -->
<div v-else-if="!isIf">v-if false</div> <!-- v-else-if -->
<div v-else="isIf">v-if else</div> <!-- v-else -->
<div v-show="isShow">v-show true</div> <!-- v-show -->
</div>
<script>
new Vue({
el: '#app',
data: {
isIf: true,
isShow: true
}
});
</script>
v-for
key - https://kr.vuejs.org/v2/guide/list.html#key
<div id="app">
<!-- array -->
<ul>
<li v-for="item in array">item: {{ item }}</li>
<!-- v-for ( array: item ) -->
</ul>
<ul>
<li v-for="(item, index) in array">item: {{ item }}, index: {{ index }}</li>
<!-- v-for ( array: item, index ) -->
</ul>
<!-- object -->
<ul>
<li v-for="value in object">value: {{ value }}</li>
<!-- v-for ( object: value ) -->
</ul>
<ul>
<li v-for="(value, key) in object">key: {{ key }}, value: {{ value }}</li>
<!-- v-for ( object: value, key ) -->
</ul>
<ul>
<li v-for="(value, key, index) in object">key: {{ key }}, value: {{ value }}, index: {{ index }}</li>
<!-- v-for ( object: key, value, index ) -->
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello, <b style="color: red">Vue!</b>',
link: 'http://www.google.com',
target: '_blank',
isIf: true,
isShow: true,
array: ['a', 'b', 'c'],
object: {
a: 0,
b: 1,
c: 2
}
}
});
</script>
* 동일한 노드에 두가지 모두 있다면, v-for가 v-if보다 높은 우선순위를 갖는다. ( v-if: 루프가 반복될 때마다 실행 )
v-bind
Vue 인스턴스의 속성을 폼 엘리먼트 속성 값으로 동적 바인딩
<select v-model="select">
<option v-for="option in options" v-bind:value="option">{{ option }}</option>
</select>
<input type="checkbox" v-model="checkboxBind" v-bind:true-value="trueValue" v-bind:false-value="falseValue">
<input type="radio" v-model="radioBind" v-bind:value="radioData">
- 약어
<!-- v-bind -->
<a v-bind:href="url"> ... </a>
<!-- 약어 -->
<a :href="url"> ... </a>
<!-- v-on -->
<a v-on:click="doSomething"> ... </a>
<!-- 약어 -->
<a @click="doSomething"> ... </a>