-
[Vus.js] Vue 템플릿과 데이터 바인딩하는 법Vue 2019. 1. 27. 18:02
Vue 탬플릿이란?
마크업 요소와 Vue인스턴스 속성을 연결하여 HTML로 변환해주는 속성
마크업요소: html,css등
Vue 인스턴스 속성: 데이터, 로직
데이터 바인딩 방법
2가지가 있다.
{{ }} - 콧수염 괄호
v-bind
- vue뿐만 아니라 다른언어나 프레임워크에서도 자주사용되는 템플릿 문법이다
- vue 데이터가 변경되어도 값을 바꾸고 싶지 않다면
v-once 속성을 사용한다.
- {{ }}안에서 자바스크립트 표현식작성이 가능함
- 변수선언 불가
- 분기문은 if문 사용불가, 삼항연산자 사용가능
- 복잡한 연산은 vue인스턴스의 computed속성을 이용하여 작성한다.(캐싱효과있음)
- id, class, style등 html속성값에 vue 데이터 값을 연결할 때 사 용 하는 방식
- v-bind는 :로 간소화가 가능하다.(약식문법)
ex) v-bind:id = :id오픈소스 보면 대부분 v-bind로 쓰긴한다.
콧수염괄호 예졔
123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en" dir="ltr"><head><script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script><meta charset="utf-8"><title> 바인딩 테스트</title></head><body><div id="app1" v-once>{{message}}</div><script>new Vue({el: '#app1',data: {message : ''}});</script></body></html>cs v-bind 예제
12345678910111213141516171819202122232425262728293031323334353637<!DOCTYPE html><html lang="en" dir="ltr"><head><script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script><meta charset="utf-8"><title> 바인딩 테스트</title></head><body><div id="app1"><div v-bind:class="testClass">클래스</div><div v-bind:id="testId">아이디</div><div v-bind:style="testStyle">스타일</div></div><script>new Vue({el: '#app1',data: {testClass: 'class 부여한다.',testId: 'id 부여한다',testStyle: 'color: blue'}});</script></body></html>cs 결과화면
'Vue' 카테고리의 다른 글
[Vue.js] Vue 프로젝트 구성방법 및 구조 (0) 2019.02.04 [Vue.js] 뷰 디렉티브란? (0) 2019.01.27 [Vue.js] Vue Http 통신, 엑시오스(axios)란? (0) 2019.01.21 [Vue.js] 네임드뷰 (0) 2019.01.21 [Vue.js] Vue 라우터란? (2) 2019.01.20
