텍스트 보간
Mustache 구문을 사용한 텍스트 보간.
<div id="app">
<p>{{msg}}</p>
</div>
<script>
new Vue(){
el: '#app',
data() {
msg: '메세지!!!!!'
}
}
</script>* Mustache 구문은 데이터를 일반 텍스트로 해석하기 때문에 만약 HTML로 출력하고 싶다면 v-html 디렉티브를 사용해야 한다.
<div id="app">
<div v-text="msg">여기에 msg가 출력된다</div>
<div v-html="msg">여기에 msg가 출력된다</div>
</div>
<script>
new Vue(){
el: '#app',
data() {
msg: '<h2>메세지!!!</h2>'
}
}
</script>Vue.js는 모든 데이터 바인딩 내에서 자바스크립트 표현식의 모든 기능을 지원한다.
| 가능 | 불가능 |
| {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} |
{{ var a=1 }} {{ if(ok) {return 'YES'} }} (조건문은 작동하지 않음) |
디렉티브
디렉티브는 v-접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 자바스크립트 표현식이 된다. (v-for 예외)
디렉티브의 역할은 표현식의 값이 변경될 때 사이트 이펙트를 반응적으로 DOM에 적용하는 것이다.
| 디렉티브 | 디렉티브 | ||
| v-text | 데이터를 텍스트로 해석 | v-if | 조건에 따라 엘리먼트를 화면에 랜더링함 |
| v-html | 데이터를 html로 해석 | v-else-if | |
| v-once | 데이터를 한 번만 변경할 수 있음. (일회성 보간) | v-else | |
| v-model | 양방향 바인딩 처리 | v-for | 배열이나 객체의 반복에 사용. v-for="(요소변수이름, 인덱스) in 배열" |
| v-bind | 엘리먼트의 속성과 바인딩 처리. (:로 축약해서 사용 가능. v-bind:class="..." :[속성 이름]="속성 값" |
v-cloak | Vue Instance가 준비될 때까지 mustache 바인딩을 숨기는데 사용 |
| v-show | 조건에 따라 엘리먼트를 화면에 랜더링함. style의 display를 변경 |
v-on | 이벤트를 등록할 수 있음 v-on:click="couter += 1" |
* v-bind 예시
v-bind는 엘리먼트의 id, class 등의 속성을 바인딩으로 변경할 수 있다.
<div id="app">
<div v-bind:id="idValue">메세지</div>
<button v-bind:[key]="btnId">버튼</button>
<div :id="idValue">메세지</div>
<button :[key]="btnId">버튼</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
idValue: "test-id1",
key: "class" /* id 혹은 class */,
btnId: "btn1",
};
},
});
</script>약간.. 뇌에 힘풀고 간단히 이해하려면 걍 vue 인스턴스의 data 값을 사용하고 싶을때 v-bind 하면 된다.
* v-show와 v-if/else의 차이?
show는 랜더링을 하지만 display에서 none 속성을 가져서 안보이는 것이고, v-if/else는 false일 경우 랜더링 자체를 하지 않음. (엘리먼트를 삭제함)
