1. Vue基礎(chǔ)入門

一、填空題

Vue是一套構(gòu)建__用戶界面_____的漸進(jìn)式框架。

MVVM主要包含3個(gè)部分，分別是Model、View和____ViewModel___。

Vue中通過(guò)___refs____屬性獲取相應(yīng)DOM元素。

在進(jìn)行Vue調(diào)試時(shí)，通常使用___vue-devtools___工具來(lái)完成項(xiàng)目開(kāi)發(fā)。

Vue中頁(yè)面結(jié)構(gòu)以___組件?___形式存在。

二、判斷題

Vue與Angular和React框架不同的是，Vue設(shè)計(jì)為自下而上逐層應(yīng)用。（T?）

Vue完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。（T?）?

Vue是一套構(gòu)建用戶界面的漸進(jìn)式框架，Vue的核心只關(guān)注視圖層。（T?）?

Vue中MVVM框架主要包含3部分組成：Model、View和ViewModle。（?T）

Vue可以在Node環(huán)境下進(jìn)行開(kāi)發(fā)，并借助npm包管理器來(lái)安裝依賴。（T?）

三、選擇題

1. 下列關(guān)于Vue說(shuō)法錯(cuò)誤的是（D?）。?

A.Vue與Angular都可以用來(lái)創(chuàng)建復(fù)雜的前端項(xiàng)目

B.Vue優(yōu)勢(shì)主要包括輕量級(jí)、雙向數(shù)據(jù)綁定

C.Vue在進(jìn)行實(shí)例化之前，應(yīng)確保已經(jīng)引入了核心文件vue.js

D.Vue與React語(yǔ)法是完全相同的

1. 下列關(guān)于Vue的優(yōu)勢(shì)的說(shuō)法錯(cuò)誤的是（C?）。

A.雙向數(shù)據(jù)綁定

B.輕量級(jí)框架

C.增加代碼的耦合度

D.實(shí)現(xiàn)組件化

1. 下列不屬于Vue開(kāi)發(fā)所需工具的是（D ）。?

A.Chrome瀏覽器

B.VS Code編輯器

C.vue-devtools

D.微信開(kāi)發(fā)者工具

1. npm包管理器是基于（A?）平臺(tái)使用的。

A.Node.js

B.Vue

C.Babel

D.Angular

1. 下列選項(xiàng)中，用來(lái)安裝vue模塊的正確命令是（A?）。?

A.npm install vue

B.node.js install vue

C.node install vue

D.npm I?vue

四、簡(jiǎn)答題

請(qǐng)簡(jiǎn)述什么是Vue。

請(qǐng)簡(jiǎn)述Vue優(yōu)勢(shì)有那些。

請(qǐng)簡(jiǎn)單介紹Vue、React之間的區(qū)別。

五、編程題

請(qǐng)使用Vue.js動(dòng)手創(chuàng)建一個(gè)登錄頁(yè)面。

請(qǐng)手動(dòng)配置Vue.js開(kāi)發(fā)環(huán)境。

1. Vue開(kāi)發(fā)基礎(chǔ)（上）

一、填空題

1. Vue實(shí)例對(duì)象通過(guò)___new____方式來(lái)創(chuàng)建。
2. Vue初始數(shù)據(jù)在實(shí)例對(duì)象的___data____參數(shù)中進(jìn)行定義。
3. Vue實(shí)例對(duì)象中el參數(shù)表示___唯一根標(biāo)簽?____。
4. Vue中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的指令是___v-model____。
5. Vue事件綁定指令是___v-on____。

二、判斷題

1. 在項(xiàng)目中引入了vue.js文件，才可以創(chuàng)建Vue實(shí)例。（T?）
2. Vue實(shí)例對(duì)象指令主要包括自定義指令和內(nèi)置指令，通過(guò)指令省去DOM操作。（?T）?
3. 事件傳遞方式有冒泡和捕獲，默認(rèn)是冒泡。（T?）?
4. Vue開(kāi)發(fā)提出了組件化開(kāi)發(fā)思想，每個(gè)組件都是一個(gè)孤立的單元。（T?）?
5. 在Vue中beforeDestroy與destroyed生命周期函數(shù)執(zhí)行后，都可以獲取到Vue實(shí)例。（T?）

三、選擇題

1. 下列關(guān)于Vue實(shí)例對(duì)象說(shuō)法不正確的是（D?）。?

A.Vue實(shí)例對(duì)象是通過(guò)new Vue({})方式創(chuàng)建的

B.Vue實(shí)例對(duì)象只允許有唯一的一個(gè)根標(biāo)簽

C.通過(guò)methods參數(shù)可以定義事件處理函數(shù)

D.Vue實(shí)例對(duì)象中data數(shù)據(jù)不具有響應(yīng)特性

1. Vue實(shí)例對(duì)象中能夠監(jiān)聽(tīng)狀態(tài)變化的參數(shù)是（A?）。

A.watch

B.filters

C.watching

D.components

1. Vue中實(shí)現(xiàn)數(shù)據(jù)雙向綁定的是（C?）。?

l A.v-bind

l B.v-for

l C.v-model

l D.v-if

1. 在Vue中，能夠?qū)崿F(xiàn)頁(yè)面單擊事件綁定的代碼是（B?）。

A.v-on:enter

B.v-on:click

C.v-on:mouseenter

D.v-on:doubleclick

1. 下面列出的鉤子函數(shù)會(huì)在Vue實(shí)例銷毀完成時(shí)執(zhí)行的是（?B）。?

A.updated

B.destroyed

C.created

D.mounted

四、簡(jiǎn)答題

1. 請(qǐng)簡(jiǎn)述什么是Vue實(shí)例對(duì)象。
2. 請(qǐng)簡(jiǎn)述什么是Vue組件化開(kāi)發(fā)。
3. 請(qǐng)簡(jiǎn)單介紹Vue數(shù)據(jù)綁定內(nèi)置指令主要內(nèi)容有哪些。

五、編程題

1. 請(qǐng)實(shí)現(xiàn)一個(gè)比較兩個(gè)數(shù)字大小的頁(yè)面。
2. 請(qǐng)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)計(jì)算器。

1. Vue開(kāi)發(fā)基礎(chǔ)（下）

一、填空題

1. Vue實(shí)例對(duì)象通過(guò)___vm.$root____方式來(lái)獲取。
2. Vue初始數(shù)據(jù)通過(guò)___vm.$data___方式獲取。
3. Vue中通過(guò)___vm.$children____獲取當(dāng)前實(shí)例的子組件。
4. Vue中創(chuàng)建插件提供的方法是___install____。
5. Vue中通過(guò)___Vue.directive()____創(chuàng)建自定義指令。

二、判斷題

1. Vue提供的全局API接口component()，不能用來(lái)注冊(cè)組件。（F?）

Vue 提供的全局 API 接口 component() 是用于注冊(cè)組件的。

1. Vue中Vue.config對(duì)象用來(lái)實(shí)現(xiàn)Vue全局配置。（T?）?
2. Vue中data選項(xiàng)中的數(shù)據(jù)具有響應(yīng)特性。（T?）?
3. Vue中，可以通過(guò)vm.$slots獲取子組件實(shí)例對(duì)象。（F?）

在 Vue 中，vm.$slots 并不是用來(lái)獲取子組件實(shí)例對(duì)象的。vm.$slots 是一個(gè)對(duì)象，用于訪問(wèn)父組件傳遞給子組件的插槽內(nèi)容。?

1. Vue實(shí)例對(duì)象中通過(guò)$options可以獲取到父作用域下的所有屬性。（?F）

$options 屬性是一個(gè)對(duì)象，包含了 Vue 實(shí)例的初始化選項(xiàng)。它是在創(chuàng)建 Vue 實(shí)例時(shí)從組件選項(xiàng)中生成的，并且包含了組件的數(shù)據(jù)、計(jì)算屬性、方法等。但是它并不包含父作用域中的屬性。

要訪問(wèn)父作用域中的屬性，可以使用 Vue 提供的 props 選項(xiàng)來(lái)聲明父組件向子組件傳遞的屬性，然后在子組件內(nèi)部使用 this.$props 來(lái)訪問(wèn)這些屬性。

三、選擇題

1. 下列關(guān)于Vue實(shí)例對(duì)象接口說(shuō)法，錯(cuò)誤的是（D ）。?

A.Vue實(shí)例對(duì)象提供了實(shí)例可操作方法

B.Vue實(shí)例對(duì)象$data數(shù)據(jù)可以由實(shí)例vm委托代理

C.通過(guò)Vue實(shí)例對(duì)象可以進(jìn)行Vue全局配置?

D.Vue實(shí)例對(duì)象接口同樣可以通過(guò)Vue方式調(diào)用

Vue 實(shí)例對(duì)象并沒(méi)有 "接口" 這個(gè)特定的概念。

1. 下面關(guān)于Vue全局配置說(shuō)法，錯(cuò)誤的是（CD ）。

A.Vue.config.devtools可以設(shè)置devtools調(diào)試工具的啟用和關(guān)閉

B.Vue.config是一個(gè)對(duì)象，包含Vue的全局配置

C.Vue.component()可以獲取Vue全局配置對(duì)象

Vue.component() 是用于注冊(cè)全局組件的方法，但它并不是通過(guò) Vue 的全局配置對(duì)象調(diào)用的。實(shí)際上，Vue 的全局配置對(duì)象是通過(guò) Vue.config 來(lái)訪問(wèn)的，它包含了一些全局配置選項(xiàng)，如 silent、optionMergeStrategies 等。

D.Vue.set.config可以獲取到全局配置對(duì)象

1. 下列不屬于Vue實(shí)例對(duì)象屬性的是（B?）。?

l A.$data?

l B.$component

l C.$props

l D.$root

解釋：

A. $data：Vue 實(shí)例對(duì)象的 $data 屬性用于訪問(wèn)實(shí)例的數(shù)據(jù)對(duì)象。

B. $component：在 Vue 實(shí)例對(duì)象中，并沒(méi)有 $component 這個(gè)屬性。

C. $props：Vue 實(shí)例對(duì)象的 $props 屬性用于訪問(wèn)父組件傳遞給子組件的屬性。

D. $root：Vue 實(shí)例對(duì)象的 $root 屬性用于訪問(wèn)根組件實(shí)例。

1. Vue實(shí)例對(duì)象獲取子組件實(shí)例對(duì)象的方式是（B?）。

A.$parent

B.$children

C.$child

D.$component

1. 下面對(duì)于Vue.mixin的說(shuō)法，錯(cuò)誤的是（D?）。?

A.Vue.mixin是Vue提供的全局接口API

B.?Vue.mixin可以用來(lái)注入組件選項(xiàng)

C.使用Vue.mixin可能會(huì)影響到所有Vue實(shí)例

D.?Vue.mixin不可以用來(lái)注入自定義選項(xiàng)的處理邏輯

D. 錯(cuò)誤。Vue.mixin 可以用來(lái)注入自定義選項(xiàng)的處理邏輯。你可以在混入對(duì)象中定義自己的選項(xiàng)和邏輯，然后通過(guò) Vue.mixin 將它們注入到組件中。

四、簡(jiǎn)答題

1. 請(qǐng)簡(jiǎn)述什么是Vue插件。
2. 請(qǐng)簡(jiǎn)述Vue全局API接口主要內(nèi)容。
3. 請(qǐng)簡(jiǎn)單介紹Vue實(shí)例對(duì)象屬性和方法。

五、編程題

1. 請(qǐng)使用插槽vm.$slots動(dòng)手實(shí)現(xiàn)一個(gè)導(dǎo)航欄結(jié)構(gòu)。
2. 請(qǐng)創(chuàng)建一個(gè)自定義插件，實(shí)現(xiàn)一個(gè)登錄頁(yè)面。

1. Vue過(guò)渡和動(dòng)畫

一、填空題

1. Vue提供了內(nèi)置的過(guò)渡封裝組件是???transition?????。
2. 在過(guò)渡封裝組件中使用????name?????屬性可以重置過(guò)渡中切換類名的前綴。
3. 通過(guò)????appear?????特性設(shè)置節(jié)點(diǎn)在初始渲染的過(guò)渡。
4. 在離開(kāi)的過(guò)渡中有???v-leave?????、????v-leave-to????、????v-leave-active????3個(gè)class切換。
5. ????自定義過(guò)渡????的類名優(yōu)先級(jí)要高于普通的類名。

二、判斷題

1. 函數(shù)式組件中的render()函數(shù)用來(lái)創(chuàng)建組件模板。（T）
2. 給過(guò)渡元素添加v-bind:css="true"，Vue會(huì)跳過(guò)CSS的檢測(cè)。（F）

Vue 中，v-bind:css?或簡(jiǎn)寫形式 :css 并不是用來(lái)跳過(guò) CSS 檢測(cè)的選項(xiàng)。

實(shí)際上，Vue 的過(guò)渡系統(tǒng)通過(guò)添加 CSS 類名來(lái)觸發(fā)過(guò)渡效果。當(dāng)元素進(jìn)入或離開(kāi)過(guò)渡時(shí)，Vue 會(huì)根據(jù)添加或移除的 CSS 類名來(lái)應(yīng)用相應(yīng)的過(guò)渡效果。

1. 在@before-enter階段可以設(shè)置元素開(kāi)始動(dòng)畫之前的起始樣式。（T）
2. 在使用animate.css庫(kù)時(shí)，基本的class樣式名是animate。（F）
3. enter和leave動(dòng)畫鉤子函數(shù)，除el參數(shù)外還會(huì)傳入一個(gè)done作為參數(shù)。（T）

三、選擇題

1. 下列選項(xiàng)中關(guān)于動(dòng)畫鉤子函數(shù)說(shuō)法正確的是（C）。?

A.?@leave-cancelled函數(shù)只能用于v-if中

B.?對(duì)于@enter來(lái)說(shuō)，當(dāng)與CSS結(jié)合使用時(shí)，回調(diào)函數(shù)done是必選的

C.?done作為參數(shù)，作用就是告知Vue動(dòng)畫結(jié)束

D. 鉤子函數(shù)需要結(jié)合CSS transitions或animations 使用，不能單獨(dú)使用

A. @leave-cancelled 函數(shù)不僅可以在 v-if 中使用，也可以在其他支持動(dòng)畫的地方使用，例如 v-show、transition 組件等。

B. 對(duì)于 @enter 鉤子函數(shù)，在與 CSS 結(jié)合使用時(shí)，回調(diào)函數(shù) done 是可選的。done 函數(shù)用于通知 Vue 動(dòng)畫進(jìn)入階段已完成，如果沒(méi)有提供 done 函數(shù)，Vue 會(huì)根據(jù)過(guò)渡的 CSS 動(dòng)畫或過(guò)渡的持續(xù)時(shí)間自動(dòng)完成過(guò)渡。

C. 正確。done 函數(shù)作為參數(shù)傳遞給動(dòng)畫鉤子函數(shù)，用于告知 Vue 動(dòng)畫已經(jīng)結(jié)束。通過(guò)調(diào)用 done 函數(shù)，可以在動(dòng)畫完成后執(zhí)行其他操作或處理邏輯。

D. 錯(cuò)誤。動(dòng)畫鉤子函數(shù)可以與 CSS transitions 或 animations 結(jié)合使用，但并不是必須的。你可以使用動(dòng)畫鉤子函數(shù)來(lái)執(zhí)行自定義的過(guò)渡邏輯，不依賴于 CSS transitions 或 animations。

1. 下列關(guān)于Vue為<transition>標(biāo)簽提供的過(guò)渡類名的說(shuō)法，錯(cuò)誤的是（D）。

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

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

C.?v-enter-active可以控制進(jìn)入過(guò)渡的不同的緩和曲線

D.?如果name屬性為my-name，那么my-就是在過(guò)渡中切換的類名的前綴

1. 下列選項(xiàng)中關(guān)于多個(gè)元素過(guò)渡的說(shuō)法，錯(cuò)誤的是（D）。?

l A.?當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過(guò)key特性設(shè)置唯一的值來(lái)標(biāo)記以讓Vue區(qū)分它們

l B.?不相同元素之間可以使用v-if和v-else來(lái)進(jìn)行過(guò)渡

l C.?<transition>組件的默認(rèn)行為指定進(jìn)入和離開(kāi)同時(shí)發(fā)生

l D.?不可以給同一個(gè)元素的key特性設(shè)置不同的狀態(tài)來(lái)代替v-if和v-else

四、簡(jiǎn)答題

1. 請(qǐng)簡(jiǎn)述JavaScript鉤子函數(shù)包括哪些。
2. 請(qǐng)簡(jiǎn)述6個(gè)內(nèi)置的過(guò)渡類名。
3. 請(qǐng)簡(jiǎn)述自定義過(guò)渡類名的屬性有哪些。

五、編程題

1. 編寫一個(gè)登錄頁(yè)面，使用Tab欄實(shí)現(xiàn)“賬號(hào)登錄”和“二維碼登錄”這兩種方式的切換，并通過(guò)transition組件結(jié)合animate.css實(shí)現(xiàn)切換時(shí)的動(dòng)畫效果。
2. 實(shí)現(xiàn)單擊一個(gè)按鈕后，切換盒子的展開(kāi)和收起狀態(tài)。

1. Vue路由

一、填空題

1. 在項(xiàng)目中可以通過(guò)npm命令????npm install vue-router?????安裝路由vue-router。
2. 使用???路由對(duì)象????獲取當(dāng)前激活的路由的狀態(tài)信息。
3. 通過(guò)一個(gè)名稱來(lái)標(biāo)識(shí)一個(gè)路由的方式叫作???命名路由???。
4. 在業(yè)務(wù)邏輯代碼中實(shí)現(xiàn)導(dǎo)航跳轉(zhuǎn)的方式稱為????編程式導(dǎo)航?????。
5. 單頁(yè)面應(yīng)用主要通過(guò)URL中的???hash(#)????實(shí)現(xiàn)不同組件之間的切換。

二、判斷題

1. 后端路由通過(guò)用戶請(qǐng)求的URL導(dǎo)航到具體的html頁(yè)面。（T）
2. 開(kāi)發(fā)環(huán)境下，使用import VueRouter from 'vueRouter'來(lái)導(dǎo)入路由。（F）?

import VueRouter from 'vue-router';

1. 嵌套路由的使用，主要是由頁(yè)面結(jié)構(gòu)來(lái)決定的。（T）?
2. params方式傳參類似于GET請(qǐng)求。（F）?

params 方式傳參是在路由中傳遞參數(shù)的一種方式，但它并不類似于 GET 請(qǐng)求。

在 Vue Router 中，我們可以通過(guò)路由的 params 字段來(lái)傳遞參數(shù)。這種方式將參數(shù)直接包含在 URL 中

1. 在單頁(yè)面應(yīng)用中更新視圖可以不用重新請(qǐng)求頁(yè)面。（T）

三、選擇題

1. 下列vue-router插件的安裝命令，正確的是（A）。?

A. npm install vue-router

B. node install vue-router

C. npm Install vueRouter

D. npm I vue-router

1. 下列關(guān)于query方式傳參的說(shuō)法，正確的是（C）。

A. query方式傳遞的參數(shù)會(huì)在地址欄展示

B.?在頁(yè)面跳轉(zhuǎn)的時(shí)候，不能在地址欄看到請(qǐng)求參數(shù)

C. 在目標(biāo)頁(yè)面中使用“this.?route.query.參數(shù)名”來(lái)獲取參數(shù)

D.?在目標(biāo)頁(yè)面中使用“this.$route.params.參數(shù)名”來(lái)獲取參數(shù)

1. 下列關(guān)于params方式傳參的說(shuō)法，錯(cuò)誤的是（C）。?

l A. 在目標(biāo)頁(yè)面中也可以使用“$route.params.參數(shù)名”來(lái)獲取參數(shù)

l B. 在頁(yè)面跳轉(zhuǎn)的時(shí)候，不能在地址欄看到請(qǐng)求參數(shù)

l C.?params方式傳遞的參數(shù)會(huì)在地址欄展示

l D.?在目標(biāo)頁(yè)面中使用“this.$route.params.參數(shù)名”來(lái)獲取參數(shù)

關(guān)于 query 方式傳參：

A. 正確。query 方式傳遞的參數(shù)會(huì)在地址欄展示，參數(shù)會(huì)以鍵值對(duì)的形式追加在 URL 的查詢字符串中，例如：/target-page?param1=value1?m2=value2。

B. 正確。在頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄中看到請(qǐng)求參數(shù)，因?yàn)閰?shù)會(huì)以查詢字符串的形式顯示在 URL 中。

C. 錯(cuò)誤。在目標(biāo)頁(yè)面中獲取 query 參數(shù)的正確方式是使用 $route.query.參數(shù)名，而不是 this.route.query.參數(shù)名。正確的使用方式應(yīng)該是 this.$route.query.參數(shù)名。

D. 錯(cuò)誤。this.$route.params.參數(shù)名 是用于獲取路由參數(shù)（params）的方式，而不是獲取 query 參數(shù)。

關(guān)于 params 方式傳參：

A. 正確。在目標(biāo)頁(yè)面中也可以使用 $route.params.參數(shù)名 來(lái)獲取路由參數(shù)。

B. 正確。在頁(yè)面跳轉(zhuǎn)的時(shí)候，不能在地址欄中看到 params 參數(shù)，因?yàn)樗鼈儾粫?huì)顯示在 URL 中。

C. 錯(cuò)誤。params 方式傳遞的參數(shù)不會(huì)在地址欄展示，不會(huì)直接顯示在 URL 中。

D. 正確。在目標(biāo)頁(yè)面中使用 this.$route.params.參數(shù)名 來(lái)獲取路由參數(shù)是正確的用法。

總結(jié)：

query 方式傳參會(huì)在地址欄展示參數(shù)，使用 $route.query.參數(shù)名 來(lái)獲取參數(shù)；而 params 方式傳參不會(huì)在地址欄展示參數(shù)，使用 $route.params.參數(shù)名 來(lái)獲取參數(shù)。

四、簡(jiǎn)答題

1. 請(qǐng)簡(jiǎn)述npm方式安裝vue-router的步驟。
2. 請(qǐng)簡(jiǎn)述vue-router路由的作用。
3. 請(qǐng)簡(jiǎn)單列舉并說(shuō)明路由對(duì)象包括哪些屬性。

五、編程題

請(qǐng)使用Vue路由相關(guān)知識(shí)動(dòng)手實(shí)現(xiàn)Tab欄切換案例，要求如下。

• 創(chuàng)建一個(gè)components/Message.vue組件，用來(lái)展示頁(yè)面內(nèi)容。
• 創(chuàng)建3個(gè)子路由，分別是“待付款”“待發(fā)貨”“待收貨”頁(yè)面，在每個(gè)子路由頁(yè)面單獨(dú)寫出相應(yīng)的內(nèi)容，頁(yè)面效果如下圖所示。

1. Vuex狀態(tài)管理

一、填空題

1. Vuex實(shí)例對(duì)象通過(guò)____vm.$store___方式來(lái)獲取。
2. Vuex實(shí)例對(duì)象中初始數(shù)據(jù)狀態(tài)通過(guò)___vm.$store.state___方式獲取。
3. Vuex實(shí)例對(duì)象中組件狀態(tài)通過(guò)___vm.$store.commit()____方式改變。
4. Vuex中創(chuàng)建動(dòng)態(tài)模塊提供的方法是___store.registerModule()____。
5. Vuex中通過(guò)___vm.$store.dispatch()____實(shí)現(xiàn)actions狀態(tài)分發(fā)。

二、判斷題

1. Vuex實(shí)例對(duì)象可以調(diào)用Vue全局接口。（F?）
2. Vuex中Vue.config對(duì)象用來(lái)實(shí)現(xiàn)Vuex全局配置。（F?）?

Vue.config 對(duì)象并不用于實(shí)現(xiàn) Vuex 的全局配置。Vue.config 是 Vue.js 的全局配置對(duì)象，用于配置 Vue 實(shí)例的全局行為

1. Vuex中state選項(xiàng)中數(shù)據(jù)是初始數(shù)據(jù)狀態(tài)。（?T）?
2. Vuex中插槽可以實(shí)現(xiàn)組件任意嵌套，且在版本2.2.6+以后開(kāi)始支持。（F?）

插槽（Slots）并不是 Vuex 的功能之一，而是 Vue.js 組件系統(tǒng)的一項(xiàng)特性。

插槽（Slots）是用于在組件中定義可擴(kuò)展的內(nèi)容區(qū)域，允許我們?cè)诮M件中嵌套其他組件或者插入內(nèi)容。它提供了一種組件之間通信和組合的方式，但與 Vuex 并無(wú)直接關(guān)聯(lián)。?

Axious

1. 當(dāng)在Vuex實(shí)例對(duì)象中調(diào)用store時(shí)，一定會(huì)獲取到store實(shí)例對(duì)象。（T?）

三、選擇題

1. 下列關(guān)于Vuex實(shí)例對(duì)象接口的說(shuō)法，錯(cuò)誤的是（B ）。?

A.Vuex實(shí)例對(duì)象提供了store實(shí)例對(duì)象可操作方法

B.Vuex實(shí)例對(duì)象$data數(shù)據(jù)可以由實(shí)例委托代理

Vuex 實(shí)例對(duì)象 $data 數(shù)據(jù)不可以由實(shí)例委托代理。在 Vuex 中，$data 并不是 Vuex 實(shí)例的一個(gè)屬性或方法。Vuex 實(shí)例對(duì)象提供了 store 實(shí)例對(duì)象可操作方法，用于管理和操作狀態(tài)數(shù)據(jù)。

C.通過(guò)Vuex實(shí)例對(duì)象實(shí)現(xiàn)組件狀態(tài)的管理維護(hù)?

D.Vuex實(shí)例對(duì)象初始數(shù)據(jù)是state數(shù)據(jù)

1. 下面關(guān)于Vuex核心模塊說(shuō)法，錯(cuò)誤的是（B?）。

A.Vuex配置對(duì)象中，actions選項(xiàng)是異步的

B.Vuex.config對(duì)象是全局配置對(duì)象

Vuex.config 對(duì)象不是全局配置對(duì)象。在 Vuex 中，并沒(méi)有名為 Vuex.config 的全局配置對(duì)象。在 Vuex 的配置對(duì)象中，actions 選項(xiàng)是用于定義異步操作的方法，mutations 選項(xiàng)是用于定義同步操作的方法。通過(guò) commit 完成 mutations 的提交。

C.Vuex配置對(duì)象中，mutations選項(xiàng)是同步的

D.通過(guò)commit完成mutations提交

1. 下列不屬于Vuex.Store配置對(duì)象接收參數(shù)的是（?A）。?

l A.data???B.state ???????C.mutations ? D.getters

?data 不是 Vuex.Store 配置對(duì)象接收的參數(shù)。在 Vuex.Store 配置對(duì)象中，可以接收的參數(shù)有 state、mutations、actions、getters 等。

1. Vuex實(shí)例對(duì)象中類似于computed計(jì)算屬性功能的選項(xiàng)是（D?）。

1. state ??B.mutations ??C.actions ??????D.getters

getters 是類似于 computed 計(jì)算屬性功能的選項(xiàng)。在 Vuex 的配置對(duì)象中，可以定義 getters，用于派生出一些基于狀態(tài)的計(jì)算屬性。

1. 下面對(duì)于Vuex中actions說(shuō)法，不正確的是（?ABD）。?

A.actions中事件函數(shù)通過(guò)commit完成分發(fā)

B.acitons中事件處理函數(shù)接收context對(duì)象

C.actions與Vue實(shí)例中的methods是類似的

D.可以用來(lái)注入自定義選項(xiàng)的處理邏輯

A. actions 中的事件函數(shù)不是通過(guò) commit 完成分發(fā)，而是通過(guò) dispatch 來(lái)觸發(fā)。commit 用于觸發(fā) mutations。

B. actions 中的事件處理函數(shù)接收的參數(shù)是一個(gè) context 對(duì)象，可以通過(guò)該對(duì)象調(diào)用 commit、dispatch、getters 等方法。

C. actions 與 Vue 實(shí)例中的 methods 是類似的，都用于定義方法和處理邏輯。

D. actions 不能用于注入自定義選項(xiàng)的處理邏輯，而是用于定義異步操作的方法。

四、簡(jiǎn)答題

1. 請(qǐng)簡(jiǎn)要分析Vuex的設(shè)計(jì)思想。
2. 簡(jiǎn)述Vuex配置對(duì)象中的主要內(nèi)容有哪些。
3. 簡(jiǎn)述Vuex中的actions的含義。

五、編程題

請(qǐng)編程實(shí)現(xiàn)列表的增、刪、改、查操作。

1. Vue開(kāi)發(fā)環(huán)境

一、填空題

1. 對(duì)于CLI類型的插件，需要以??@vue???為前綴。
2. 使用npm包通過(guò)????npm install –g @vue/cli????命令全局安裝@vue/cli 3.x。
3. 使用?????vue?-version(vue –V)????來(lái)查看vue的版本號(hào)。
4. 使用yarn包通過(guò)????yarn global add @vue/cli????????????命令全局安裝@vue/cli 3.x。
5. 在 Vue CLI 3中使用????vue create 項(xiàng)目名????命令來(lái)創(chuàng)建一個(gè)Vue項(xiàng)目。

二、判斷題

1. 卸載vue-cli的命令是npm uninstall vue-cli -g。（T）
2. 添加CLI插件的命令是vue add vue-eslint。（F）?

正確的命令是 vue add eslint。

1. 插件不能修改webpack的內(nèi)部配置，但是可以向?vue-cli-service?注入命令。（F）?

插件不能修改 webpack 的內(nèi)部配置，并且也不能直接向 vue-cli-service 注入命令。插件可以通過(guò)修改或擴(kuò)展配置來(lái)影響這些命令的行為，但無(wú)法直接注入新的命令。

1. Vue CLI通過(guò)vue ui命令來(lái)創(chuàng)建圖形用戶界面。（T）?
2. 在文件中用“key=value”（鍵值對(duì)）的方式來(lái)設(shè)置環(huán)境變量。（T）

三、選擇題

1. 下列選項(xiàng)中說(shuō)法正確的是（B）。?

A. 新版的Vue CLI的包名稱為vue-cli

B. 執(zhí)行npm uninstall vue-cli -g命令可以全局刪除vue-cli包

C.?使用yarn install add @vue/cli命令可以全局安裝@vue/cli工具

D. 通過(guò)vue add ui命令來(lái)創(chuàng)建圖形用戶界面

A. 新版的 Vue CLI 的包名稱為 @vue/cli，不是 vue-cli。

C. 使用 yarn install add @vue/cli 命令是錯(cuò)誤的，正確的命令是 yarn global add @vue/cli 或 npm install -g @vue/cli，用于全局安裝 Vue CLI 工具。

D. 通過(guò) vue add ui 命令無(wú)法創(chuàng)建圖形用戶界面，正確的命令是 vue ui，用于啟動(dòng) Vue UI，通過(guò)圖形界面來(lái)管理和運(yùn)行項(xiàng)目。

1. 關(guān)于CLI服務(wù)，下列選項(xiàng)說(shuō)法錯(cuò)誤的是（C）。

A.?在@vue/cli-service中安裝了一個(gè)名為vue-cli-service的命令

B.?vue.config.js是一個(gè)可選的配置文件

C.?通過(guò)npx vue-cli-service helps查看所有的可用命令

C. 通過(guò) npx vue-cli-service helps 命令是錯(cuò)誤的，正確的命令是 npx vue-cli-service help，用于查看可用命令的幫助信息。

D.?通過(guò)vue ui使用GUI圖形用戶界面來(lái)運(yùn)行更多的特性腳本

1. 下列選項(xiàng)中說(shuō)法正確的是（AD）。?

l A.?使用相對(duì)路徑引入的靜態(tài)資源文件，會(huì)被webpack處理解析為模塊依賴

l B. 放在public文件夾下的資源將會(huì)經(jīng)過(guò)webpack的處理

l C.?通過(guò)絕對(duì)路徑被引用的資源將會(huì)經(jīng)過(guò)webpack的處理

l D.?URL以~開(kāi)始，會(huì)被認(rèn)為是模塊請(qǐng)求

B. 放在 public 文件夾下的資源文件不會(huì)經(jīng)過(guò) webpack 的處理，而是直接被復(fù)制到輸出目錄。

C. 通過(guò)絕對(duì)路徑引用的資源文件不會(huì)經(jīng)過(guò) webpack 的處理，而是被視為普通的靜態(tài)資源。

四、簡(jiǎn)答題

1. 簡(jiǎn)述如何安裝Vue CLI 3.x版本的腳手架。
2. 簡(jiǎn)述如何在現(xiàn)有項(xiàng)目中安裝CLI插件和第三方插件。
3. 簡(jiǎn)單介紹CLI服務(wù)vue-cli-service <command>中的command命令包括哪些。

五、編程題

1. 簡(jiǎn)單描述Vue CLI 3安裝的過(guò)程。
2. 簡(jiǎn)單描述使用Vue CLI 3創(chuàng)建項(xiàng)目的步驟。

1. 服務(wù)器端渲染

一、填空題

1. ???webpack-hot-middleware???插件可以用來(lái)進(jìn)行頁(yè)面的熱重載。
2. hash模式路由，地址欄URL中會(huì)自帶??#??符號(hào)。
3. SSR的路由需要采用??history??的方式。
4. ??SEO??是利用搜索引擎規(guī)則，提高網(wǎng)站在搜索引擎內(nèi)自然排名的一種技術(shù)。
5. Vue中使用服務(wù)器端渲染，需要借助Vue的擴(kuò)展工具??vue-sever-render???。

二、判斷題

1. 客戶端渲染，即傳統(tǒng)的單頁(yè)面應(yīng)用模式。（T）
2. webpack-dev-middleware中間件對(duì)更改的文件進(jìn)行監(jiān)控。（T）?
3. 服務(wù)端渲染不利于SEO。（F）?

服務(wù)端渲染指的是在服務(wù)器端生成完整的 HTML 頁(yè)面，并將其發(fā)送給客戶端。相比于傳統(tǒng)的客戶端渲染（Client-Side Rendering，CSR），服務(wù)端渲染能夠提供更好的 SEO 支持

1. 服務(wù)器渲染應(yīng)用程序，需要處于Node.js server運(yùn)行環(huán)境。（T）
2. 使用git-bash命令行工具，輸入指令mkdirs vue-ssr創(chuàng)建項(xiàng)目。（F）。

mkdir vue-ssr

三、選擇題

1. 下列選項(xiàng)中說(shuō)法正確的是（A）。?

A.?vue-server-renderer的版本要與Vue版本相匹配

B.?客戶端渲染，需要使用entry-server.js和entry-client.js兩個(gè)入口文件

在客戶端渲染中，需要使用兩個(gè)入口文件：entry-server.js 用于服務(wù)器端渲染，entry-client.js 用于客戶端渲染。

C.App.js是應(yīng)用程序的入口，它對(duì)應(yīng)vue-cli創(chuàng)建的項(xiàng)目的app.js文件

app.js 不是應(yīng)用程序的入口，它對(duì)應(yīng)的是 vue-cli 創(chuàng)建的項(xiàng)目的入口文件，通常是 main.js

1. 客戶端應(yīng)用程序既可以運(yùn)行在瀏覽器上，又可以運(yùn)行在服務(wù)器上

客戶端應(yīng)用程序通常是指在瀏覽器上運(yùn)行的前端應(yīng)用，而服務(wù)器端應(yīng)用程序是指在服務(wù)器上運(yùn)行的后端應(yīng)用。它們有不同的運(yùn)行環(huán)境和目的。

1. 下列關(guān)于SSR路由說(shuō)法，錯(cuò)誤的是（A）。

1. SSR的路由需要采用history的方式

SSR 的路由可以采用 history 的方式，也可以采用 hash 的方式。具體的選擇取決于項(xiàng)目需求和技術(shù)棧的選擇。

B.?history模式的路由提交不到服務(wù)器上

C.?history模式完成URL跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面

D.?hash模式路由，地址欄URL中hash改變不會(huì)重新加載頁(yè)面

1. 下列關(guān)于Nuxt.js的說(shuō)法，錯(cuò)誤的是（D）。?

l A.?使用“create-nuxt-app?項(xiàng)目名”命令創(chuàng)建項(xiàng)目

l B. 使用Nuxt.js搭建的項(xiàng)目中，pages目錄是用來(lái)存放應(yīng)用的路由及視圖

l C.?在Nuxt.js項(xiàng)目中，聲明式路由在html標(biāo)簽中通過(guò)<nuxt-link>完成路由跳轉(zhuǎn)

l D.?Nuxt.js項(xiàng)目中需要根據(jù)目錄結(jié)構(gòu)手動(dòng)完成對(duì)應(yīng)的路由配置

Nuxt.js 采用約定優(yōu)于配置的方式，根據(jù)文件的目錄結(jié)構(gòu)自動(dòng)生成路由配置，無(wú)需手動(dòng)完成對(duì)應(yīng)的路由配置。這樣可以簡(jiǎn)化開(kāi)發(fā)流程并提高開(kāi)發(fā)效率。

四、簡(jiǎn)答題

1. 請(qǐng)簡(jiǎn)述什么是服務(wù)器端渲染。
2. 請(qǐng)簡(jiǎn)述服務(wù)器端渲染的代碼邏輯和處理步驟。
3. 請(qǐng)簡(jiǎn)述Nuxt.js中，聲明式路由和編程式路由的區(qū)別。

五、編程題

基于Nuxt.js開(kāi)發(fā)一個(gè)Vue程序，實(shí)現(xiàn)登錄和注冊(cè)切換。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-751647.html

到了這里，關(guān)于Vue練習(xí)題（帶解析）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！