●디렉티브란
- 디렉티브는 번역하면 '지시문'이라는 뜻으로 vue의 문법이라고 생각하면 된다.
●샘플소스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="simpleDiv">
<h3>{{text}}</h3>
<h3 v-text="text"></h3>
<h3 v-html="text"></h3>
<hr>
<h3>{{text2}}</h3>
<h3 v-text="text2"></h3>
<h3 v-html="text2"></h3>
</div>
<script type="text/javascript">
var model01 = {
text : '세번째 예제입니다1',
text2 : '<font color="blue">세번째 예제입니다2</font>'
};
var test = new Vue({
el : '#simpleDiv',
data : model01
})
</script>
</body>
</html>
●v-text 디렉티브
- 자바스크립트의 innerText 와 같은 역할을 한다.
- html태그가 적용되지 않고 문자열이 그대로 보여진다.
●v-html 디렉티브
- 자바스크립트의 innerHTML 과 같은 역할을 한다.
- html태그가 적용된 화면이 보여진다.
'프로그래밍 > vue.js' 카테고리의 다른 글
| vue.js - 6.조건문(v-if, v-else, v-else-if, v-show) 디렉티브 (0) | 2021.08.01 |
|---|---|
| vue.js - 5. v-bind, v-model 디렉티브 (0) | 2021.08.01 |
| vue.js - 3.vue기본구조(MVVM) (0) | 2021.08.01 |
| vue.js - 2.Visual Studio Code(VSCode) 한글 언어설정하기 (0) | 2021.08.01 |
| vue.js - 1.개발환경세팅 (0) | 2021.08.01 |
댓글