Vue作为现在Web前端三大框架之一，异常的火爆，曾被选为GitHub最受欢迎开源项目。
当你学完HTML、CSS、JS的基础知识后，想入手一个前端框架，Vue是最佳的选择，它的门槛没有那么高，普及应用率却很高，成为现在Web前端工程师必会技术栈之一。
这篇博客的学习目标是v-text、v-html指令
v-text
这个指令的作用和插值表达式{
{}}很相似。
先看一段代码：
<div id="app">
<p>{
{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
这是最简单的插值表达式{
{}}的用法。
没有问题，我们通过双括号成功将data的数值展示在了p标签上。
我们再看下面一段代码：
<div id="app">
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
这次我们使用v-text指令，展示message的内容
没有问题，现在看起来，这两种方法似乎一摸一样，但是，如果我们对代码进行一下小小的修改。
<div id="app">
<p>哈哈哈{
{message}}</p>
<p v-text="message">哈哈哈</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
看出区别了吗，嘿嘿~
插值表达式{
{}}只会替代自己那个占位符，不会影响元素其它内容的展示。
但是v-text会完全覆盖元素的原本内容。
这两种方法在实际的开发场景中，都有相应的应用，大家要区分开！
v-html
我们前面已经了解了插值表达式{
{}}和v-text，它们都可以展示出data中相应变量的值，但是如果我们现在拿到的变量的值是一段代码字符串呢？
在曾经前后端不分离的时代，后端经常会给我们返回一些代码字符串，我们经过一些处理后要渲染到页面上。
我们先试一下插值表达式{
{}}和v-text展示代码字符串的样子。
<div id="app">
<p>{
{code}}</p>
<p v-text="code"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
code:'<h3>我是代码，哈哈，你能把我渲染出来吗</h3>'
}
});
</script>
显然，无论是插值表达式{
{}}还是v-text都不能满足我们的需求。
v-html的作用就是来完成这种需求的。
<div id="app">
<p v-html="code"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
code:'<h3>我是代码，哈哈，你能把我渲染出来吗</h3>'
}
});
</script>
很完美。
但是需要提醒的一点是，v-html最好要谨慎使用，如果你的代码考虑的不严谨的话，这样很容易遭到黑客的xss攻击。还有一点就是，v-html和v-text都会完全覆盖元素的原本内容。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
