Vue模板语法

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

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1. 使用v-once 进行一次性插值，后续该vue变量改变，执行一次性dom元素数据不会改变

<div v-once>{{msg}}</div>

2. 使用v-html识别代码片段 innerHTML( {{content}} 无法将字符串中标签解析)

<div v-html="content"></div>

3. 给属性绑定变量 使用v-bind进行绑定 无法使用{{}}

<div v-bind: title="title">我是块级</div>

绑定变量 简写为:

<div :title="title">我是块级</div>

4. 给标签绑定事件 使用v-on：事件类型

<button v-on:click="handler">点击我</button>

给标签绑定事件 可简写为@

<button @click="handler">点击我</button><br>

5. {{js表达式}}

{{Boolean(str)}}

{{str.split(",").reverse()}}

{{str?'string':"null"}}