Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）
插值
1、文本插值
（1）双向数据绑定
v-model="msg0101"，一旦v-model中的数值发生变化，所有用vue表达式{{msg0101}}的数据都会更新。
（2）单次插值
v-model="msg0102"，但是：如果我们仅仅需要显示msg0102初始化的值，则用{{#msg0102}}取值，这样，即便model中的数值发生变化，我们这里取出来的还是最原先的值。
（3）html文本的显示与转义
{{}}双大括号默认显示的是在data中定义的字符串，即便是html文本，也会原样输出。
例如，我们在data中定义了msgHtml：'<span style="color:red; ">helloworld</span>'，为了在页面中也显示的是html代码，我们只需要正常取值就ok：{{msgHtml}}
但是，如果我们要将我们的字符串文本在页面显示为正常的文档流，则用三大括号{{{msgHtml}}}输出，页面显示的就是helloworld。span标签已经显示在文档流中了
（4）html特性（双大括号标签也可以用在 HTML 特性 (Attributes) 内）
<ul> <li v-for="item in items"> <span id="item-{{item.itemId}}">当前元素ID：item-{{item.itemId}} 。index:{{$index}}; itemName:{{item.itemName}}; itemDesc:{{item.itemDesc}}</span> </li> </ul>
data:{
items: [{
itemId: "itemId01 ",
itemName: "itemName01 ",
itemDesc: "itemDesc01 "
}, {
itemId: "itemId02 ",
itemName: "itemName02 ",
itemDesc: "itemDesc02 "
}, {
itemId: "itemId03 ",
itemName: "itemName03 ",
itemDesc: "itemDesc03 "
}, ]
}
结果展示：
2、绑定表达式插值
在 Vue.js 中，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。
（1）javascript表达式
二元表达式
在data中定义
data: {
number01: 10,
number02: "10",
}
{{number01+1}}渲染后：11（数值类型二元运算）
{{number02+1}}渲染后：101（数值类型与字符串类型相加，先将数值类型转化为字符串，然后拼接字符串）
三元表达式
data中初始化四个数值
data: {
ok01: true,
ok02: false,
ok03: "hello ",
ok04: "",
}
div中的表达式判断
<p>ok01 is true: {{ok01?"ok01":"cancel01"}}</p>
<p>ok02 is false: {{ok02?"ok02":"cancel02"}}</p>
<p>ok03 is "hello": {{ok03?"ok03":"cancel03"}}</p>
<p>ok04 is "": {{ok04?"ok04":"cancel04"}}</p>
注意：在三元表达式中{{isOk?"yes":"no"}}表达式相当于下面的条件判断
if(isOk){
//如果isOk是string类型，isOk未定义或者isOk是空字符串，则执行return "no"，否则执行return "yes"。
//如果isOk是number类型，isOk未定义或者isOk的值为0，则执行return "no"，否则执行return "yes"。
return "yes";
}else{
return "no";
}
使用js函数
在data中初始化数据msg01
data: {
msg01: "this is message01"
}
在vue绑定的标签中写入
<p>this is message01在表达式中倒序: {{msg01.split("").reverse().join("")}}</p>
结果展示：
this is message01在表达式中倒序: 10egassem si siht
（2）过滤器
官方过滤器API：http://cn.vuejs.org/api/#过滤器
在data中定义数组fItems:
fItems: [{
name: "《精通Spring》",
price: "38.80"
}, {
name: "《精通Hibiernate》",
price: "28.80"
}, {
name: "《精通Jquery》",
price: "25.99"
}, {
name: "《精通Vue》",
price: "18.88"
}]
在vue绑定的标签内引用过滤器（lowercase：将所有字母变为小写，currency：指定货币符号）
<ul> <li v-for="item in fItems"> name: {{item.name|lowercase }}; price:{{item.price|currency "$"}} </li> </ul>
结果展示：
完整html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title>数据绑定</title> </head> <body> <h2>插值</h2> <div id='dr01'> <h4>#文本</h4> <h5>双向数据绑定</h5> <input v-model='msg0101' type='text' placeholder='双向数据绑定' /> <p>{{msg0101}}</p> <h5>单次插值</h5> <input v-model='msg0102' type='text' placeholder='单次插值' /> <p>{{*msg0102}}</p> <hr /> <h4>#原始html文本：</h4> <p>双大括号: {{msgHtml}}</p><span>msg是什么就输出什么，不会转义</span> <p>三大括号: {{{msgHtml}}}</p><span>msg会发生转义"<"输出"<"，"{{msgLt}}"输出"<"</span> <hr /> <h4>#html特性（Mustache 标签也可以用在 HTML 特性 (Attributes) 内：）</h4> <ul> <li v-for="item in items"> <span id="item-{{item.itemId}}">当前元素ID：item-{{item.itemId}} 。index:{{$index}}; itemName:{{item.itemName}}; itemDesc:{{item.itemDesc}}</span> </li> </ul> </div> <hr /> <div id="dr02"> <h4>#绑定表达式</h4> <div> <h5>JavaScript表达式</h5> <div> <p>10+1: {{number01+1}}</p> <p>"10"+1: {{number02+1}}</p> </div> <div> <p>ok01 is true: {{ok01?"ok01":"cancel01"}}</p> <p>ok02 is false: {{ok02?"ok02":"cancel02"}}</p> <p>ok03 is "hello": {{ok03?"ok03":"cancel03"}}</p> <p>ok04 is "": {{ok04?"ok04":"cancel04"}}</p> </div> <div> <p>this is message01在表达式中倒序: {{msg01.split("").reverse().join("")}}</p> </div> <!-- 在Vue实例的作用域内，每个绑定只能包含单个表达式，下面是错误示例，暂时注释掉 --> <!--<div>--> <!-- 这是一个语句，不是一个表达式： --> <!--<span>{{var error01="this is error"}}</span>--> <!--</div>--> <!--<div>--> <!-- 流程控制也不可以，可改用三元表达式 --> <!--<span>{{if(error02){return message}}}</span>--> <!--</div>--> </div> <hr /> <h4>过滤器</h4> <div> <div> 示例01：{{{fMsg01}}} <p> message是表达式，capitalize是过滤器 </p> </div> <div> 示例02：{{{fMsg02}}} <p> 过滤器可以串联 </p> </div> <div> 示例03：{{{fMsg02}}} <p> 过滤器可以接受参数，过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。这里，字符串 'arg1' 将传给过滤器作为第二个参数，表达式 arg2 的值在计算出来之后作为第三个参数。 </p> </div> <div> <p>过滤器使用</p> <ul> <li v-for="item in fItems"> name: {{item.name|lowercase }}; price:{{item.price|currency "$"}} </li> </ul> </div> </div> </div> <script> var dr01 = new Vue({ el: '#dr01', data: { msg0101: 'this is msg0101', msg0102: 'this is msg0102', msgHtml: '<span style="color:red;">\'this is less: <\'</span>', msgLt: '<', items: [{ itemId: "itemId01", itemName: "itemName01", itemDesc: "itemDesc01" }, { itemId: "itemId02", itemName: "itemName02", itemDesc: "itemDesc02" }, { itemId: "itemId03", itemName: "itemName03", itemDesc: "itemDesc03" }, ] } }); var dr02 = new Vue({ el: "#dr02", data: { number01: 10, number02: "10", ok01: true, ok02: false, ok03: "hello", ok04: "", msg01: "this is message01", error01: "this is error01", error02: true, fMsg01: "{{ message | capitalize }}", fMsg02: "{{ message | filterA | filterB }}", fMsg02: "{{ message | filterA 'arg1' arg2 }}", fItems: [{ name: "《精通Spring》", price: "38.80" }, { name: "《精通Hibiernate》", price: "28.80" }, { name: "《精通Jquery》", price: "25.99" }, { name: "《精通Vue》", price: "18.88" }] }, }); </script> </body> </html>
