1、简单介绍:
在Vue中,指令(Directives)是带有v-前缀的特殊属性,用于操作DOM元素和响应数据变化。
2、语法规则
- vue中的所有的指令都以v开始,同时是以html标签的形式存在,如:
<html标签 v-指令名:参数="javascript表达式"></html>
。之前在{{}}插值语法中可以用的放到这里也可以用 - 有的指令不需要参数也不需要表达式,如
v-once
- 有些指令不需要参数但是需要表达式,如`v-if="表达式"
- 有些指令既需要参数,也需要表达式,如
v-bind:参数="表达式"
3、常见指令
v-once:
作用:只渲染元素一次。随后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-if:
作用:表达式的执行结果需要是一个布尔类型的数据:true或者fa1setrue:这个指令所在的标签,会被渲染到浏览器当中。fa1se:这个指令所在的标签,不会被渲染到览器当中。
v-bind: 可以让html标签中的某个属性产生动态效果
语法:<html标签 v-bind:参数="表达式"></html标签>
html页面是无法识别v-bind
的,只有通过vue进行转换,才能识别。假设一个标签编译前的值为:<html标签 v-bind:参数="表达式"></html>
但是编译后会变成:<html标签 参数名="表达式结果"></html>
。
虽然原则上v-bind后面的参数可以随便写,但是只有写成html标签中有的属性才会生效。
v-bind:参数名="表达式"
由于使用频率极高所以可以简写为:参数名="表达式"
v-bind
是单向绑定:也就是说数据发生变化,视图也会发生变化,但是视图发生变化,数据不会发生变化。
v-model:
v-model
也是绑定数据的指令,和v-bind
不同的是v-model
是双向数据绑定。
v-model更多的用于表单类html元素上,如<select>
、 input
、textarea
。因为这种元素才会提供交互界面。才可以让用户去改变视图。
通常来说v-model是用在value属性上,所以v-model也有简写方式:v-model="表达式"