VUE day2 插值表达式（Mustache语法）和v-text v-html的区别

插值表达式（Mustache语法）

插值表达式是vue提供的语法，简单来说就是将变量写在{{ }}之间如：

<h2>{{msg+"哈哈哈"}}</h2>

new Vue({
el:"#app",
data:{
	msg:"js从入门到入土"
	}
})

结果：

js从入门到入土哈哈哈

v-text 指令

v-text也是vue中将数据渲染在标签的一种方式，如：

<div v-text="msg">哈哈哈</div>
new Vue({
el:"#app",
data:{
	msg:"<h1>js从入门到入土</h1>"
	}
})

结果：

<h1>js从入门到入土</h1>

v-html 指令

<div v-html="msg">哈哈哈</div>
new Vue({
el:"#app",
data:{
	msg:"<h1>js从入门到入土</h1>"
	}
})

结果：

js从入门到入土

三者之间的区别：

数据：

new Vue({
el:"#app",
data:{
	msg:"<h1>js从入门到入土</h1>"
	}
})

插值表达式可以实现数据的拼接，如

<h2>{{msg+"哈哈哈"}}</h2>

结果：

js从入门到入土哈哈哈

v-text和v-html会覆盖标签内原有的数据,但是v-text不会解析数据内的HTML元素，会按照字符串原样输出

<div v-text="msg">哈哈哈</div>

结果：

<h1>js从入门到入土</h1>

v-html会解析html元素

<div v-html="msg">哈哈哈</div>

结果：

 js从入门到入土