第一个vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div v-text="$data.title">
    </div>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        title: "Hello Word!"
      }
    }
  }
</script>

解析

等价语法

1. 

1
2
3
4
5
6
7

<div v-text="$data.title"></div>
<!--等价（Vue语法）-->
<div v-text>
    {{title}}
</div>

2. 

1
2
3
4
5
6
7
8
9
10
11
   data: function() {
     return {
       title: "Hello Word!"
     }
   }
//等价（es6语法）
   data() {
     return {
       title: "Hello Word!"
     }
   }

3.