阿菜的Vue学习之旅（三）

1.v-once指令的使用

index.html

 <div id="user">
        <!--当我们使用v-once指令的时候，变量的值就不会被更改-->
        <h3 v-once>姓名：{{name}}</h3> 
        <h3>年龄：{{age}}</h3>
 </div>

 <script src="js/vue.js"></script>
 <script src="js/demo.js"></script>

demo.js

let user = new Vue({
    el: "#user",
    data:{
        name: "武松",
        age: 30
    }
})

运行结果：

2.v-text指令的使用

index.html

 <div class="user">
 		<!--v-text指令和mustache语法的使用效果一样，都能显示数据，而且v-text指令一般是string类型的数据-->
        <!--注意：当我们使用v-text指令时，其是能覆盖html标签内部的其它原有内容的-->
        <h3>大家好，我是人见人爱花见花开车见了会爆胎的{{name}}</h3>
        <h3 v-text="name">大家好，我是人见人爱花见花开车见了会爆胎的</h3>
        <br/>
        <h4>{{hobby}}是我的爱好</h4>
        <h4 v-text="hobby">是我的爱好</h4>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/demo.js"></script>

demo.js

let user = new Vue({
    el: ".user",
    data: {
        name: "齐天大圣孙悟空",
        hobby: "骑筋斗云 耍着如意金箍棒"
    }
})

运行结果：

3.v-html指令的使用

index.html

 <!--v-html指令：能够解析vue中使用html格式的变量-->
    <div class="menu">
        <ul v-html="li01+li02+li03"></ul>
        <br/>
        <ul>{{li01}} {{li02}} {{li03}}</ul>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/demo.js"></script>

demo.js

let menu = new Vue({
    el: '.menu',
    data: {
        li01: '<li><a href="https://www.bilibili.com">哔哩哔哩</a></li>',
        li02: '<li><a href="https://developer.mozilla.org/zh-CN/docs/Web">MDN</a></li>',
        li03: '<li><a href="https://www.csdn.net/">CSDN</a></li>',
    }
})

运行结果：

4.v-pre指令的使用

index.html

  <!-- v-pre指令： 直接显示显示所在html标签里面的内容-->
    <div id="myGirlfriend">
        <p v-html="introduction"></p>
        <p v-pre>{{introduction}}</p>

        <br/>
        <p>{{skill}}</p>
        <p v-pre>{{skill}}</p>
        <p v-pre>skill</p>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/demo.js"></script>

demo.js

let myGirlfriend = new Vue({
    el: '#myGirlfriend',
    data: {
        introduction: '<i><u>当你冲我灿然一笑的时候，时间和我的心跳就在那一刹那都停止了。</u></i>',
        skill: '愤怒时：河东狮吼 + 九阴白骨爪； 开心时：撒娇卖萌 + 小鸟依人'
    }
})

运行结果：

5.v-cloak指令的使用

index.html

  <!-- v-pre指令： 直接显示显示所在html标签里面的内容-->
    <div class="delayShows">
        <h1>姓名： {{name}}</h1>
        <h1 v-cloak>姓名： {{name}}</h1>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/demo.js"></script>

myStyle.css

 [v-cloak]{
            display: none;
        }

demo.js

setTimeout(() => {
    let delayShows = new Vue({
        el: '.delayShows',
        data:{
            name: "张学友"
        }
    })
}, 5000)

运行结果：

刚开始，使用 v-cloak指令制定的样式会被执行。所以这里 p 标签的 css 样式执行，该 p 标签并未显示。

5s过后，vue实例编译结束，就会把 v- cloak 的属性从绑定的 html 元素中删除，因此它的 css 样式将不被执行。所以该 p 标签也就显示出来了。

v-cloak的应用场景：
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

—————————————————————————— —
上一篇
阿菜的Vue学习之旅（二）
下一篇
阿菜的Vue学习之旅（四）