前言
之前的两篇对vue做了整体和基础的介绍,今天主要讲解一下vue的基础语法之一——HTML模板。Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据,将模板编译成虚拟 DOM 渲染函数。结合响应系统,智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
正文
1. 显示文本
数据绑定最常见的就是使用双大括号的方式(“Mustache”语法),将括号里面的值解释为纯文本显示在页面上,形式如下:
<div> Message: {{ htmlData }} </div>
显示如下:
Message: 看到我啦!
数据htmlData
作为插值,插在html当中,作为数据展示。当htmlData
的值进行变化时,插值处的值就会动态的做出改变。
当然啦,要是想仅仅执行一次插值,可以使用v-once指令。即当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:
<div v-once>这个将不会改变: {{ htmlData }}</div>
2. 显示html
有的时候我们并不仅仅展示文本内容,可能我们还想展示原生html。这个时候就不能使用双大括号的形式,而需要使用v-html指令。code如下:
<div>展示文本: {{ showHtml }} </div>
<div>展示HTML: <span v-html="showHtml"></span></div>
显示如下:
展示文本: <span style='color: red'>hello world</span>
展示HTML:hello world
注意 : 请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值,以防止导致 XSS 攻击
3. 属性
对于标签上的一些动态属性可以使用指令v-bind
进行绑定,code如下:
<div v-bind:id="testId"></div>
v-bind
指令也可以简化为:
,code如下:
<div :id="testId"></div>
4. js表达式
之前说的都是普通文本的绑定显示,但有时候也会遇到一些数据依据实际情况作出计算。vue.js提供了完全的js表达式支持。举个栗子:
# 简单的加减乘除 {{ num + 1 }} # 三目运算 {{ yesOrNo ? 'yes' : 'no' }} # 数组操作 {{ arr.split('') }} # 属性值的拼接 <div :id = "'textId-' + id"></div>
注意:支持 js 表达式,不是 js 的语句哦~~~
觉得本文对你有帮助?请分享给更多人
关注「前端怪咖」,加入我们,一起提升前端技能