index.html
<!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">
{{message}}
</div>
<script src="index.js"></script>
</body>
</html>
index.js
Vue 인스턴스를 만들고 그 안에 options 객체를 집어넣는다. option 객체는 해당 뷰 인스턴스의 속성들을 나타내준다.
el
해당 뷰 인스턴스가 연결되어 있는 html element를 나타낸다.
data
html에서 해당 요소의 {{}} 안에 들어가는 데이터 값을 나타낸다.
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
})
app.message = 'Hello again!'
// 간편하게 뷰 인스턴스의 데이터 값을 변경시킬 수 있다.
조건문
v-if 디렉티브를 사용한다.
html
<div id="app-3">
<p v-if="seen">you can see me</p>
</div>
js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true,
},
})