Vue-内置指令-CSDN博客

本文链接：https://blog.csdn.net/m0_73839298/article/details/138989496

什么是内置指令？

在Vue.js中，v-前缀用于标识内置指令，这些指令是Vue模板语法的核心，用于将DOM元素绑定到底层 Vue 实例的数据上。内置指令（也称为模板指令或HTML指令）是Vue提供的一些特殊的标记，从而使得数据的变化能够自动反映在视图上。

内置指令

v-model: 创建双向数据绑定，将表单输入和应用状态绑定在一起
v-for: 用于基于源数据多次渲染元素或模板块
v-if, v-else-if, v-else: 条件性地渲染一块内容
v-on: 监听DOM事件，并在事件触发时执行一些JavaScript代码
v-bind: 创建双向数据绑定单向数据绑定，动态地绑定一个或多个属性
v-show: 切换元素的CSS属性display

v-text: 文本绑定指令，更新元素的文本内容
v-html: 文本绑定指令，更新元素的HTML内容
v-cloak: 这个指令保持在元素上直到关联的Vue实例被销毁
v-pre: 跳过这个元素和它所有子元素的编译过程
v-once: 只渲染元素和组件的一次，随后的更新不会影响这些元素或组件
v-hide: Vue 2 特有的指令，类似于v-show，但是它使用的v-show 逆向逻辑
v-memo: 用于缓存组件的渲染结果，提高性能
v-slot: 用于Vue组件的插槽分发

v-text

作用：用于将元素的文本内容设置为绑定的数据值,渲染文本内容，v-text适用于直接展示文本内容,不可以识别HTML结构。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>

<body>

    <div id="root">
        <h2>{{name}}</h2>
        <hr>
        <h2 v-text="name"></h2>
        <hr>
        <h2 v-text="str"></h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'Hello World!',
                str: '<h3>你好</h3>'
            }
        })
    </script>

</body>

</html>
<!-- 
    v-text：文本绑定指令

    作用：用于将元素的文本内容设置为绑定的数据值,渲染文本内容

    注意！v-text适用于直接展示文本内容,不可以识别HTML结构
-->

v-html

作用:文本绑定指令,用于更新元素的 innerHTML 的指令, v-html不要使用标签内容的绑定，有安全新问题，它可以识别HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>
<body>

    <div id="root">
        <h2 v-html="str"></h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                str: '<h3>Hello World!</h3>'
            }
        })
    </script>

</body>
</html>
<!-- 
    v-html：文本绑定指令

    作用：用于更新元素的 innerHTML 的指令。

    注意！
            v-html不要使用标签内容的绑定，有安全新问题，它可以识别HTML结构
-->

v-cloak

作用：用于防止在页面加载时,Vue实例还未准备好绑定数据时,出现"闪现"效果，v-cloak指令的元素先隐藏起来,直到实例被创建并初始化数据后才被显示出来，以避免用户看到未编译的Mustache标签， v-clock适用于网速不好的时候加载模板不显示，也就是没渲染之前的模板隐藏起来，待加载后再显示在模板上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'Hello World!'
            }
        })
    </script>

</body>

</html>
<!-- 
    v-cloak

    作用：用于防止在页面加载时,Vue实例还未准备好绑定数据时,出现"闪现"效果

    注意！ v-cloak指令的元素先隐藏起来,直到实例被创建并初始化数据后才被显示出来

    目的：可以避免用户看到未编译的Mustache标签

    v-clock适用于网速不好的时候加载模板不显示，也就是没渲染之前的模板隐藏起来，待加载后再显示在模板上        
-->

v-once

作用：初次动态渲染后就视为静态内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>

<body>

    <div id="root">
        <h2 v-once>初始化的n值是:{{n}}</h2>
        <!-- v-once：初次动态渲染后就视为静态内容了 -->
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                n: 1
            }
        })
    </script>

</body>

</html>
<!-- 
    v-once

    作用：初次动态渲染后就视为静态内容了
-->

v-pre

作用：用于跳过其所在节点的编译过程，可利用它跳过：没有使用指令语、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>

<body>

    <div id="root">
        <h2 v-pre>Vue</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                n: 1
            }
        })
    </script>

</body>

</html>
<!-- 
    v-pre

    作用：
            1.跳过其所在节点的编译过程。
            2.可利用它跳过：没有使用指令语么、没有使用插值语法的节点，会加快编译。
-->