시작하기 | Notion

CDN으로 시작하기

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>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true,
  },
})