Vue知识点总结(1)——v-text、v-html（超级详细）

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等实战学习资料