Vue 2.0学习笔记:v-text和v-html

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量,你也可以不用模板,直接写渲染函数render,使用可选的JSX语法。

插值

大家在前面的教程中可能看到了我们使用{{}}的形式来渲染文本。这种形式就是Mustache语法。

<h1>Name: {{ name }}</h1>

Mustache标签将会被替代为对应数据对象上name属性的值,无论何时,绑定的数据对象上name属性发生了改变,插值片的内容都会更新。比如:

v-text and v-html

通过使用v-once指令(我们后面会学习这个指令),你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心,这会影响到该节点上所有的数据绑定:

<h1 v-once>Name: {{ name }} (绑定v-once不会改变name)</h1>

v-text and v-html

使用Mustache语法(也就是双大括号{{}})可以很方便的让我们将数据源对象的属性渲染到Vue的DOM元素中。但其也有一定的弊端,比如让你的网速慢,或者数据加载失败的时候会在浏览器中直接渲染插值,比如{{name}}。或者说,当你的JavaScript报错,或者你的用户禁用页面所有JavaScript时,也会有类似现象:

v-text and v-html

在这种情况之下,对用户的体验并不好,因为我们的用户并不知道{{xxx}}表示的是什么?不过,值得庆幸的是,在Vue中,除了使用{{}}这样的插值语法渲染数据之外,还提供了两个相关的指令,也就是我们今天需要学习的v-textv-html。在学习这两个指令之前,咱位回忆一下JavaScript中相关的几个知识。

JavaScript相关知识点

在JavaScript中有textContentinnerHTMLinnerTextouterTextouterHTMLnodeValue。这些属性都可以用来获取某个元素的内容,也可以将内容或标签插入到某个元素中。看上去和渲染内容有点相关。

简单的理解一下这几个属性:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-text-and-v-html.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部