什么是模板语法
前面我们已经了解过 HTML 的模板语法，即插值表达式，双大括号的形式。
渲染
文本渲染-响应式
<p>{{ judge }}</p> 复制代码
以上代码中的模板，当 judge 的值发生变化时，模板中的值也会自动刷新，因为 judge 属性在 Vue 中是一个响应式对象。
文本渲染-单次
- 指令：v-once
<p v-once>{{ judge }}</p> 复制代码
以上代码中的，v-once 可以实现一次性的渲染，当数据改变时，插值处的内容不会更新。同时这个节点内的其他数据也不会更新。
单次渲染演示
代码：
<div id="vif"> <button v-on:click="func1">点我</button> <p v-once>{{ judge }}</p> <p v-if="judge">当点击上面的按钮时我会隐藏！</p> <button v-on:click="func2">点击跳转销毁Vue对象</button> </div> 复制代码
页面效果:
网络异常，图片无法展示
|
点击点我，没有 v-once 标记时，true 会变为 false，而 v-once 标记后，true 则不会变化。
网络异常，图片无法展示
|
如上，数据已经隐藏，但是 true 未发生变化。
HTML 渲染
- 指令：
v-html
代码：
<div id="app"> <h1>{{ messages }}</h1> <button v-on:click='sj'>点我查看当前时间</button> </div> 复制代码
HTML 格式的语言按照如上代码渲染时，默认不会处理 HTML 语言，效果如下：
网络异常，图片无法展示
|
修改后的代码：
<div id="app"> <h1><span v-html="messages"></span></h1> <button v-on:click='sj'>点我查看当前时间</button> </div> 复制代码
加了 v-html 指令后的效果：
网络异常，图片无法展示
|
HTML 属性渲染
- 指令：
v-bind:xx
当我们需要在代码运行过程中修改元素属性时，我们可以采用 v-bind 对 HTML 元素属性进行修改。
未绑定元素 ID 前的页面：
网络异常，图片无法展示
|
绑定属性代码（HTML）：
<div id="app"> <h1 v-bind:id="demoId"><span v-html="messages"></span></h1> <button v-on:click='sj'>点我查看当前时间</button> </div> 复制代码
绑定属性代码（JS）：
var app1 = new Vue ( { el: '#app', data: { messages: 'hello Vue!', demoId: 'HId' }, methods:{ sj: function(){ this.messages='当前时间：' + new Date().toLocaleTimeString() } } } ) 复制代码
绑定元素 ID 后的页面：
网络异常，图片无法展示
|
修改 Vue 属性 demoId 值后的页面：
网络异常，图片无法展示
|
网络异常，图片无法展示
|
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
