<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這個(gè)內(nèi)置的過濾器中(本質(zhì)是一個(gè)函數(shù))，返回字符串的大寫值。
{{ name | filterA | filterB }}  //多個(gè)過濾器鏈?zhǔn)绞褂?
{{ name | filterA arg1 arg2 }} //傳入多個(gè)參數(shù)

{{ 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>

//輸出結(jié)果：
1item 1st
2items 2nd
3items 3rd
4items 4th

<input v-on:keyup="onKeyup | debounce 500"> //input元素上監(jiān)聽了keyup事件，并且延遲500ms觸發(fā)

<div v-for="item in items | limitBy 10"></div> //items為數(shù)組，且只顯示數(shù)組中的前十個(gè)元素

<p v-for="name in names | filterBy '1.0'">{{ name }}</p> //檢索names數(shù)組中值包含1.0的元素

<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }}</p> //檢索items中元素屬性name值為1.0的元素輸出。檢索區(qū)域也可以為數(shù)組，即in [name,version],在多個(gè)屬性中進(jìn)行檢索。

//輸出結(jié)果
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數(shù)組中以鍵名name進(jìn)行降序排列

<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的兩個(gè)鍵名進(jìn)行排序

<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的值的大小進(jìn)行排序
  }
}

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

<button v-on:click.stop="doClick"></button> //stop:停止冒泡。相當(dāng)于調(diào)用了e.stopPropagagation().

var vm = new Vue({
    el: '#app',
    data: {
      firstName:'Gavin',
      lastName:'CLY'
    },
    computed: {
      fullName:function(){
        //this指向vm實(shí)例
        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>