前端 Vue框架学习实例（三）_前端开发之bootstrap+vue框架第三章的示例-CSDN博客

本文链接：https://blog.csdn.net/zhshuzi/article/details/118499173

本文详细介绍了Vue.js中的四个核心指令：v-html用于在元素中插入HTML代码；v-cloak用于在编译完成前隐藏元素；v-once指令确保元素及其子元素仅渲染一次，提高性能；v-pre则跳过元素及子元素的编译，保留Mustache语法。通过这些指令，开发者能更好地控制Vue应用的渲染和性能。

摘要由CSDN通过智能技术生成

1.v-html指令

使用html指令可以输出html代码

在<h2>标签中间输出一个<a>标签

<body>
    <div id="app">
        <h2>{{url}}</h2>
        <h2 v-html="url"></h2>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 0,
                url: '<a href = "http://www.baidu.com">百度</a>'
            }
        })
    </script>
</body>

2.v-cloak指令

这个指令保持在元素上直到关联实例结束编译。

3.v-once指令

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>  //只渲染一次，之后不会改变
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 0
            }
        })
    </script>
</body>

4.v-pre指令

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>  //显示{{message}}
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 0
            }
        })
    </script>
</body>

5.v-text指令

更新元素的 textContent

<body>
    <div id="app">
        <h2>{{message}}，王小波</h2>
        <h2 v-text="message">王小波</h2>  //只显示  ‘你好’
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '你好'
            }
        })
    </script>
</body>