文本指令
基本概念：
<!-- 插值表达式 -->
<p>{{ msg }}</p>
<p>{{ msg+'优秀' }}</p>
<!-- 把文本内容渲染到标签里，原文本会被msg替换 -->
<p v-text='msg'>原文本</p>
<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>
<!-- v-once控制的标签只能被赋值一次 -->
<p v-once>{{ msg }}</p>
详细代码：
<!--测试点击@click="changeMsg" 观察once的效果 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!--1、插值表达式：在内部直接写变量或变量表达式-->
<p>{{ msg + '_喜欢篮球 rap 唱 跳' }}</p>
<p>{{ (num + 1 - 3) / 2 }}</p>
<!--2、v-text v-html v-once 三个文本指令 -->
<!--v-text:纯文本-->
<p v-text="msg"></p>
<!--v-html:可以解析标签-->
<p v-html="'<b>加粗文本</b>'"></p>
<p v-html="htmlMSG" @click="changeMsg"></p>
<!--v-once:插值表达式渲染文本，once来限制文本不可修改-->
<!--限制的是这个标签，差值表达式渲染出了初始值后就不会再做任何变化-->
<p v-once>{{ htmlMSG + msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
num: 10,
htmlMSG: '<b>加粗文本</b>'
},
methods: {
changeMsg: function () {
this.htmlMSG = '<i>加粗文本</i>';
this.msg = '11111111111111';
}
}
})
</script>
</html>
