[데이터 바인딩 하는 법]
<전체 코드>
<!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>뷰 기초 익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ nextYear("안녕하세요") }}
<input v-bind:type="type" :value="inputData">
</div>
<script>
new Vue({
el: '#app',
data : {
person : {
name: 'lee',
age: 25
},
inputData : 'hello',
type : 'number'
},
methods : {
nextYear(greeting) {
return greeting + "!" + this.person.name + "은 내년에" + (this.person.age + 1) + "살 입니다."
},
otherMethod : function () {
this.nextYear()
}
}
})
</script>
</body>
</html>
데이터 바인딩을 하려면 태그의 속성 앞에 v-bind: 라고 쓰거나 간단하게 : 라고 쓰면 된다.
이것은 Vue 인스턴스의 data안에 값과 연결된다.
value에는 inputData에 있는 hello라는 값이 들어가고
type에는 type에 있는 number값이 들어간다.
728x90
'WEB > VUE.js' 카테고리의 다른 글
| [VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기 (0) | 2021.11.03 |
|---|---|
| [Vue.js] vue 데이터 양방향 바인딩 / 폼 입력 바인딩 (0) | 2021.10.12 |
| [Vue.js] button 이벤트 핸들링/ 이벤트 수식어 (0) | 2021.10.12 |
| [Vue.js] 뷰 프로젝트 시작하기 script 태그 넣기/ data, method 지정하기 (0) | 2021.10.12 |
| [Vue.js] vue.js 가 무엇인가? (0) | 2021.10.12 |