本节将学习Vue的基础语法，为了简单，在html页面中采用<script>标签的形式引入vue。
主要目录：
（1）声明书渲染
（2）条件渲染
（3）列表渲染
（4）属性绑定
（5）双向绑定
（6）事件处理
一、声明式渲染
声明式渲染：采用简洁的模板语法声明式地将数据渲染进DOM，包括{{Mustache}}和 v-bind、v-model。
如图，通过{{}}双大括号的形式展示data中的message，当message发生变化时，渲染出的 dom 内容也会同步发生改变。
但有个问题是，当我们去刷新页面的时候，声明的 {{ message }}，会在 DOM 中一闪而过。这是因为在 Vue 尚未编译到关联实例的时候，我们的指令还无法被解析。因此，最好采用v-cloak指令，来解决{{}}闪烁的问题。具体用法为：
二、条件渲染
v-if ：当条件为true时，DOM树中才有该节点，当条件为false时，DOM树将删除该节点，因此是无法获取到该元素信息的；
v-show：根据条件来控制元素的显示或隐藏。当条件为false时，display为none，元素不显示，但还存在在DOM中。
三、列表渲染
v-for：通过item in items方式指定列表渲染，其中 items 为数据源，item 为每一条数据的别名。
如图，其中index 为每一条数据的索引值，v-bind：key指令为每一条列表数据的唯一 id。
v-for 指令不但可以遍历数组，还可以遍历 object 对象。
当以下场景时，Vue 不能检测到对象属性的添加或删除。
1. 利用索引去设置新的数据时：items[indexOfItem] = newItem;
2. 直接修改数组的长度时：items.length = newLength;
而是应该通过下面的方法进行数据修改：
1. 通过Vue.set(vm.items, indexOfItem, newValue);
2. push() 、pop()、shift()、unshift()、splice()等方法;
详细信息参见https://cn.vuejs.org/v2/guide/list.html#数组更新检测。
四、属性绑定
Vue 中的属性绑定一般会通过v-bind来执行，因为对于{{Mustache}}来说，它只能渲染 html 内容模块，而无法渲染到 html 属性。
如图，通过v-bind 来绑定 span 中的 title 属性、img 的 src 属性和 alt 属性。v-bind:class="classProperty" 可缩写为 :class="classProperty"
v-bind的表达得到了增强，因此十分灵活。常见的有:class="{'red' : isActive, 'big-font': isBig}"、:style="isActive ? 'color: red' : 'color: blue'"等等。
五、双向绑定
v-model： 多用于<input >等表单标签中，它会自动检测用户的变更事件，并且更新数据。
v-model.lazy 改变数据同步时机。当执行 change 事件时进行数据同步
v-model.number 同步数据将输入的值改变为number类型
v-model.trim 同步数据去掉输入值前后的空格
六、事件处理
如点击事件、键盘抬起事件。Vue 中定义的方法，需要定义到 methods 对象中。
常用修饰符
