Vue系列之模板语法（三）

前言

      之前的两篇对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 的语句哦~~~

                                                                    觉得本文对你有帮助？请分享给更多人

                                                            关注「前端怪咖」，加入我们，一起提升前端技能