vue總結(jié)

Vue 的特點(diǎn)
1)遵循 MVVM 模式

2)編碼簡潔, 體積小, 運(yùn)行效率高, 適合移動/PC 端開發(fā)

3)它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫
開發(fā)項(xiàng)目
use strict的作用
必須使用var聲明變量
禁止自定義的函數(shù)中的this指向Window
創(chuàng)建eval作用域
對象不能有重名的屬性。

箭頭函數(shù)的this特點(diǎn)?
箭頭函數(shù)沒有自己的this,函數(shù)箭頭的this不是調(diào)用的時(shí)候決定的,而是在定義的時(shí)候所處的對象就是它的this.

promise的三個(gè)狀態(tài)
pending初始狀態(tài)
fullfilled成功狀態(tài),需要調(diào)用resolve方法
rejected失敗狀態(tài),需要調(diào)用reject方法

論述class關(guān)鍵字的作用?
通過class定義類,實(shí)現(xiàn)類的繼承
在類中通過constructor定義構(gòu)造方法
new來創(chuàng)建類的實(shí)例
extends來實(shí)現(xiàn)類的繼承
super調(diào)用父類的構(gòu)造方法
重寫從父類中繼承的一般方法

mvv框架是什么,它和其他框架(jquery)的區(qū)別是什么,那些場合適合?

一個(gè)model+view+viewModel框架,數(shù)據(jù)模型model和視圖view是由viewModel連接起來的,vm層專門負(fù)責(zé)dom監(jiān)聽和數(shù)據(jù)綁定。
區(qū)別:vue是數(shù)據(jù)驅(qū)動,通過數(shù)據(jù)顯示視圖層而不是節(jié)點(diǎn)操作

image.png

常用內(nèi)置指令
1)v-text : 更新元素的 textContent

2)v-html : 更新元素的 innerHTML

3)v-if : 如果為 true, 當(dāng)前標(biāo)簽才會輸出到頁面

4)v-else: 如果為 false, 當(dāng)前標(biāo)簽才會輸出到頁面

5)v-show : 通過控制 display 樣式來控制顯示/隱藏

6)v-for : 遍歷數(shù)組/對象

7)v-on : 綁定事件監(jiān)聽, 一般簡寫為@

8)v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind 簡寫為:

9)v-model : 雙向數(shù)據(jù)綁定

10)ref : 指定唯一標(biāo)識, vue 對象通過$refs 屬性訪問這個(gè)元素對象

11)v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }

image.png

vue 動畫的理解


image.png

生命周期實(shí)例
首先創(chuàng)建一個(gè)實(shí)例new Vue();

然后是beforeCreate(){}

在beforeCreated階段,vue實(shí)例的掛載元素$el和數(shù)據(jù)對象data都為undefined,還未初始化。

created(){}

在created階段,vue實(shí)例的數(shù)據(jù)對象data有了,$el還沒有。

beforeMount(){}

在beforeMount階段,vue實(shí)例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點(diǎn),data.message還未替換。

mounted(){}

在mounted階段,vue實(shí)例掛載完成,data.message成功渲染。

beforeUpdate(){},updated(){}

更新前/后:當(dāng)data變化時(shí),會觸發(fā)beforeUpdate和updated方法。

這個(gè)時(shí)候如果數(shù)據(jù)是多個(gè)的話,建議用nextTick(()=>{})來逐個(gè)根據(jù)數(shù)據(jù)變化來更新dom。如果用updated的話,多個(gè)數(shù)值變化可能導(dǎo)致死循環(huán)。

beforeDestroy(){},destroyed(){}

在執(zhí)行destroy方法后,對data的改變不會再觸發(fā)周期函數(shù),說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定,但是dom結(jié)構(gòu)依然存在。

axios的使用
請求后臺資源,使用npm install axios --save命令安裝好,
js中使用時(shí)先導(dǎo)入import ,然后調(diào)用.get或post發(fā)送請求,如果成功返回在.then函數(shù)中,失敗在。catch函數(shù)中

vue-router是什么,有什么組件?
時(shí)vue用來寫路由的一個(gè)插件
組件router-link相當(dāng)于超鏈接,to屬性相當(dāng)于href屬性,最終會被解釋為超連接。
router-view用于加載路由對應(yīng)的組件,顯示模板內(nèi)容

父組件如何傳遞子組件?
父組件使用子組件標(biāo)簽時(shí),通過綁定自定義屬性傳值<my-component:xxx='" xxx></my-omponent>
在子組件內(nèi)聲明props來接收。

子組件如何傳遞父組件?
可以利用vue的自定義事件來傳遞數(shù)據(jù),首先在父組件使用子組件標(biāo)簽時(shí),綁定xxx事件,并傳遞數(shù)據(jù)data。
this.$emit(xxx,data)

創(chuàng)建 vue 項(xiàng)目
vue -V 顯示版本2時(shí)

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/

vue -V 顯示版本3時(shí)

npm install -g @vue/cli
vue create vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,593評論 0 25
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,361評論 0 6
  • 組件(Component)是Vue.js最核心的功能,也是整個(gè)架構(gòu)設(shè)計(jì)最精彩的地方,當(dāng)然也是最難掌握的。...
    六個(gè)周閱讀 5,759評論 0 32
  • 應(yīng)用復(fù)雜度VS框架復(fù)雜度 漸進(jìn)式框架 1、聲明式渲染Declarative Rendering2、組件系統(tǒng)Comp...
    zwb_jianshu閱讀 808評論 0 0
  • 應(yīng)用復(fù)雜度VS框架復(fù)雜度 漸進(jìn)式框架 1、聲明式渲染Declarative Rendering2、組件系統(tǒng)Comp...
    木子川頁心閱讀 1,635評論 1 27

友情鏈接更多精彩內(nèi)容