Vue中的一些指令

2022/5/17 vue

v-text:

1.作用：向其所在的节点中渲染文本内容

2.与插值语法的区别：v-text会替换掉节点中的内容，则不会

v-html:

1.作用：向指定节点中渲染包含html结构的内容

2.与插值语法的区别：v-html会替换掉节点中的内容，则不会

3.注意点：v-html有安全性问题

在网站上动态渲染任意的HTML是非常危险的，容易导致XSS攻击

一定要在可信的内容上使用v-html，永远不要在用户提交的内容上

v-cloak(没有值):

1.v-cloak本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出的问题

3.配合属性选择器使用：[v-cloak]{ display:none; }

v-once(没有值):

1.v-once所在的节点在初次动态渲染后，就视为静态内容了（只在初始化时渲染一次，后面数据的更改不受影响）

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

        <h1 v-once>使用v-once的number:{{number}}</h1>
        <h2>直接展示number:{{number}}</h2>
        <button @click="number++">点击按钮number+1</button>
          data() {
                return {
                    number: 1
                }
            },

v-pre(没有值):

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

LOADING...

Vue中的一些指令