Vue 内置指令

一、v-text指令

1、作用：渲染所在节点的文本内容

2、区别：与插值语法的区别，v-text会替换掉节点的内容，{{xx}}不会

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2>你好，{{name}}</h2>
        <!-- v-text会全部替换节点内容，{{}}不会 -->
        <h2 v-text="name">你好，</h2>
    </div>
</body>
    <script type="text/javascript">
        new Vue({
            el:'#container',
            data:{
                name:'jojo'
            },
        })
    </script>
</html>

二、v-html指令

1、作用：渲染节点所在文本的内容包括html格式

2、区别

　　a、与插值语法，v-html全部替换，插值语法不会

　　b、与v-text区别，v-html会渲染html标签，v-text不会

3、注意：v-html不安全，不能大量使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <div>你好，{{name}}</div>
        <!-- v-text会全部替换节点内容，{{}}不会 -->
        <div v-text="name">你好，</div>
        <!-- v-html 渲染html格式 -->
        <div v-html="name"></div>
    </div>
</body>
    <script type="text/javascript">
        new Vue({
            el:'#container',
            data:{
                name:'<h2>jojo</h2>'
            },
        })
    </script>
</html>

三、v-cloak指令

1、作用：与style格式一起使用，解决网页加载慢出现{{xxx}}的尴尬情况

2、原理：v-colak没有值，当使用vm时，删除容器中的v-cloak属性，可以有css样式配合使用，隐藏html内容

3、结论：当不加载vm时，[v-cloak]属性隐藏标签，当加载vm时，v-cloak属性，从标签中消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-cloak指令</title>
    <!-- v-cloak选择器-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <h2 v-cloak>{{name}}</h2>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
</body>
    <script type="text/javascript">
        new Vue({
            el:'#container',
            data:{
                name:'jojo'
            },
        })
    </script>
</html>

四、v-once指令

1、作用：v-once所在节点在初次动态渲染后，视为静态内容

2、特点：v-once没有值和v-cloak与v-pre一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="container">
        <h2 v-once>显示初始的数据：{{num}}</h2>
        <h2>显示现在的数据：{{num}}</h2>
        <button @click="num++">点击</button>
    </div>

    
</body>
    <script type="text/javascript">
        new Vue({
            el:'#container',
            data:{
                num:1
            },
        })
    </script>
</html>

五、v-pre指令

1、作用：跳过所在节点的编译，可以在没有使用插值语法或指令语法的地方用，加快编译过程

2、特点：v-pre没有值与v-once、v-cloak一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-pre指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="container">
        <!-- v-pre跳过当前节点编译，是插值语法{{}}不编译 -->
        <h2 v-pre>你好，{{name}}</h2>
        <h2 v-pre>Hello</h2>
        <!-- v-pre 跳过当前节点编译，使v-text不编译 -->
        <h2 v-pre v-text="name">123</h2>
    </div>

    
</body>
    <script type="text/javascript">
        new Vue({
            el:'#container',
            data:{
                name:'jojo'
            },
        })
    </script>
</html>

 

 

　　

posted @ 2024-12-31 22:10  市丸银  阅读(18)  评论(0)    收藏  举报