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: &lt;\'</span>',

                    msgLt: '&lt;',

                    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>