1、文本类指令

{{}}、v-text  都是用于绑定节点的文本;

二者区别:{{}}这种绑定值的方式在页面会出现“{{}}”一闪而过的效果

解决{{}}在页面出现一闪而过的办法:

 // css:
[v-cloak] {
    display: 'none'
}
// html
<h1 v-cloak>{{msg}}</h1>

v-once 用于指令节点的内容只绑定一次,当前节点中所对应的变量变化,视图不更新。

通常情况下,v-once只能和{{}}一起用

v-html 用于绑定动态的html节点,相当于DOM中的innerHTML,这个指令默认已经做了”防注入攻击XSS”的处理。

v-once和v-cloak都不需要接收表达式来作为值

2、动态属性指令

v-bind  用于动态绑定节点属性(如:title,value,class,style等);经常简写成”:属性名

  动态class语法1 <div :class=”变量1 变量2″></div>
  动态class语法2 <div :class=”[表达式1,表达式2,…]”></div>
       动态class语法3 <div :class=”{类名1:布尔值1,类名2:布尔值2,…}”></div>
  动态class语法1 <div :style=”`color:red;fontSize:20px`”></div>
       动态class语法2 <div :style=”[{k1:v1,k2:v2},{k3:v3},…]”></div>
       动态class语法3 <div :style=”{k1:v1,k2:v2,….}”></div>
  这三种语法可以交叉使用,但实际上很少有人交叉使用。
3、事件绑定

v-on 用于给视图绑定各种js事件,比如:click,mouseenter,blur等,简写成: “@事件名

事件修饰符:.stop 阻止冒泡 ,.enter等,可以链式调用。

4、表单绑定

v-model 用于表单取值(表单双向绑定),比如input/select/textarea等。

表单三个修饰符:.trim自动去除文本首尾空格

.number只能输入数字

.lazy 用于性能,当表单失去焦点时再进行双向绑定

5、列表渲染

v-for  用于渲染列表、对象等。

6、条件渲染

v-show 相当于控制节点的display: none/block

v-if / v-else-if / v-else  这是真正的移除或插入视图节点,比较耗费性能,不建议和v-for一起使用。

v-for的优先级比v-if更高。

7、其它指令

v-pre 用于调试,可以阻止vue编译器对指令的编译

v-slot 指定具名插槽

本文来源:

博客园:https://www.cnblogs.com/cz-basic/archive/2022/11/20/16908283.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注