Vue 的特點
1)遵循 MVVM 模式
2)編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發(fā)
3)它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫
開發(fā)項目
use strict的作用
必須使用var聲明變量
禁止自定義的函數(shù)中的this指向Window
創(chuàng)建eval作用域
對象不能有重名的屬性卓囚。
箭頭函數(shù)的this特點辫秧?
箭頭函數(shù)沒有自己的this,函數(shù)箭頭的this不是調(diào)用的時候決定的恳不,而是在定義的時候所處的對象就是它的this.
promise的三個狀態(tài)
pending初始狀態(tài)
fullfilled成功狀態(tài)希坚,需要調(diào)用resolve方法
rejected失敗狀態(tài)械念,需要調(diào)用reject方法
論述class關(guān)鍵字的作用?
通過class定義類虚青,實現(xiàn)類的繼承
在類中通過constructor定義構(gòu)造方法
new來創(chuàng)建類的實例
extends來實現(xiàn)類的繼承
super調(diào)用父類的構(gòu)造方法
重寫從父類中繼承的一般方法
mvv框架是什么菱涤,它和其他框架(jquery)的區(qū)別是什么苞也,那些場合適合?
一個model+view+viewModel框架粘秆,數(shù)據(jù)模型model和視圖view是由viewModel連接起來的如迟,vm層專門負責dom監(jiān)聽和數(shù)據(jù)綁定。
區(qū)別:vue是數(shù)據(jù)驅(qū)動翻擒,通過數(shù)據(jù)顯示視圖層而不是節(jié)點操作
常用內(nèi)置指令
1)v-text : 更新元素的 textContent
2)v-html : 更新元素的 innerHTML
3)v-if : 如果為 true, 當前標簽才會輸出到頁面
4)v-else: 如果為 false, 當前標簽才會輸出到頁面
5)v-show : 通過控制 display 樣式來控制顯示/隱藏
6)v-for : 遍歷數(shù)組/對象
7)v-on : 綁定事件監(jiān)聽, 一般簡寫為@
8)v-bind : 強制綁定解析表達式, 可以省略 v-bind 簡寫為:
9)v-model : 雙向數(shù)據(jù)綁定
10)ref : 指定唯一標識, vue 對象通過$refs 屬性訪問這個元素對象
11)v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
vue 動畫的理解
生命周期實例
首先創(chuàng)建一個實例new Vue();
然后是beforeCreate(){}
在beforeCreated階段,vue實例的掛載元素$el和數(shù)據(jù)對象data都為undefined氓涣,還未初始化。
created(){}
在created階段陋气,vue實例的數(shù)據(jù)對象data有了,$el還沒有引润。
beforeMount(){}
在beforeMount階段巩趁,vue實例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點淳附,data.message還未替換议慰。
mounted(){}
在mounted階段,vue實例掛載完成奴曙,data.message成功渲染别凹。
beforeUpdate(){},updated(){}
更新前/后:當data變化時,會觸發(fā)beforeUpdate和updated方法洽糟。
這個時候如果數(shù)據(jù)是多個的話炉菲,建議用nextTick(()=>{})來逐個根據(jù)數(shù)據(jù)變化來更新dom堕战。如果用updated的話,多個數(shù)值變化可能導致死循環(huán)拍霜。
beforeDestroy(){},destroyed(){}
在執(zhí)行destroy方法后嘱丢,對data的改變不會再觸發(fā)周期函數(shù),說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定祠饺,但是dom結(jié)構(gòu)依然存在越驻。
axios的使用
請求后臺資源,使用npm install axios --save命令安裝好道偷,
js中使用時先導入import 缀旁,然后調(diào)用.get或post發(fā)送請求,如果成功返回在.then函數(shù)中勺鸦,失敗在并巍。catch函數(shù)中
vue-router是什么,有什么組件?
時vue用來寫路由的一個插件
組件router-link相當于超鏈接祝旷,to屬性相當于href屬性履澳,最終會被解釋為超連接。
router-view用于加載路由對應的組件怀跛,顯示模板內(nèi)容
父組件如何傳遞子組件距贷?
父組件使用子組件標簽時,通過綁定自定義屬性傳值<my-component:xxx='" xxx></my-omponent>
在子組件內(nèi)聲明props來接收吻谋。
子組件如何傳遞父組件忠蝗?
可以利用vue的自定義事件來傳遞數(shù)據(jù),首先在父組件使用子組件標簽時漓拾,綁定xxx事件阁最,并傳遞數(shù)據(jù)data。
this.$emit(xxx,data)
創(chuàng)建 vue 項目
vue -V 顯示版本2時
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/
vue -V 顯示版本3時
npm install -g @vue/cli
vue create vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/