JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
데이터를 바인딩 하는 방법은 총 4가지가 존재한다.
세부적이게 들어가면 더 있겠지만 가장 기초적인 방식이라고 할 수 있다.
요약하자면 아래 4가지가 존재한다.
mustache : {{ expression }}문법을 사용해서 특정 변수를 그대로 렌더링한다.
v-text : 특정 태그내에서 사용할 수 있으며 v-text속성을 사용해서 "텍스트"로 렌더링한다. 이 때 렌더링된 텍스트는 해당 태그의 자식 노드로 들어간다.
v-html : 특정 태그내에서 사용할 수 있으며 v-html속성을 사용해서 "html"로 렌더링한다. 이 때 렌더링된 텍스트는 해당 태그의 자식 노드로 들어간다.
v-bind : 특정 태그내에서 사용할 수 있으며 v-bind문법을 사용해서 vue내부의 값(data, props, computed, methods)들의 값을 해당 속성의 값으로 렌더링한다.
먼저 mustache와 v-text를 보도록하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<span v-text="name"></span><br>
{{name}}
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
}
});
</script>
</html>
이 코드를 보면 문자를 각각 v-text와 mustache를 통해서 표현하는 예제를 볼 수있다.
실행하면 둘은 보이기에는 완전하게 같은 효과를 낼것이다.
물론 다 아시다 시피 하나는 span태그에 들어있을 뿐이고 하나는 그냥 문자로 치환된 것이다.
v-text는 span태그에만 쓸수 있는건 아니고 모든 부분에서 쓸 수있다.
name이라는 병수의 값이 span태그의 자식으로 들어간 것이다.
v-text는 태그 없이 사용은 불가능 할 뿐이다.
따라서 둘의 용도는 조금 다르다고 할 수 있다.
렌더링한 결과를 보면 어떻게 사용해야할지 알 수 있다.
이번에는 v-html사용해서 렌더링 해보도록 하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<span v-html="name"></span><br>
{{name}}
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: '<b>kukaro</b>',
}
});
</script>
</html>
보면 이름에 <b>태그를 감쌌다.
기존에는 이걸 태그로 인식하지않고 그냥 문자열로 넣을것이다.
그러나 html속성으로 부여한다면 이는 그 속성의 하위태그로 부여되게 된다.
보다시피 bold태그가 적용된걸 확인할 수있는데
mustache는 bold태그가 적용되지않고 문자열로 입력된것을 확인할 수 있다.
이제 마지막으로 v-bind를 해보자.
특정 태그의 속성에 값을 주입하려고한다. 가령 이런 구문이 가능할까?
<a href="{{data}}"></a>
이런 구문은 당연히 되지 않는다.
mustache는 태그안에서는 유효하지 않다.
이런걸 해결해주기위해서 존재하는 것이 바로 v-bind이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url" v-text="name"></a><br>
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
url: 'https://www.naver.com/',
},
});
</script>
</html>
이 구문의 사용으로 여러분은 앵커태그를 클릭할 경우 naver로 리다이렉트시킬 수있다.
속성을 렌더링해주는 것이기 떄문에 a태그 뿐만아니라 link나 script태그에도 적용시킬수있으며 굳이 그게 아니더라도 적용할 방법은 다양하다.
그러나 여러분이 실제로 v-bind라는 것을 볼 경우는 거의 없다.
왜냐하면 축약해서 쓰는 것이 가능하기 때문이다.
<a v-bind:href="url" v-text="name"></a><br>
<a :href="url" v-text="name"></a><br>
위를 아래처럼 축약해서 쓸 수 있다. 뜻은 동일하다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |
|---|---|
| [Vue-05]조건문 (0) | 2018.02.20 |
| [Vue-03]라이프 사이클-기본 (0) | 2018.02.20 |
| [Vue-02]메소드 (0) | 2018.02.18 |
| [Vue-01]Vue 인스턴스 (0) | 2018.02.18 |