[Vue.js] 5. 템플릿 문법 그리고 v-속성에 대한 이해와 예제

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

템플릿 문법

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을

사용합니다.

*렌더링: HTML로 입력받아 해석하고 화면에 표시해주는 것.

 

 

 

보간법

수학 분야에선 알려진 데이터 지점의 고립점 내에서 새로운 데이터 지점을 구성하는 방식이라고 일컫는다.

 

<p> 메시지: {{message}} </p>

데이터 바인딩의 가장 기본 형태는 “Mustache(수염)” 구문 {} 을 사용한 텍스트 보간입니다.

{{message}} 는 vue 인스턴스의 data 객체의 message 속성 값으로 대체 되고 갑싱 변경될 때마다 갱신 됩니다.

 

<p v-once>메시지: {{message}} </p>

v-once 디렉티브를 사용하게되면 데이터 변경 시 업데이트가 되지 않는 일회성 보간으로 수행함.

 

※ 주의사항

같은 노드의 바인딩에도 영향을 미친다는 점을 유의 해야한다.

<div id="app">
   <textarea v-once>{{value.a}}</textarea>
   <textarea>{{value.b}}</textarea>
   <div v-once>
   <textarea>{{value.a}}</textarea>
   <textarea>{{value.b}}</textarea>
   </div>
   <button @click="change1">
     값 변경1
   </button>
   <button @click="change2">
     값 변경2
   </button>
</div>

new Vue({
  el: '#app',
  data: {
   a:1,
   b:1,
  },
  methods:{
    change1(){
      this.a+=1;
    },
    change2(){
      this.b+=1;
    },
  }
})

 

참고: https://jsfiddle.net/qudcks0703/y1zef7or/60/

위 페이지에 각각의 textarea에 v-once를 사용할 경우는 사용 된 곳만 업데이트가 되지 않지만

div로 묶여있는 같은 레벨의 자식노드 textarea는 둘다 값이 변경되지 않는다.

 

++추가로 템플릿 문법 {{}}은 HTML 속성에서는 사용할 수 없습니다.

또한 boolean 타입의 v-bind 디렉터리를 사용할 때 존재하지 않는 null,undefined 속성을 사용하게 되면

false로서 인식됩니다.

참고: https://jsfiddle.net/qudcks0703/y1zef7or/64/

 

++추가로 템플릿 문법{{}} 내에서는 javascript 함수를 사용할 수 있습니다. 단 구문은 사용 X 표현식 O

// 아래의 식들은 구문식입니다.
{{ var a = 1 }} 

//조건문을 사용하기 위해선 아래와 같이
//삼항연산자 표현식을 사용해야합니다.
{{ if (ok) { return message } }} // X 
{{  ok ? message : false }} // O

*구문= 컴퓨터에게 계산의 결과를 어디에 저장할 것인지에 대해서 정의하는 것

*표현식=  계산의 결과를 표현하는 것

 

 

 

디렉티브

이전에 살펴보았던 v- 접두사가 있는 것들은 표현식의 값이 변경될 때  반응적으로 DOM에 적용합니다.

<p v-if="check"> 보임.</p>

 

v- if인 경우 check가 boolean 타입일 경우 DOM 객체인 엘리먼트<p>는 제거(false) 또는 삽입(true) 됩니다

 

<a v-bind:href="url">뚝딱이의 홈페이지</a>
<a v-on:click="action">접속버튼</a>

 

v-bind는 :라는 콜론을 통해 HTML 기본 속성인 href와 click이라는 속성에 반응적으로 갱신할 수 있습니다.

v-bind:는 기본적으로 어떤 값을 전달인자로 받지만, v-on:은 어떤 이벤트를 받습니다.

 *v-bind:는 return 값을 반환하는 함수를 받지만, v-on:은 이벤트 함수를 받습니다. ( 전달인자 () << 를 주의하세요.)

  참고:https://jsfiddle.net/qudcks0703/y1zef7or/72/

 

 

Vue 2.6.0  버전부터는 HTML 속성 또한 동적인 바인딩이 가능해졌습니다.

*[]를 사용하여 HTML 속성또한 동적으로 바인딩 가능함 , null 사용시 바인딩 제거

참고: https://jsfiddle.net/qudcks0703/y1zef7or/75/