Vue 指令,b | WWD’s Blog

v-html：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML

v-if：条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染（v-if、v-else-if、v-else）

v-show：用法与v-if大致一样，切换开销比较高就用 v-show

v-for：我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。注意常用元组，加入index以便其顺序正确。

v-on：监听DOM事件，可以用@来代替

有事件修饰符：.stop/.prevent/.capture/.self/.once/.passive

有按键修饰符：.enter/.tab/.delete (捕获“删除”和“退格”键)/.esc/.space./.up/.down/.left/.right

有系统修饰键：.ctrl/.alt/.shift/.meta

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

v-bind：可以用:来代替，绑定属性；class、style（可以是字符串、数组、对象[key-value型]）但都是要用””

v-model ：可以实现表单元素和Model层中的数据的双向绑定

可以用于收集文本、多行文本、复选框、单选按钮的值

文本：

多行文本：

复选框：

多个复选框，绑定到同一个数组：

单选按钮：

有修饰符：.lazy/.number/.trim

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

也可以使用ref来获取表单中数据

给组件起名字，相当于 id 标记，通过：this.$refs.名字获取给Dom元素

获取Dom节点

computed：计算属性，将模板中的运算提取出来（类似于C++中的inline）

示例

王大卫