01 Vue的插值操作

最新推荐文章于 2022-07-27 08:57:09 发布

口口

最新推荐文章于 2022-07-27 08:57:09 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_45595211/article/details/105519619

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、Mustache语法（又称双大括号语法）

示例：

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}}</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:'hellow VUE',
            firstName:'kobe',
            lastName:'bryae',
            counter:100
        }
    })
</script>

在这里插入图片描述

二、v-once的使用

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过。

<div id="app">
    {{message}}
    <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hellow VUE'
        }
    })
</script>

当你手动改 message 的值时就会发现它只会渲染一次

在这里插入图片描述

三、v-html的使用

如果后端返回包含了标签的内容，可以使用 V-html转化为html页面的形式展示

<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:'hellow VUE',
            url:'<a href="http://www.baidui.com">百度一下</a>'
        }
    })
</script>

在这里插入图片描述

四、v-text 的使用

使用Mustache语法（也就是双大括号{{}}）可以很方便的让我们将数据源对象的属性渲染到Vue的DOM元素中。但其也有一定的弊端，比如让你的网速慢，或者数据加载失败的时候会在浏览器中直接渲染插值，比如{{message}}。或者说，当你的JavaScript报错，或者你的用户禁用页面所有JavaScript时，也会有类似现象
在这里插入图片描述在这种情况之下，对用户的体验并不好，因为我们的用户并不知道{{xxx}}表示的是什么？在Vue中，除了使用{{}}这样的插值语法渲染数据之外，还提供了一个v-text指令

<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:'hellow VUE'
        }
    })
</script>

在这里插入图片描述

五、v-pre的使用

跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
< h2 v-pre>{{message}}< /h2 >即使data里面定义了message这里仍然是显示的{{message}}

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hellow VUE'
        }
    })
</script>

在这里插入图片描述

六、v-clock的使用

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。也就是说在vue解析之前，div中有一个属性v-cloak 解析之后v-cloak会被移除。

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

解析之前：
在这里插入图片描述解析之后：