Vue快速入门(二：数据绑定)《快乐Vue》

数据绑定

数据绑定语法

主要介绍 Vue.js 的数据绑定语法.
使用的是双大括号标签 {{}}，为“Mustache”语法（源自前端模板引擎 Mustache.js）
有文本插值、HTML属性、绑定表达式、过滤器

直接看例子：

    
    





    
    
{{msg1}}
    
    


    
    
{{index + 10}}
    
{{index == 1?true:false}}
    

    
     
{{name | uppercase}}

    

计算属性

Vue.js 还提供了计算属性这种方法，避免在模板中加入过重的业务逻辑，保证模板的结构清晰和可维护性
示例：

    
    





    
{{'fullName is ' + fullName}}

运行效果:

计算属性运行效果.png

此时，对 vm.firstName 或vm.lastName进行修改，会同时修改 fullName 的值。
如果上面这个例子没有体现出计算属性的优势，那计算属性的Setter方法则在更新属性时给我们带来了便利。
示例：

    
    





    
{{'price is ' + price}}

在处理商品价格的时候，后端往往会把价钱定义成以分为单位的整型，避免在处理浮点类型数据时产生的问题。而前端则需要把价钱再转成元进行展示，而且如果需要对价钱进行修改的话，则又要把输入的价格再恢复到分传给后端，很是繁琐。而在使用 Vue.js 的计算属性后，我们可以将 vm.cents 设置为后端所存的数据，计算属
性 price 为前端展示和更新的数据。
此时更改 vm.price = 2，vm.cents 会被更新为 200，在传递给后端时无需再手动转化一遍数据。

调试结果.png

表单控件

Vue.js 中提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新，反之亦然。本小节会介绍主要 input 元素绑定v-model 后的具体用法和处理方式。
示例：

    
    






    
    输入框示例（Text）：

    

    您输入了：{{message}}
    


    
    单选框示例（Radio）：

    男
    女

    当前选中的性别为：{{ gender }}
    


    
    单个勾选框（CheckBox）：

    

    checked: {{ checked }}


    多个勾选框（CheckBox）：

    篮球

    足球

    网球

    multiChecked: {{ multiChecked.join('、') }}
    


    
    单选（Selected）：

    
        A
        B
        C
    

    selected: {{ selected }}
    多选（Selected）按住ctrl多选：

    
        A
        B
        C
    
    multiSelected: {{ multiSelected.join('、') }}
    


    
    CheckBox：

    

    当前value：{{ valuechecked }} 

    Radio： 

    

    当前value：{{ radiochecked }} 

运行效果如下图：

表单控件示例运行效果.png

class绑定style

在开发过程中，我们经常会遇到动态添加类名或直接修改内联样式（例如 tab 切换）。class 和 style 都是 DOM 元素的 attribute，我们当然可以直接使用 v-bind 对这两个属性进行数据绑定。
但这样未免过于繁琐而且容易出错，所以 Vue.js 为这两个属性单独做了增强处理，表达式的结果类型除了字符串之外，还可以是对象和数组。
示例：

    
    







    
    

    
    

    

    
    
内联 对象语法
    
    

        
绑定单个属性或直接使用字符串
    

    

        
数组语法：v-bind:style 允许将多个样式对象绑定到统一元素上
    

运行效果如下：

Class与Style绑定.png