[ Vue.js ] Vue 가이드 - 선언적 렌더링

황인용·2021년 6월 28일
0

Vue.js

목록 보기
2/6
post-thumbnail

선언적 렌더링

  • 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 ]

profile
dev_pang의 pang.log

0개의 댓글