一、实例创建

var app = new Vue({
  el: '#app',  // 使用css selector
  // 数据
  data: {
    str: 'Hello World',
    dom: '<p>Hello World</p>',
    count: 0
  },
})

上面代码就创建了一个vue的实例。它表示在el的范围内使用vue的语法和这个对象所包含的信息。

二、模板语法

vue使用了基于html的语法，其次加入插值、指令和js表达式解析器。说白了，也就是使用html语法，只不过添加了一些内容。

• 插值
  插值是用{{ }}两个花括号将值括起来的语法，就是表示在此处插入某值，所以叫做插值。比如：

<p>{{ str }}</p>

由于插值类似js解析器的工作方式，str被解析为变量。它会去搜索vue实例的信息，查找这个变量。这个变量可以来自实例中的data，computed或methods。

值得注意的是：这个搜索顺序是data -> computed -> methods

除此以外，由于其像js解析器，所以也支持js表达式。

• 指令
  指令是指带有v-前缀的特性（标签属性），它用于实现简单的逻辑声明。
  主要指令如下：
  • v-html： 声明这里使用渲染dom
  • v-on：声明事件绑定
  • v-bind：声名捆绑的特性和值

用法：

  <!-- 在div中渲染dom变量，在div中生成一个p标签 -->
  <div v-html="dom"></div> 
  <!-- 给按钮绑定点击事件 -->
  <button v-on:click="count++">累加</button>
  <!-- 将p标签的id特性和count进行绑定 -->
  <p v-bind:id="count"></p>

1. 指令是指v-x的部分，而:后面的称为参数。
2. 可以发现，在文本结点位置使用插值语法，在标签特性位置不需要插值语法，像html中一样使用引号括起来即可。

缩写：
对于常用指令，可以使用缩写方式。

• v-bind:id ==> :id
• v-on:click ==> @click