02-Vue插值语法

李先生 2020年12月11日 116次浏览

Vue插值语法

一、Mustache语法

  • Mustache也叫做双大括号语法
  • mustache:胡须的意思,因为两个大括号很像胡须,所以这样命名
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-Mustache语法</title>
</head>
<body>

<div id = "app">
    <h2>{{message}}</h2>
    <h2>{{message}},李银河</h2>
    <!-- mustache语法中,不仅可以直接写变量,也可以写简单的表达式 -->
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + " " + lastName}}</h2>
    <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            message : "你好",
            firstName : "kobe",
            lastName : "bryant",
            counter : 100
        },
    })

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

二、v-once指令的使用

  • 有些场景中,我们需要一个数据只在刚开始的时候渲染一次,然后后面不随着变量值的改变而改变,这时我们就可以通过v-once指令来实现。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02-v-once语法</title>
</head>
<body>

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

   
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            message : "你好",
            
        },
    })

</script>
</body>
</html>
  • 在开发者工具中的控制台输入app.message = "哈哈",可以看到第二行的你好并没有改变

v-html指令的使用

  • 某些情况下,我们从服务器请求到的数据本身就是一个html代码
    • 如果我们使用{{}}来输出,会将html代码一起输出。
    • 但是我们希望的是按照html格式进行解析,并且显示对应的内容。
  • 如果我们希望解析出HTML展示
    • 该指令后面往往会跟上一个string类型
    • 会将string的html解析出来并进行渲染
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03-v-html语法</title>
</head>
<body>

<div id = "app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>

   
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            message : "你好",
            url: '<a href="http://www.baidu.com">百度一下</a>'
        },
    })

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

v-text指令

  • 一般不用 有缺陷 不够灵活
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04-v-text语法</title>
</head>
<body>

<div id = "app">
    <h2>{{message}},李银河</h2>
    <!-- 会覆盖后面的内容,不够灵活,所以一般不用 -->
    <h2 v-text="message">,李银河</h2>

   
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            message : "你好",
            url: '<a href="http://www.baidu.com">百度一下</a>'
        },
    })

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

v-pre指令的使用

  • 将标签内的内容不解析直接输出
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-v-pre</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <!-- 不解析,将内容按照原本的样子输出 -->
        <h2 v-pre>{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message: "你好",
           },
           methods:{}
        });
    </script>
</body>

</html>

v-cloak指令的使用

  • 当网络比较卡的时候,js文件可能没加载出来,就会导致div先渲染出来,然后在加载js,页面就会出现闪动,先显示未处理后的页面,然后再重新渲染,这种用户体验是不好的,可以看一下下面这个页面的效果
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-cloak指令的使用</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        setTimeout(function(){
            const app = new Vue({
                el:'#app',
                data:{
                    message:"你好",
                },
                methods:{}
            });
        },1000)
        
    </script>
</body>

</html>
  • 我们可以通过这个v-cloak指令来解决这种问题
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-cloak指令的使用</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        {{message}}
    </div>
    <script>
        setTimeout(function(){
            const app = new Vue({
                el:'#app',
                data:{
                    message:"你好",
                },
                methods:{}
            });
        },1000)
        
    </script>
</body>

</html>