Vue.js 数据绑定与指令详解

<span>Hello　{{ name }}</span>

data:{
    name: 'vue'
}
== > Hello vue

<span v-once="name">{{ name }}</span>

<div v-bind:id="'id-'+id"></div>

<div :id="'id-'+id"></div>

{{ index + 1}}
{{ index == 0 ? 'a' : 'b' }}
{{name.split('').join('|') }}
{{ var a = 1 }} //无效

{{ name | uppercase }} // Vue.js将name的值传入给uppercase这个内置的过滤器中(本质是一个函数)，返回字符串的大写值。
{{ name | filterA | filterB }}  //多个过滤器链式使用
{{ name | filterA arg1 arg2 }} //传入多个参数

{{ name.split('') | limitBy 3 1 }} // ->u,e

{{ amount | currency '￥' 2 }} //若amount值为1000，则输出为￥1,000.00

<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }} </p>

//输出结果：
1item 1st
2items 2nd
3items 3rd
4items 4th

<input v-on:keyup="onKeyup | debounce 500"> //input元素上监听了keyup事件，并且延迟500ms触发

<div v-for="item in items | limitBy 10"></div> //items为数组，且只显示数组中的前十个元素

<p v-for="name in names | filterBy '1.0'">{{ name }}</p> //检索names数组中值包含1.0的元素

<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }}</p> //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name,version],在多个属性中进行检索。

//输出结果
vue1.0
{"name":"vue1.0","version":"1.0"}

<p v-for="item in items | filterBy customFilter"
  methods:{
    cuestomFilter:function(item){
      if(item.name) return true;  //检索所有元素中包含name属性的元素
    }
  }

<p v-for="item in items | orderBy 'name' -1">{{ item.name}}</p> //items数组中以键名name进行降序排列

<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的两个键名进行排序

<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的值的大小进行排序
  }
}

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

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

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

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);
        }
      }
    }
})

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

<input type="text" v-model="message" />
<span>Your input is : {{ message }} </span>

<label><input type="radio" value="male" v-model="gender">男</lable>
<label><input type="radio" value="famale" v-model="gender">女</lable>
<p>{{ gender }}</p> //显示的是value值

<input type="checkbox" v-model="checked" />
<span>checked: {{ checked }} </span> //显示的是true/false

<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="1" v-model="multiChecked">2</label>
<label><input type="checkbox" value="1" v-model="multiChecked">3</label>
<p>MultiChecked:{{ multiChecked.join{'|'} }}</p> //multiChecked:1|2

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

<select v-model="multiSelected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b" />

vm.checked == vm.a  //=> true

vm.checked == vm.b //=>true

<input type="radio" v-model="checked" v-bind:value="a" >

vm.checked == vm.a //=> true

<select v-model="selected">
    <!-- 对象字面量 -->
    <option v-bind:value="{ number:123}">123</option>
</select>

typeof vm.selected //=> object
vm.selected.number //=> 123

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

<input v-model.number="age" type="number">

<input v-model.trim="msg">

<div class="tab" v-bind:class="{'active':active,'unactive':!active}"></div>

data：{
  active:true
}

<div class="tab active"></div>

<div v-bind:class="[classA,classB]"></div>

data:{
  classA:"class-a",
  classB:"class-b"
}

<div class="class-a class-b"></div>

<div v-bind:class="[classA,isB?classB:""]"></div>

vm.isB = false

<div class="class-a"></div>

<div v-bind:style="alertStyle"></div>

data:{
  alertStyle:{
    color: 'red',
    fontSize: '2px'
  }
}

<div v-bind:style="{fontSize:alertStyle.fontSize,color:'red'}"></div>

<div v-bind:style="[ styleObjectA,styleObjectB]" .></div>