Vue学习(2)：胡子({{}})语法开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

一，插值操作

这种语法叫做 `Mustache` 语法

中文叫做胡子的意思，两个 {{}} 长的比较像胡子，所以这样命名了

<body>
    <div id="app">
        <p>{{ message }}</p>					<!-- 直接在模板里面写 --> 
        <p>{{ message + ' ' + message }}</p>	 <!-- 进行字符串的 + 操作 --> 
        <p>{{ (num+10) * 2 }}</p>				<!-- 数字相乘 --> 
        <p>{{ message }} {{ message }}</p>		<!-- 两个插值 --> 
    </div>
    <script src="VueJs/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                num: 0
            }
        })
    </script>
</body>

涉及插值操作的指令

v-once

我们知道，在Vue里面，所有的数据都是响应式的，我们不想让某些数据发生改变，就需要用到这个指令

添加该属性的DOM元素，该DOM元素内的**{{}}里面的值不会发生改变**

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

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>

在这里插入图片描述

v-html

有时候服务器给我们返回的不是数据二十一串html的字符串，我们想把他转换成DOM元素放到页面中

<div id="app">
    <h2>{{ message1 }}</h2>		<!-- 显示错误 -->
    <h2 v-html="message2"></h2>	<!-- 显示成功 -->
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message1: '<a href="https://www.baidu.com">百度</a>',
            message2: '<a href="https://www.baidu.com">百度</a>',
        }
    })
</script>

在这里插入图片描述

v-text

把文本数据覆盖到DOM元素中，如果原先要填充的DOM元素中有另外的文本也会被覆盖

v-pre

不对 {{}} 里面的值进行解析，数据原封不动展现出来

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

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
        }
    })
</script>

在这里插入图片描述

v-cloak

有些情况下，浏览器可能还没有解析出我们编写的 ViewModel ，页面会直接显示处未渲染的 {{ data }}

在这里插入图片描述

使用该指令可以解决问题

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h2 v-cloak>{{ message }}</h2>		<!-- 等到数据渲染之后，v-vloak这个属性会消失 -->
</div>

<script>
    setTimeout(function() {
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
        })
        }, 1000)
</script>

在这里插入图片描述

Vue学习(2)：胡子({{}})语法

一，插值操作

这种语法叫做 Mustache 语法

涉及插值操作的指令

这种语法叫做 `Mustache` 语法