【Vue.js学习笔记】2：从Vue中的插值认识Vue

Vue的上一篇学习已经是上周了，深切感受到了vue-cli和node的复杂，还是先用cdn引入Vue然后好好学一下Vue基础吧。

可以使用runoob上推荐的bootcdn：

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

或者使用官网推荐的cdn：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

声明式渲染和插值

Vue用其模板语法声明式地将数据渲染到HTML的DOM中，插值是其实现数据绑定的方式。

文本插值

一个简单的Vue插值实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>测试Vue</title>
</head>
<body>
<div id="mydiv">
    <!--文本插值-->
    {{ msg }}
</div>
</body>
</html>
<script>
    // 创建一个Vue实例
    var vm = new Vue({
        // el用来绑定要渲染的DOM
        el: '#mydiv',
        // data字典用来向{{ key }}位置插值
        data: {
            msg: '初学Vue.js'
        }
    });
</script>

输出：

初学Vue.js

这时在浏览器控制台输入：

vm.msg='啊啊啊'

则HTML中刚刚插值的部分也自动更新了，这即说明Vue是响应式的。

一次插值

若要一个标签内的插值仅做一次，后续不再改变，需要使用v-once指令。

Vue中的指令均以v-开头

例如：

<div id="mydiv" v-once>
    <!--文本插值-->
    {{ msg }}
</div>

HTML插值

Vue中的插值默认就是文本插值，将以原始文本显示，若插入的是HTML成分，可以使用v-html指令(而不需要Mustache双大括号)：

<div id="mydiv" v-html="msg">
    <!--HTML插值不需要在标签内使用双大括号方式-->
</div>

<script>
    // 创建一个Vue实例
    var vm = new Vue({
        // el用来绑定要渲染的DOM
        el: '#mydiv',
        // data字典用来向{{ key }}位置插值
        data: {
            msg: '<h1>HTML插值</h1>'
        }
    });
</script>

最终结果：
这里写图片描述

标签插值

在HTML标签上不能使用Mustache双大括号插值，需要使用v-bind指令，例如：

<!--在HTML标签里插值-->
<a id="my_a" v-bind:href='ads'>
    {{ msg }}
</a>

<script>
    // 创建一个Vue实例
    var vm = new Vue({
        // el用来绑定要渲染的DOM
        el: '#my_a',
        // data字典用来向{{ key }}位置插值
        data: {
            ads: 'http://www.baidu.com',
            msg: '访问百度'
        }
    });
</script>

标签插值有时会改变原来的使用方式，比如HTML元素的隐藏和显示，原本其布尔特性是只要disabled这样的关键字存在，就认为其为true，如果使用了标签插值：

v-bind:disabled="插值键"

不仅当插值为false，当为null或者undefined时也被视为disabled失效。

在插值中使用表达式

Vue完全基于JS语法，在插值中完全可以使用JS表达式：

<!--在其它形式的插值中使用表达式-->
<a id="my_a" v-bind:href="ok ? ads1 : asd2">
    <!--在Mustache插值中使用表达式-->
    访问{{ ok ? msg1 : msg2}}
</a>

<script>
    // 创建一个Vue实例
    var vm = new Vue({
        // el用来绑定要渲染的DOM
        el: '#my_a',
        // data字典用来向{{ key }}位置插值
        data: {
            ads1: 'http://www.baidu.com',
            msg1: '百度',
            asd2: 'https://blog.csdn.net/SHU15121856',
            msg2: '笔记',
            ok: false
        }
    });
</script>

最终结果：
这里写图片描述