Vue.js的常用指令
上面用到的v-model
是Vue.js常用的一个指令,那么指令是什么呢?
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
Vue.js具有良好的扩展性,我们也可以开发一些自定义的指令,后面的文章会介绍自定义指令。
v-if指令
v-if
是条件渲染指令,它根据表达式的真假来删除和插入元素.
v-show指令
v-show
也是条件渲染指令,和v-if指令不同的是,使用v-show
指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。
v-else指令
可以用v-else
指令为v-if
或v-show
添加一个“else块”。v-else
元素必须立即跟在v-if
或v-show
元素的后面——否则它不能被识别。
v-for指令
v-for
指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似.
v-bind指令
v-bind
指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class.
v-on指令
v-on
指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件.
v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind
和v-on
提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。