vue里的指令

今天我们学习一下vue里经常用到的各种指令。

v-html指令与v-bind指令

文本插值{{ }}将代码原样展示，v-html指令将html代码解析之后展示。看下例：

data里变量的定义:

最后浏览器效果如下:

上边的两个跳转链接都能点击后跳到对应的地址，v-bind指令可以缩写为:，也就是说这里可以缩写为< a :href=“website” target="_blank">跳转前往百度

v-on指令与修饰符

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。@是语法糖写法,v-on 可以接收一个定义的方法来调用。v-on:可以省略写成@，比如v-on:click可以写成@click,再比如v-on:focus可以写成@focus.

data里定义变量age的值，如下：

methods里方法如下：

最终浏览器效果如下:

说明一下，这里v-on:click.once="age++"里点击事件后面加了修饰符once表示只能触发一次点击事件，一次执行完之后点击事件就会失效。同理，@click.prevent="handleClick"这里的点击事件加了修饰符prevent表示将会阻止默认事件的发生，而< a>标签默认事件是发生跳转，所以这里加了修饰符后点击它就不会发生跳转。最后v-on:keydown.enter = "logName"这里用了按键修饰符enter.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：只有在keyCode是13时调用vm.submit( )

v-model指令

v-model 指令用来获取文本框内的value值，实现双向数据绑定：

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

v-pre指令

我们的需求是将插值符号{{ }}原样输出，比如{{ zimug }}原样输出那就要加v-pre指令。

效果如下:

v-text指令与v-cloak指令

v-once指令

v-once指令只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。也就是说，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

自定义指令

除了上面的指令外，还有v-if、v-else-if、v-else、v-show、v-for等等指令，我们也可以自定义指令。