vue|内置指令的那些事☕

159 阅读1分钟

1、v-bind

v-bind:响应并更新DOM特性;例如:v-bind:href v-bind:class v-bind:title v-bind:bb【简写:class】

2、v-on

v-on:用于监听DOM事件; 例如:v-on:click v-on:keyup【简写@click】

3、v-model

v-model:数据双向绑定;用于表单输入等;例如:

思考💡

v-model和:model的区别?

v-model是vue的内置指令,但是:model是v-bind:model的缩写,v-model完成的是双向绑定,v-bind是单向绑定

4、v-show

v-show:条件渲染指令,为DOM设置css的style属性

5、v-if

v-if:条件渲染指令,动态在DOM内添加或删除DOM元素

6、v-else

v-else:条件渲染指令,必须跟v-if成对使用

7、v-for

v-for:循环指令例如:<li v-for="(item,index) in todos"></li>

8、v-else-if

v-else-if:判断多层条件,必须跟v-if成对使用;

9、v-text

v-text:更新元素的textContent;例如:【简写{{msg}}

10、v-html

v-html:更新元素的innerHTML;

11、v-pre

v-pre:跳过所在元素的编译过程,可以理解成程序员写的什么就展示什么,不会在进行编译了,可以加快编译的速度。

12、v-cloak

v-cloak:当网页还在加载vue.js,导致vue页面还来不及渲染,就会出现显示vue源代码的情况,我们可以利用v-cloak解决

html:
<div id="app" v-cloak>
    {{context}}
</div>
css:
[v-cloak]{
    display: none;
}

13、v-once

v-once:只渲染对应的元素一次,当数据更新时,视图不会发生改变

参考👀

www.cnblogs.com/keyeking/p/…

blog.csdn.net/MCCLS/artic…

www.php.cn/website-des…

blog.csdn.net/u012155729/…

www.jianshu.com/p/f56cde007…