vue 1 0和vue 2 0的變化和區別

2021-09-24 06:54:03 字數 2515 閱讀 5249

vue 1.0是

我是加粗標籤

複製**

vue 2.0是:必須有根元素,包裹住所有的**
"aaa">

我是加粗標籤

複製**

vue1.0定義元件的方式有:

vue.extend 這種方式,在2.0裡面有,但是有一些改動

vue.component(元件名稱,

methods:{}

template:

});複製**

vue2.0定義元件的方式則更為簡單:

var home=;複製**
對比區域性註冊:

vue 1.0

var child = vue.extend()

var parent = vue.extend(

})複製**

vue 2.0

var child = 

new vue(

})複製**

vue1.0的生命週期為

init                     ->初始化

created ->建立

beforecompile ->編譯之前

compiled ->編譯完成

ready √ -> mounted

beforedestroy ->銷毀之前

destroyed ->已經銷毀複製**

vue2.0的生命週期為(標*的為經常用的)

beforecreate    元件例項剛剛被建立,屬性都沒有

created 例項已經建立完成,屬性已經繫結

beforemount 模板編譯之前

mounted 模板編譯之後,代替之前ready *

beforeupdate 元件更新之前

updated 元件更新完畢 *

beforedestroy 元件銷毀前

destroyed 元件銷毀後複製**

學過vue的同學應該知道vue1.0是不能新增重複資料的,否則它會報錯,想讓它重複新增也不是不可以,不過需要定義別的東西。

而vue2.0預設就支援新增重複資料,而且vue2.0還去掉了$index和$key這兩個東西換成在迴圈裡定義

vue 1.0

v-for="(index,val) in array"

複製**

vue 2.0

v-for="(val,index) in array"  這是vue2.0複製**
vue 1.0 trace-by的方式

"item in items" track-by="$index">複製**
vue 2.0 key的方式

"item in items" :key="item.id">複製**

vue1.0    vue.directive('on').keycodes.f1=17

vue2.0 vue.config.keycodes.ctrl=17複製**

vue2 自定義指令的使用

"box">

type="text" @keyup.ctrl="change">

複製**

vue 1.0 自帶過濾器

}

}....

limitby

filterby

.....複製**

vue 2.0 刪除

定義過濾器的步驟

1.定義過濾器函式

const findbykey = function (key, options) )

return _rs ? _rs.value : key;

}複製**

2.在filters中宣告

new vue(,

methods:

},filters:

})複製**

3.使用

}

複製**

1.0與2.0 過濾器 傳參方式不同

vue 1.0

}

複製**

vue 2.0

}

複製**

vue1 0和vue2 0的區別 一

今天我們來說一說vue1.0和vue2.0的主要變化有哪些 一.在每個元件模板,不在支援片段 vue1.0是 我是加粗標籤 vue2.0 必須有根元素,包裹住所有的 我是加粗標籤 二.關於元件定義 vue1.0定義元件的方式有 vue.extend 這種方式,在2.0裡面有,但是有一些改動 vue....

vue2 0和1 0的區別

1.關於過濾器 2.0移除了自帶過濾器,但是保留了自定義過濾器的功能。以後想用過濾器可以自己定義 定義方法還是跟1.0相同 vue.filter 過濾器名字 fn 呼叫方法有些許差別 之前呼叫 現在呼叫 2.關於迴圈中重複資料的問題 1.0中用到的是 track by index 2.0中用到的是 ...

vue2 0 監聽props vuex變化

首先在想要監聽的元件裡面 利用computed 注意 一定要return 這裡監聽乙個已經存在vuex裡面的liveheader值 computed 首先在想要監聽的元件裡面 利用watch 然後在這個函式裡面做你想要做的邏輯即可 將newvalue 賦值給 本元件的乙個變數liveheader w...