vue.js数据绑定操作详解

自定义排序函数：

<p v-for="item in items | orderBy customOrder">{{item.name}}</p>
methods:{
  customOrder: function(a,b){
    return parseFloat(a.version) > parseFloat(b.version) //对比item中version的值的大小进行排序
  }
}

5.指令

指令的值限定为绑定表达式，即当表达式的值发生改变时，会有些特殊行为作用到绑定的DOM上。

参数：src为参数

<img v-bind:src="avatar" /> <==>  <img src="{{avatar}}" />

修饰符：以半角句号.开始的特殊后缀，用于表示指令应该以特殊方式绑定。

<button v-on:click.stop="doClick"></button> //stop:停止冒泡。相当于调用了e.stopPropagagation().

计算属性

避免在模板中加入过重的业务逻辑，保证模版的结构清晰和可维护性。

1.基础例子

var vm = new Vue({
    el: '#app',
    data: {
      firstName:'Gavin',
      lastName:'CLY'
    },
    computed: {
      fullName:function(){
        //this指向vm实例
        return this.firstName + ' ' + this.lastName;
      }
    }
})

<p>{{ firstName }}</p>  //Gavin
<p>{{ lastName }}</p>  //CLY
<p>{{ fullName }}</p>  //Gavin CLY

注：此时对

vm.firstName

vm.lastName

vm.fullName

2.Setter

更新属性时带来便利

var vm = new Vue({
    el:'#el',
    data:{
      cents:100
    },
    computed:{
      price:{
        set:function(newValue) {
          this.cents = newValue * 100;
        },
        get:function(){
          return (this.cents / 100).toFixed(2);
        }
      }
    }
})

表单控件

v-model：对表单元素进行双向数据绑定，在修改表单元素值时，实例vm中对应的属性值也同时更新，反之亦然。

var vm = new Vue({
    el:'#app',
    data: {
      message: '',
      gender: '',
      cheched: '',
      multiChecked: '',
      a: 'checked',
      b: 'checked'
    }
})

1. Text

输入框示例，用户输入的内容和vm.message直接绑定：