VUE学习十，模板语法，插值
一、文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<div id="app-10"> {{lastname}} </div>
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。如下：
<div id="app-10" v-once> {{lastname}} </div>
// 第一个实例 var myData = { firstname: 'CL', lastname: '张' } // 该对象被加入到一个 Vue 实例中 var vm1 = new Vue({ el: '#app-10', data: myData }) // 一旦设置v-once，这儿的更改不起效果 vm1.lastname = '李';
二、原始HTML：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<!-- 必须使用v-html指令，才能得到想要的效果//--> <div id="app-11"> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> </div>
// 第二个实例 var vm2 = new Vue({ el: '#app-11', data: {rawHtml: '<span style="color:red">红色</span>'} })
三、Attribute：Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
四、使用 JavaScript 表达式
实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。有个限制就是，每个绑定都只能包含单个表达式。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
五、本篇文章全部代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE简单示范</title> <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script> </head> <body> <!--实例一、v-once的使用//--> <div id="app-10" v-once> {{lastname}} <!--实例四、-JavaScript脚本函数 //--> {{firstname.split('').reverse().join('')}} </div> <!-- 实例二，使用v-html指令，才能得到想要的效果//--> <div id="app-11"> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> <!-- 实例三，v-bind指令，绑定true/false//--> <button v-bind:disabled="isButtonDisabled">Button</button> </div> <script> // 实例一 var myData = { firstname: 'CL', lastname: '张' } var vm1 = new Vue({ el: '#app-10', data: myData }) // 一旦设置v-once，这儿的更改不起效果 vm1.lastname = '李'; // 实例二、实例三 var vm2 = new Vue({ el: '#app-11', data: {rawHtml: '<span style="color:red">红色</span>', isButtonDisabled: true} }) </script> </body> </html>
本文参考：
https://cn.vuejs.org/v2/guide/syntax.html
