VUE笔记

v-model:  在表单元素上创建双向数据绑定。

v-if 条件渲染指令，它根据表达式的真假来删除和插入元素

    v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式

v-show 条件渲染指令

    和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

v-else 为v-if或v-show添加一个“else块”。

    v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别

v-for 基于一个数组渲染一个列表

v-bind 在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class

v-on 给监听DOM事件，用法和v-bind类似

v-once 不随vm.data变化的文本

---

计算指令

在模板中表达式不宜过于复杂，否则使用计算指令讲逻辑抽离出来

计算属性在选项对象的computed对象中编写。该对象的属性名即为需要计算得到的属性名，值为一个匿名函数。但这并不意味着把这个匿名函数的值赋给该属性（上例中的reversedMessage），事实上，在渲染的时候，该匿名函数会被执行，然后将return的值赋给computed对象的属性。

---

数组渲染时的缺陷与解决办法

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如： vm.items.length = newLength

Vue也提供了解决问题的办法，解决第一个问题：

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`

example1.items.splice(indexOfItem, 1, newValue)

解决第二个问题：

example1.items.splice(newLength)

---

事件修饰符

Vue提供的事件修饰符将常见的事件设置（比如阻止元素默认事件，或阻止事件冒泡）旨在让我们的Methods更加关注数据逻辑。通过由点(.)表示的指令后缀来调用修饰符

常见的事件修修饰符有以下几个：

.stop // 阻止事件冒泡

.prevent // 阻止元素默认事件

.capture // 使用事件捕获模式监听事件

.self //只当事件在该元素本身（而不是子元素）触发时触发回调

---

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号

https://cn.vuejs.org/v2/guide/instance.html