Vue的基本语法

本节将学习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-cloak用法

二、条件渲染

v-if ：当条件为true时，DOM树中才有该节点，当条件为false时，DOM树将删除该节点，因此是无法获取到该元素信息的；

v-show：根据条件来控制元素的显示或隐藏。当条件为false时，display为none，元素不显示，但还存在在DOM中。

v-if/v-show

三、列表渲染

v-for：通过item in items方式指定列表渲染，其中 items 为数据源，item 为每一条数据的别名。

如图，其中index 为每一条数据的索引值，v-bind：key指令为每一条列表数据的唯一 id。

v-for遍历数组

v-for 指令不但可以遍历数组，还可以遍历 object 对象。

v-for遍历对象

当以下场景时，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

v-bind的表达得到了增强，因此十分灵活。常见的有:class="{'red' : isActive, 'big-font': isBig}"、:style="isActive ? 'color: red' : 'color: blue'"等等。

五、双向绑定

v-model： 多用于<input >等表单标签中，它会自动检测用户的变更事件，并且更新数据。

v-model

v-model.lazy 改变数据同步时机。当执行 change 事件时进行数据同步

v-model.number 同步数据将输入的值改变为number类型

v-model.trim  同步数据去掉输入值前后的空格

六、事件处理

如点击事件、键盘抬起事件。Vue 中定义的方法，需要定义到 methods 对象中。

事件处理

常用修饰符

常用修饰符