二、插值操作

01、Mustache

简单说即 “双括号” 语法，不仅仅可以直接写变量，也可以写一些简单的表达式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <script src="../Js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h2> {{message}}</h2>
            <h2> {{message}}，李银河 </h2>
            
            <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
            <h2> {{ firstName + " " + lastName }} </h2>
            <h2> {{ counter*2 }} </h2>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊",
                    firstName:"kobe",
                    lastName:"bryant",
                    counter: 100
                },
                
            });
        </script>
    </body>
</html>

02、v-once 语法

当执行第一次时进入响应式处理，并且只渲染一次，不会随着数据的更改而改变
 <div id="app">
            <h2> {{message}}</h2>

            <!--当执行第一次时 进入响应式处理，只渲染一次，不会随着数据的更改而改变-->
            <h2 v-once> {{message}}</h2>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊",
                },
            });
        </script>

03、v-html 语法

当执行的语句是  一个dom标签，并且需要按照基本的html的dom展示效果展示时，

<div id="app">
            <!--v-html语法-->
            <h2 v-html="url"></h2>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊",
                    url:'<a href="http://www.baidu.com">百度一下</a>',
                },
            });
        </script>

04、 v-text 语法

执行的返回结果为string语句时，但建议使用Mustache语法编写

<!--只接受string类型-->
        <div id="app">
            <h2> {{message}} ,李银河 </h2>

              <!--此标签中的 ，李银河 会由于渲染的原因，将对此值进行替换，
                  最后显示的结果是  你好啊-->
            <h2 v-text="message">，李银河</h2>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊"
                }
            });
        </script>

05、 v-pre 语法

不对html的dom元素进行任何的渲染，显示的结果为dom元素中的 所写的内容

<div id="app">
            <h2> {{ message }} </h2>

            <!-- v-pre 不对标签进行任何渲染-->
            <h2 v-pre> {{ message }} </h2>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊"
                }
            });
        </script>

06、 v-cloak 语法

在某些情况下，我们浏览器可能会直接显示出未编译成功的Mustrache标签

//在下面的示例中，将设置效果为没有渲染完成，则不进行dom元素中内容的最终显示‘

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <script src="../Js/vue.min.js"></script>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h2> {{ message }} </h2>
        </div>
        <script>
            //在vue解析之前，div中有一个属性v-cloak
            //在vue解析之后，div中没有一个属性v-cloak
            setTimeout(function() {
                const app = new Vue({
                    el:"#app",
                    data:{
                        message:"你好啊"
                    }
                });
            }, 1000);

        </script>
    </body>
</html>

 

posted @ 2022-03-28 15:07  搬砖工具人  阅读(39)  评论(0)    收藏  举报