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