《Vue.js前端開(kāi)發(fā)實(shí)戰(zhàn)》課后習(xí)題答案

本答案僅供參考，禁止用于抄襲等不法用途

Vue（讀音/Vju?/，類似于View）是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，與其他大型框架相比，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。其他大型框架往往一開(kāi)始就對(duì)項(xiàng)目的技術(shù)方案進(jìn)行強(qiáng)制性的要求，而Vue更加靈活，開(kāi)發(fā)者既可以選擇使用Vue來(lái)開(kāi)發(fā)一個(gè)全新項(xiàng)目，也可以將Vue引入到一個(gè)現(xiàn)有的項(xiàng)目中。

輕量級(jí): Vue相對(duì)簡(jiǎn)單、直接，所以Vue使用起來(lái)更加友好。

數(shù)據(jù)綁定: Vue是一個(gè)MVVM框架，即數(shù)據(jù)雙向綁定。

指令: 指令主要包括內(nèi)置指令和自定義指令，以“v-”開(kāi)頭，作用于HTML元素。

插件: 插件用于對(duì)Vue框架功能進(jìn)行擴(kuò)展，通過(guò)MyPlugin.install完成插件的編寫(xiě)，簡(jiǎn)單配置后就可以全局使用。

{{login}}

1）. 打開(kāi)git-bash命令行工具

2）. 安裝Node環(huán)境

3）. 打開(kāi)解壓好的vue-devtools-5.1.1文件，執(zhí)行命令如下

npm install

npm run build

4）. 打開(kāi)Chrome瀏覽器，添加vue-devtools調(diào)試工具

5）. 安裝腳手架工具： npm install [email protected] –g

6）. 安裝webpack打包工具： npm install [email protected] –g

7）. 構(gòu)建項(xiàng)目：vue init webpack app

Ω

在Vue項(xiàng)目中，每個(gè)Vue應(yīng)用都是通過(guò)Vue構(gòu)造器創(chuàng)建新的Vue實(shí)例開(kāi)始的。

通過(guò)new關(guān)鍵字的方式創(chuàng)建vm實(shí)例對(duì)象。

創(chuàng)建方式：

編寫(xiě)JavaScript代碼：

編寫(xiě)JavaScript代碼：

Ω

Vue.use主要用于在Vue中安裝插件，通過(guò)插件可以為Vue添加全局功能。插件可以是一個(gè)對(duì)象或函數(shù)，如果是對(duì)象，必須提供install()方法，用來(lái)安裝插件；如果插件是一個(gè)函數(shù)，則該函數(shù)將被當(dāng)成install()方法。

1）. Vue.directive():Vue中有很多內(nèi)置指令，如v-model、v-for和v-bind等

2）. Vue.use():Vue.use主要用于在Vue中安裝插件，通過(guò)插件可以為Vue添加全局功能

3）. Vue.extend():Vue.extend用于基于Vue構(gòu)造器創(chuàng)建一個(gè)Vue子類，可以對(duì)Vue構(gòu)造器進(jìn)行擴(kuò)展

4）. Vue.set():Vue的核心具有一套響應(yīng)式系統(tǒng)，簡(jiǎn)單來(lái)說(shuō)就是通過(guò)監(jiān)聽(tīng)器監(jiān)聽(tīng)數(shù)據(jù)層的數(shù)據(jù)變化，當(dāng)數(shù)據(jù)改變后，通知視圖也自動(dòng)更新

5）. Vue.mixin():Vue.mixin用于全局注冊(cè)一個(gè)混入，它將影響之后創(chuàng)建的每個(gè)Vue實(shí)例

1）. vm. p r o p s : 使 用 v m . props: 使用vm. props:使用vm.props屬性可以接收上級(jí)組件向下傳遞的數(shù)據(jù)

2）. vm. o p t i o n s : V u e 實(shí) 例 初 始 化 時(shí) ， 除 了 傳 入 指 定 的 選 項(xiàng) 外 ， 還 可 以 傳 入 自 定 義 選 項(xiàng) 3 ） . v m . options: Vue實(shí)例初始化時(shí)，除了傳入指定的選項(xiàng)外，還可以傳入自定義選項(xiàng) 3）. vm. options:Vue實(shí)例初始化時(shí)，除了傳入指定的選項(xiàng)外，還可以傳入自定義選項(xiàng)3）.vm.el: vm. e l 用 來(lái) 訪 問(wèn) v m 實(shí) 例 使 用 的 根 D O M 元 素 4 ） . v m . el用來(lái)訪問(wèn)vm實(shí)例使用的根DOM元素 4）. vm. el用來(lái)訪問(wèn)vm實(shí)例使用的根DOM元素4）.vm.children: vm. c h i l d r e n 用 來(lái) 獲 取 當(dāng) 前 實(shí) 例 的 直 接 子 組 件 5 ） . v m . children用來(lái)獲取當(dāng)前實(shí)例的直接子組件 5）. vm. children用來(lái)獲取當(dāng)前實(shí)例的直接子組件5）.vm.root: vm. r o o t 用 來(lái) 獲 取 當(dāng) 前 組 件 樹(shù) 的 根 V u e 實(shí) 例 ， 如 果 當(dāng) 前 實(shí) 例 沒(méi) 有 父 實(shí) 例 ， 則 獲 取 到 的 是 該 實(shí) 例 本 身 6 ） . v m . root用來(lái)獲取當(dāng)前組件樹(shù)的根Vue實(shí)例，如果當(dāng)前實(shí)例沒(méi)有父實(shí)例，則獲取到的是該實(shí)例本身 6）. vm. root用來(lái)獲取當(dāng)前組件樹(shù)的根Vue實(shí)例，如果當(dāng)前實(shí)例沒(méi)有父實(shí)例，則獲取到的是該實(shí)例本身6）.vm.slots:插槽就是定義在組件內(nèi)部的template模板，可以通過(guò) s l o t s 動(dòng) 態(tài) 獲 取 7 ） . v m . slots動(dòng)態(tài)獲取 7）. vm. slots動(dòng)態(tài)獲取7）.vm.attrs: vm.$attrs可以獲取組件的屬性，但其獲取的屬性中不包含class、style以及被聲明為props的屬性

編寫(xiě)頁(yè)面結(jié)構(gòu)：

編寫(xiě)JavaScript代碼：

編寫(xiě)JavaScript代碼：

Ω

入場(chǎng)鉤子分別是beforeEnter（入場(chǎng)前）、enter（入場(chǎng)）、afterEnter（入場(chǎng)后）和enterCancelled（取消入場(chǎng)）

出場(chǎng)鉤子分別是beforeLeave（出場(chǎng)前）、leave（出場(chǎng)）、afterLeave（出場(chǎng)后）和leaveCancelled（取消出場(chǎng)）

@before-enter=“beforeEnter”

@enter=“enter”

@after-enter=“afterEnter”

@enter-cancelled=“enterCancelled”

@before-leave=“beforeLeave”

@leave=“l(fā)eave”

@after-leave=“afterLeave”

@leave-cancelled=“l(fā)eaveCancelled”

v-bind:css=“false”> // Vue會(huì)跳過(guò)CSS的檢測(cè)

進(jìn)入（enter）：

v-enter: 在元素被插入之前生效，在元素被插入之后的下一幀移除

v-enter-active: 在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡動(dòng)畫(huà)完成之后移除

v-enter-to: 在元素被插入之后下一幀生效（與此同時(shí)v-enter被移除），在過(guò)渡動(dòng)畫(huà)完成之后移除

離開(kāi)（leave）：

v-leave：在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除

v-leave-active：在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡完成之后移除

v-leave-to：在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效（與此同時(shí)v-leave被移除），在過(guò)渡動(dòng)畫(huà)完成之后移除

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

注意：自定義類名的優(yōu)先級(jí)高于普通類名

css代碼如下: