内置指令 | iGmaBlog

我们学过的指令

v-bind：单项绑定解析表达式，可简写为 :xxx
v-model：双向绑定数据
v-for：遍历数组、对象、字符串（可迭代对象）
v-on：绑定事件监听，可简写为 @
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否显示）

v-text

作用：想起所在的节点中渲染文本内容。
与插值语法的区别：v-text会替代掉节点中的内容，则不会。

代码

html

<body>
    <div id="root">
        <h2>{{ name }}</h2>
        <h2 v-text="name"></h2>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            },
        })
    </script>
</body>

v-html

作用：向指定节点中渲染包含 HTML 结构的内容。
与插值语法的区别：
1. v-html 会替换掉节点中所有的内容，则不会。
2. v-html 可以识别 HTML 结构。
严重注意：v-html 有安全性问题
1. 在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击。
2. 一定要在可信的内容上使用 v-html ，永远不要用在用户提交的内容上。

代码

html

<body>
    <div id="root">
        <div v-html="str"></div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                str: '<H2>iGma</H2>'
            }
        })
    </script>
</body>

v-once

v-once 所在节点在初次动态渲染后，就是为静态内容。
以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。

代码

html

<body>
    <div id="root">
        <h3 v-once>初始化时 n 的值为：{{ n }}</h3>
        <h3>当前 n 的值为：{{ n }}</h3>
        <button @click="n++">点我 n++</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                n: 1
            },
        })
    </script>
</body>

v-pre

跳过其所在节点的编译过程。
课利用他跳过没有使用指令语法、差值语法的节点，会加快编译。

我们学过的指令 ​

v-text ​

v-html ​

v-once ​

v-pre ​

我们学过的指令

v-text

v-html

v-once

v-pre