• node : v14.17.1
• Vue : v2
• Vue.js 가이드를 참고하여 작성

---

선언적 렌더링

• Vue.sj의 핵심으로 간단한 템플릿 구문
• DOM(Document Object Model)에서 데이터를 선언적으로 렌더링 할 수 있는 시스템
• like.. flask-jinja2의 template 구문?!

예시

단순한 템플릿 구문

• 기본적인 선언적렌더링 사용예시
• Vue.js의 데이터를 DOM에 연결하여 렌더링

[ index.html ]

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

[ index.js ]

• 사전에 index.js를 분기작성하여 index.html에서 import

var app = new Vue({
  el: '#app-1',
  data: {
    message: '안녕하세요 Vue!'
  }
})

[ Rendering ]

v-bind

• DOM에 연결된 데이터를 Vue속성으로 반응형 페이지 만들기
• v-bind
  • 동적으로 하나 이상의 컴포넌트 속성 또는 표현식을 바인딩
  • class또는 style 속성을 묶는 데 사용될 때, Array나 Objects와 같은 추가 값 유형을 지원
  • 전달인자 없이 사용하면 속성 이름 - 값 쌍을 포함하는 객체를 바인딩 하는데 사용
  • class와 style은 Array나 Objects를 지원하지 않음

[ index.html ]

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

[ index.js ]

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

[ Rendering ]

v-model

• v-model
  • 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩
  • Vue 인스턴스 데이터를 원본 소스로 취급
  • 따라서 컴포넌트의 data 옵션 안에 있는 값을 초기화 선언해야함
  • 더 자세한 사례는 폼 입력 바인딩 참고

[ index.html ]

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

[ index.js ]

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '안녕하세요 Vue!'
  }
})

[ Rendering ]