바인딩 : 식별자와 값을 연결하는 과정.
ex: 변수 선언 : 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-bind:type="type" v-bind:value="inputData"><!--데이터값을 input value와 연결시켜주고싶다. 속성에는 {{}}를 넣지않는다.-->
<a :href="getKossieCoderLink('kossiecoder')">코지 코더 채널</a> <!--필요하다면 함수도 넣을 수 있다. "kossiecoder"는 불가. ''안에 넣어줘야-->
</div> <!--v-bind:에서 v-bind는 생략하고 :만 사용가능 -->
<script>
new Vue({
el: '#app',
data: {
inputData: 'hello',
type: 'number',
link: 'https://www.youtube.com/'
},
methods: {
getKossieCoderLink(channel){
return this.link+channel;
}
}
})
</script>
</body>
</html>데이터 바인딩 하는 방법
1/ 텍스트에는 {{}} 이렇게 간단하게 데이터 바인딩을 할 수 있다. (식별자 {{}}와 값을 바인딩)
2/ html 태그의 속성에도 데이터 바인딩을 할 수 있다. --> v-bind: 를 앞에 붙여주면 된다. 여기서 v-bind는 생략가능.
3/ html 태그 속성에 바인딩 시, data뿐만 아니라 methods도 바인딩 가능하다.
'Vue.js' 카테고리의 다른 글
| Kossie Coder 07. Watch 속성 (0) | 2022.05.15 |
|---|---|
| Kossie Coder 06. Computed 속성 (0) | 2022.05.15 |
| Kossie Coder 05. 데이터 양방향 바인딩(Data Two Way Binding : v-model) (0) | 2022.05.09 |
| Kossie Coder 04. 이벤트(Events) (0) | 2022.05.09 |
| Kossie Coder 02. 뷰 데이터(data)와 메소드(methods) (0) | 2022.04.28 |
