Vue基础——常用指令

Vue基础——常用指令

指令：

Vue的指令是以v-开头的，作用于页面中的元素，所以需要将指令绑定与元素中，从而达到给绑定的元素添加行为的目的。

​ 语法：<元素标签 v-指令 = “表达式”>

1.v-text和v-html

​ v-text 和v-html作用相近，都是更新元素的中的内容，可以理解为innertext和innerHTML，而不能一味的滥用这两个指令 ，如果需要更新的只是部分的元素则应该使用的是双大括号的插值：{ {value}}。

另外 v-html 的特性会出现安全性问题，所以在官方文档中也明确指出“只在可信内容上使用 v-html，永不用在用户提交的内容上。”

2.v-show ,v-if,v-else-if,v-else

2.1 v-show

​ 根据表达式的值来确定元素的display值，从而达到元素的显示和隐藏。

2.2 v-if

v-if 的作用与v-show大体一致，都是根据表达式的布尔值来添加或者删除元素。

补充：v-if和v-show 的区别可以从各自的第二张图片看出来，v-show 是通过改变display值来改变元素的显示和隐藏。它是依旧在html中的。而v-if则直接将元素移出了页面中，所以不会再标签中看到所选的元素。

2.3 v-else-if 和v-else

这两个指令的含义不必过多的解释，值得注意的是这两个指令不能够单一的使用，这意味着这两个指令前必须有v-else-if或者v-else 指令。所以通常v-if ，v-else-if,v-else 会搭配使用。

2.4 v-for

v-for 用来迭代渲染，达到循环的操作的目的，可以迭代数组，数组对象，对象或是数字。

2.6 v-on

v-on 是用来绑定事件的监听器，表达式可以是一个方法也可以是内联语句。有许多修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

也可以进行缩写

可以缩写成

2.7 v-model

它可以实现在表单控件或者组件上创建双向绑定。

这就实现了data中value和input中数据的绑定，使得数据在动态的变化在span中体现出来。