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

Steven發表於2017-06-12
Vue

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>

相關文章