【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插值实例：
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<title>测试Vuetitle>
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">
div><script>
// 创建一个Vue实例
var vm = new Vue({
// el用来绑定要渲染的DOM
el: '#mydiv',
// data字典用来向{{ key }}位置插值
data: {
msg: 'HTML插值
'
}
});
script>最终结果：
标签插值
在HTML标签上不能使用Mustache双大括号插值，需要使用v-bind指令，例如：
<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">
访问{{ 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>最终结果：
