vue總結(jié)

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é)點操作

image.png

常用內(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 }

image.png

vue 動畫的理解


image.png

生命周期實例
首先創(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/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末骇两,一起剝皮案震驚了整個濱河市速种,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌低千,老刑警劉巖配阵,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異示血,居然都是意外死亡棋傍,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門难审,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘫拣,“玉大人,你說我怎么就攤上這事告喊◆镏簦” “怎么了派昧?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長感帅。 經(jīng)常有香客問我斗锭,道長,這世上最難降的妖魔是什么失球? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任岖是,我火速辦了婚禮,結(jié)果婚禮上实苞,老公的妹妹穿的比我還像新娘豺撑。我一直安慰自己,他們只是感情好黔牵,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布聪轿。 她就那樣靜靜地躺著,像睡著了一般猾浦。 火紅的嫁衣襯著肌膚如雪陆错。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天金赦,我揣著相機與錄音音瓷,去河邊找鬼。 笑死夹抗,一個胖子當著我的面吹牛绳慎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漠烧,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼杏愤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了已脓?” 一聲冷哼從身側(cè)響起珊楼,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎度液,沒想到半個月后亥曹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡恨诱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了骗炉。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片照宝。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖句葵,靈堂內(nèi)的尸體忽然破棺而出厕鹃,到底是詐尸還是另有隱情兢仰,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布剂碴,位于F島的核電站把将,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏忆矛。R本人自食惡果不足惜察蹲,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望催训。 院中可真熱鬧洽议,春花似錦、人聲如沸漫拭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽采驻。三九已至审胚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間礼旅,已是汗流浹背膳叨。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留各淀,地道東北人懒鉴。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像碎浇,于是被迫代替她去往敵國和親临谱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容

  • vue概述 在官方文檔中奴璃,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,216評論 0 25
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,209評論 0 6
  • 組件(Component)是Vue.js最核心的功能悉默,也是整個架構(gòu)設計最精彩的地方,當然也是最難掌握的苟穆。...
    六個周閱讀 5,614評論 0 32
  • 應用復雜度VS框架復雜度 漸進式框架 1抄课、聲明式渲染Declarative Rendering2、組件系統(tǒng)Comp...
    zwb_jianshu閱讀 797評論 0 0
  • 應用復雜度VS框架復雜度 漸進式框架 1雳旅、聲明式渲染Declarative Rendering2跟磨、組件系統(tǒng)Comp...
    木子川頁心閱讀 1,569評論 1 27