vue学习记录-02 插值操作

vue学习记录-02 插值操作

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、Mustache语法

双大括号的语法就是Mustache语法，代码如下：

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

mustache语法中不仅仅可以直接写变量，也可以写简单的表达式

<div id='app'>
        <h2>{{message}}</h2>
        <h2>{{message}},Aaron</h2>
        <h2>{{firstName+lastName}}</h2>
        <h2>{{firstName+' '+lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{counter*2}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                firstName:'koke',
                lastName:'mark',
                counter:100
            },
        })

Mustache会被替换为data里面对应的值，同时，如果对应的值改变了，Mustache插值也会更新。

二、v-once指令

在某些情况下，我们可能不需要界面数据随意的跟随改变，例如希望提高性能等，这个时候可以使用v-once指令。

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

• 该指令后面不需要跟任何表达式
• 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
• 即使重新渲染，该指令下的节点也将被视为静态内容被跳过

改变message之前：

通过控制台改变一下message的数据：

此时我们发现设置了v-once的message没有被重新渲染：

三、v-html指令

有时候我们可能需要将data数据当作HTML内容进行更新，如果直接在Mustache中使用只能展示出整段字符串，但是如果使用了v-html指令之后，我们就可以将其当作一段正常的HTML代码进行渲染。

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

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

效果如下：

需要注意的是，VUE不推荐我们直接使用v-html渲染HTML代码，同时对其进行css的应用也会出现一定的问题，详见原文：

• 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

• 在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 < style > 元素手动设置类似 BEM 的作用域策略。

四、v-text指令

如果我们想要更换的内容不仅仅只是Mustache 里面的内容，而是将元素内的文本内容全部替换掉呢？这个时候我们可以使用v-text指令。

<div id='app'>
        <h2>{{message}}我叫{{name}}</h2>
        <h2 v-text='message'>我叫{{name}}</h2>
</div>

const app = new Vue({
            el: '#app',
            data: {
                name:"Aaron",
                message: 'Hello,Vue!'
            },
        })

效果如下，可以看到直接在元素内使用Mustache 并不能将元素内原有内容给替换掉：

• 同样的，使用v-text也不能输出HTML，想要使用HTML渲染页面还是需要使用v-html
• 一般来说我们也很少会使用v-text进行文本渲染，因为v-text很不灵活

五、v-pre指令

{{XXX}}这种写法我们可能不希望他被当作Mustache 表达式，那么我们可以使用v-pre告诉VUE这只是一段普通的文本内容，这样VUE就会跳过这个元素内的编译。

<div id='app'>
 		<!-- 希望被vue解析的内容 -->
        <h2>{{message}}</h2>
        <!-- 不希望被vue解析的内容 -->
        <h2 v-pre>{{message}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!'
            },
        })

效果如下：

六、v-cloak指令

这个指令在VUE实例编译完之前都会存在，什么意思呢？我们使用settimeout来延迟一下VUE的编译看看实际效果。
代码：

<div id='app'>
        <h2 v-cloak>{{message}}</h2>
</div>

setTimeout(function(){
            const app = new Vue({
                el: '#app',
                    data: {
                        message: 'Hello,Vue!'
                    },
            })
        },5000)

在五秒定时结束之前，h2标签内还是有v-cloak指令的：

但是五秒结束后，VUE开始编译后，可以看到v-cloak指令消失了：

也就是说，v-cloak只存在于打开页面到VUE编译完成的这段时间之内，什么情况下我们会需要在这段时间内做事呢？

看到这个Mustache 语法了吗？

我们都知道Mustache 是用来帮助插值的，但是用户不一定知道，甚至可能还会觉得这网站怎么到处都是乱码，太丑了。
既然这个语法用户觉太丑了那我们就不给用户看就好了，所以我们可以给v-cloak加个display：none的样式，让dispaly跟v-cloak一样只存在于VUE编译完成之前。

[v-cloak] {
            display: none;
        }

这样这段代码里面的东西在VUE编译完之前都会隐藏起来，对比一下效果如下：

VUE编译完成之前:

VUE编译完成之后: