[VueJS] Mustache 보간법, 디렉티브(Directives)

텍스트 보간

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일 경우 랜더링 자체를 하지 않음. (엘리먼트를 삭제함)