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都会完全覆盖元素的原本内容。