2018-08-02 Vue JS-템플릿 문법 및 디렉티브
템플릿 문법 및 디렉티브
- 선언적 렌더링
- 선언적 렌더링은 Vue 인스턴스의 어떤 데이터를 보여주겠다고 선언해서 DOM에 렌더링 하는 것을 의미.
- 선언적 렌더링을 사용하면, DOM을 직접 핸들링하지 않아도 Vue가 DOM 업데이트를 대신 처리해 줍니다.(선언적 프로그래밍이라고도 하지요. 템플릿과 컴포넌트 사이에 관계를 맺어주면 알아서 처리해주니.)
- Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용
- Vue.js는 선언적 렌더링에 데이터를 제공하는 방법으로 문자열 보간법 / 속성 보간법 / 일회성 보간법 / HTML 보간법 사용 가능.
- 디렉티브 = 지시자 = 템플릿을 동적으로 만들어주는 요소 -> Vue 템플릿에서 사용되는 특별한 속성으로 이해하자(‘v-‘ 접두사가 있는 특수 속성)
-- Example2.vue 파일 작성
<template>
<div>
<p><router-link to="/">Go to First Page</router-link></p>
<h3>문자열 보간법(위치 지정자) : 데이터를 순수 문자열 형태로 보여줄 때 사용</h3>
<p>머스태시 문법 : -> 내용에 HTML 태그가 들어가면, 산형괄호를 자동으로 이스케이프 처리함. </p>
<p v-text="test2">v-text : -> 무시된다.</p>
<p v-text="childHtml"></p>
<p><button v-on:click="textChange">text 변경</button></p>
<h3>속성 보간법 : HTML 태그의 속성을 사용해 화면의 상태 전환이 필요할 때 사용</h3>
<p v-bind:id="pId">개발자 도구 열어서, id 봐</p>
<input type="text" v-bind:disabled="isInput">
<a v-bind:href="naverURL">네이버 href</a>
<p><button v-on:click="idChange">id 변경(동적으로 태그의 id 변경이 이루어 진다)</button></p>
<h3>일회성 보간법 : 한번 표시되면 데이터가 변경되어도 업데이트 되지 않음 / 부모태그에 사용하면 모든 자식 태그에 영향을 끼침</h3>
<p v-once v-text="test2"></p>
<h3>HTML 보간법</h3>
<p v-html="childHtml">이건 남을까</p>
<h3>템플릿 문법에서 사용하는 디렉티브(v- 접두사가 붙는 친구들) v-model</h3>
<p>v-model 디렉티브는 HTML form과 Vue 컴포넌트에 사용할 수 있는 특수 디렉티브</p>
<div id="form-warp">
<form method="get" action="">
<label for="word">검색어:</label>
<input id="word" name="word" type="text" v-model="searchWord"/>
<input type="submit" value="찾기" v-on:click="print"/>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'Example2',
data () {
return {
test: '문자열 보간법 Test',
test2: '문자열 보간법 Test2(v-text : -> 무시된다.)',
pId: 'test-id',
isInput: 'disabled',
naverURL: 'http://www.naver.com',
childHtml: '<div>전 자식 div 입니다.</div>',
searchWord: ''
}
},
methods: {
textChange: function () {
this.test = '머스태시 값은 변경!'
this.test2 = 'v-text도 변경된다..'
},
idChange: function () {
this.pId = 'change-id'
},
print: function () {
alert(this.searchWord)
}
}
}
</script>
<style scoped>
p {
font-size: 12px;
font-weight: 900;
}
</style>

- 문자열 보간법 : 머스태시 문법 / v-text 디렉티브 / v-html 디렉티브
<p>머스태시 문법 : </p>
<p v-text="test2">여기 내용은 무시되고, 가지고 온걸로 쓴다</p>
<p v-html="childHtml">여기 내용은 무시되고, 가지고 온걸로 쓴다</p>
v-html 디렉티브는 상태 값에 있는 HTML태그를 브라우저가 해석하도록 함.(v-text / 는 그대로 출력)
- 속성 보간법 : v-bind 디렉티브
<p v-bind:id="pId">개발자 도구 열어서, id 봐</p> //id
<input type="text" v-bind:disabled="isInput"> //disabled
<a v-bind:href="naverURL">네이버 href</a> //href
<img v-bind:src="image.jpg" /> //src
<img :src="image.jpg" /> //v-bind생략가능
속성 보간법은 기본적으로 HTML 태그의 속성을 상태값으로 초기화 해주거나 변경하고 싶을 때 사용한다.
- 일회성 보간법 : v-once 디렉티브
<p v-once v-text="test2"></p>
일회성 보간법은 데이터가 한번 표시되면, 변경 되어도 DOM에 업데이트가 되지 않는다.
v-once 디렉티브를 부모태그에 적용하면, 자식 태그에 있는 모든 데이터 바인딩이 한번만 실행된다.
- v-model 디렉티브 -> 양방향 바인딩(2-way binding)
<div id="form-warp">
<form method="get" action="">
<label for="word">검색어:</label>
<input id="word" name="word" type="text" v-model="searchWord"/>
<input type="submit" value="찾기" v-on:click="print"/>
</form>
</div>
v-model 디렉티브는 HTML 폼과 Vue 컴포넌트에 사용할 수 있는 특수 디렉티브
폼 관련 태그 이외의 템플릿 코드에선 동작하지 않는다.
양방향 바인딩? View ⇄ Model 형태로 바인딩하여 데이터가 양 방향으로 흐르게 해주는 것.(쉽게 말하면, 뷰와 모델에 상태값이 동기화 된다고 생각하면 됨)
Comments