Vue 선언적 렌더링

선언적 렌더링

Vue.js의 핵심은 간단한 템플릿 구문을 사용하여 데이터를 선언적으로 DOM에 렌더링 할 수 있다.
(<div> 태그 안에 {{변수명}} 와 같은 구문을 선언해서 html DOM 에 데이터를 전달하는 방식)

사용법

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

정적으로 보일 수 있겠지만 Vue 내부에서 많은 task를 거쳐 데이터와 DOM이 연결되었으며 이 앱은 반응형으로 제작되어있다.
때문에 console에서 message 값을 변경하면 html 탬플릿의 값과 JavaScript의 값을 바꾸지 않아도 반응형으로 랜더링 된다.

디렉티브

• Vue에서 제공하는 특수 속성
• v-접두어
• 기본 디렉티브 목록
  
  

v-bind

• 텍스트 이외에 엘리먼트 속성도 바인딩 할 수 있음

기본 문법

<span v-bind:속성명="변수명"></span>
<span :속성명="변수명"></span>	// v-bind 생략가능

사용법

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

---

References

• https://velog.io/@inyong_pang/Vue.js-%EA%B3%B5%EC%8B%9D%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%84%A0%EC%96%B8%EC%A0%81-%EB%A0%8C%EB%8D%94%EB%A7%81-v-bind