Vue指令之 ' v-text ' 、 ' v-html ' 和 ' v-cloak '

如何定义一个基本的vue代码结构

// 第一步：引入 Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 第二步：写入html
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
// 创建实例
	var vm = new Vue({
		el: '#app',
		data: {
			msg:"hello world"
		},
		methods:{}
	})
</script>

插值表达式

v-cloak、v-text、v-html

// 使用v-cloak能够解决 差值表达式闪烁的问题
// 默认 v-text 是没有闪烁问题的
// v-text 会覆盖元素中原本的内容，但是 插值表达式，只会替换自己的这个占位符，不会把整个元素的内容清空
<div id="app">
	<p v-cloak> ++++ {{msg}} ---- </p>
	<h4 v-text="msg"> ==== </h4>
	<div v-html="msg2">222</div>
	// 利用Vue.js库中的v-html指令添加html元素
</div>
<script type="text/javascript">
	// 创建实例
	var vm = new Vue({
		el: '#app',
		data: {
			msg:"hello world",
			msg2:'<h1>哈哈，我是一个大大的h1，我大，我骄傲</h1>'
		},
		methods:{}
	})
</script>