vue1.0和vue2.0區別（一）

vue1.0和vue2.0區別（二）

綁定一次

{{*msg}}
<div v-once>{{msg}}</div>

vue2.0已廢棄 請使用v-once

綁定html代碼

{{{msg}}}
<div v-html="msg"></div>
{{{msg}}}寫法vue2.0已廢棄,請使用v-html

循環v-for

數組

• 1.0默認經過value進行遍歷(key,value),遍歷需加track-by="$index"(不加劇複數據不綁定)

• 2.0經過key進行遍歷(value,key)

data:{
  arr:['蘋果','橘子','香蕉']
}
<ul>
  <li v-for="value in arr">
      {{value}} {{$index}}
  </li>
</ul>

{{{$index}}}寫法vue2.0已廢棄

對象

data:{
    json:{name:'zfpx'}
}
<li v-for="value in json" >
    {{value}}
</li>

{{$key}}和{{$index}}vue2.0已廢棄
對象數組均可以進行解構賦值

v-for = '(val,index) in arr'
// 2.0 必須進行定義，否則會報錯

事件v-on

<button v-on:click="addFruit($event)">按鈕</button>
<ul>
    <li v-for="value in json" >
       {{value}}
    </li>
</ul>
var vue = new Vue({
    el:'#box',
    data:{
        json:['香蕉','蘋果','橘子']
    },
    methods:{
        addFruit(event){
            this.json.push('蘋果');
        }
    }
});

• v-on:click簡寫@click 2.0支持

• 執行方法時加上()事件源默認不傳遞，須要手動傳入$event

• methods中的this永遠指向Vue的實例

顯示/隱藏

• v-show 若是爲false時經過css樣式將元素隱藏 (display:none/block)

<div v-show='false'></div>

• v-if 若是爲false時移除DOM節點(removeChild)

<div v-if='false'></div>