无码人妻丰满熟妇奶水区码,麻豆一区区三,亚洲日韩欧美精品综合,亚洲无码地址

20 道必看的 Vue 面試題 – 原力計(jì)劃(vue的原理面試題)

0

作者 | 紅顏禍水nvn

責(zé)編 | 唐小引

出品 | CSDN 原力計(jì)劃

1. 什么是 MVVM?

MVVM 是 Model-View-ViewModel 的縮寫,MVVM 是一種設(shè)計(jì)思想。Model 層代表數(shù)據(jù)模式,也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯;View 代表 UI 組件,它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為 UI 展現(xiàn)出來(lái),ViewModel 是一個(gè)同步 View 和 Model 的對(duì)象。

2. 父組件向子組件傳值的方法?

父組件傳遞的數(shù)據(jù)子組件用 props 方法接收。

子組件通過(guò)兩種方式接收:可以傳遞任何類型(數(shù)組,對(duì)象,各種數(shù)據(jù)類型等等)

  • props:[‘title’,‘likes’,‘isPublished’,‘a(chǎn)uthor’];

  • props:{title:String,likes:Number}

詳細(xì)介紹看這篇:Vue 父組件向子組件傳值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子組件向父組件傳值的方法?

子組件向父組件傳值用 this.$emit(key,value) ,父組件接收的時(shí)候需要在父組件中創(chuàng)建的子組件的標(biāo)簽中綁定 Key,格式:@Key=“方法名”,父組件聲明這個(gè)方法,方法帶參數(shù),這個(gè)參數(shù)就是子組件傳遞的 Value。

詳細(xì)介紹看這篇:Vue子組件向父組件傳值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么?哪種功能場(chǎng)景使用它?

Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理模式,它采用集中式儲(chǔ)存管理 Vue 應(yīng)用中所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

當(dāng)項(xiàng)目龐大的時(shí)候使用它:

  • 需要?jiǎng)討B(tài)的注冊(cè)響應(yīng)式數(shù)據(jù);

  • 需要命名空間 namespace 來(lái)管理組織我們的數(shù)據(jù);

  • 希望通過(guò)插件,來(lái)更改記錄;方便測(cè)試;以上這些需要和希望,都是我們 vuex 需要做的一些事情。

5. Vuex 有哪幾種屬性?

  • state:基本數(shù)據(jù)

  • getters:從基本數(shù)據(jù)派生的數(shù)據(jù)

  • mutations:提交更改數(shù)據(jù)的方法,同步!

  • actions:像一個(gè)裝飾器,包裹 mutations,使之可以異步。

  • modules:模塊化 Vuex。

6. 如何讓 CSS 旨在當(dāng)前組件中起作用?

當(dāng)前組件的 < style>標(biāo)簽修改為< style scoped>

7. 請(qǐng)列舉出3個(gè) Vue 中常見的生命周期鉤子函數(shù)。

  • beforeCreate:Vue 實(shí)例的掛載元素 $el 和數(shù)據(jù)對(duì)象 data 都為未定義,還未初始化。

  • created:vue 實(shí)例的數(shù)據(jù)對(duì)象 data 有值了,$el 沒有。

  • beforeMount:vue 實(shí)例的 $el 和 data 都初始化了,但還是虛擬的 dom 節(jié)點(diǎn),具體的 data.filter 還未替換掉。

  • mounted:vue 實(shí)例掛載完成,data.filter 成功渲染

  • beforeUpdate:data 更新時(shí)觸發(fā)。

  • updated:data 更新時(shí)觸發(fā)。

  • beforeDestroy:組件銷毀時(shí)觸發(fā)。

  • destroyed:組件銷毀時(shí)觸發(fā),vue 實(shí)例解除了事件監(jiān)聽以及 dom 的綁定(無(wú)響應(yīng)了),但 DOM 節(jié)點(diǎn)依舊存在。

8. Vue 生命周期總共有幾個(gè)階段?

  • beforeCreate 創(chuàng)建前

  • created 創(chuàng)建后

  • beforeMount 載入前

  • mounted 載入后

  • beforeUpdate 更新前

  • updated 更新后

  • beforeDestroy 銷毀前

  • destroyed 銷毀后

9. 說(shuō)出至少 4 種 Vue 當(dāng)中的指令和它的用法?

  • v-html:渲染文本(能解析 HTML 標(biāo)簽)

  • v-text:渲染文本(統(tǒng)統(tǒng)解析成文本)

  • v-bing:綁定數(shù)據(jù)

  • v-once:只綁定一次

  • v-model:綁定模型

  • v-on:綁定事件

  • v-if v-shou:條件渲染

10. vue-cli 工程中常用的 npm 命令有哪些?

  • npm install:下載 node_modules 資源包的命令

  • npm run dev:?jiǎn)?dòng) vue-cli 開發(fā)環(huán)境的 npm 命令

  • npm run build:vue-cli 生成生產(chǎn)環(huán)境部署資源的 npm 命令

11. 請(qǐng)說(shuō)出 vue-cli 工程中每個(gè)文件夾和文件的用處。

  • build 文件夾:存放 webpack 的相關(guān)配置以及腳本文件,在實(shí)際開發(fā)過(guò)程中只會(huì)偶爾用到 webpack.base.conf.js,配置 less、babel 等。

  • config 文件夾:常用到此文件夾下的 config.js (index.js) 配置開發(fā)環(huán)境的端口號(hào),是否開啟熱加載或者設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對(duì)路徑、是否開啟 gzip 壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等。

  • node_modules:存放 npm install 命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的各種依賴。

  • src文件夾 :工程項(xiàng)目的源碼以及資源、包括頁(yè)面圖片、路由組件、路由配置、vuex、入口文件等。

  • 其他文件:定義的一些項(xiàng)目信息,說(shuō)明等等。

12. vue-router 路由的兩種模式。

  • hash 模式:

# 后面的 hash 值的變化,并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,瀏覽器不發(fā)出請(qǐng)求,也就不會(huì)刷新瀏覽器,每次 hash 值的變化會(huì)觸發(fā) hashchange 事件。

  • history 模式:

利用了 HTML5 中新增的 pushState 和 replaceState 方法。這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧,在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上,它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí),雖然改變了當(dāng)前的 URL,但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。

13. 如何解決 Vue 中的 ajax 跨域問(wèn)題?

找到 config 文件夾中的 index.js 文件:

修改 proxyTable: {
\'/api\':{ //使用 /api 來(lái)代替 \"http://localhost:8082\"
target:\'http://localhost:8082\', //源地址
changeOrigin:true, //改變?cè)?br />pathRewrite:{
\'^/api\':\'http://localhost:8082\' //路徑重寫
}
}
},

修改完之后的跨越請(qǐng)求就可以直接寫成 /api/login 等等了。

14. Vue 打包命令是什么?Vue 打包后會(huì)生成哪些文件?

  • npm run build :Vue 打包命令

  • Vue 打包后會(huì)在當(dāng)前工作目錄下生成一個(gè) dist 文件夾,文件夾中會(huì)有 static 靜態(tài)文件以及 index.html 初始頁(yè)面。

15. Vue 如何優(yōu)化首屏加載速度?

  • 異步路由加載

  • 不打包庫(kù)文件

  • 關(guān)閉 sourcemap

  • 開啟 gzip 壓縮

16. scss 是什么?

SCSS 是 Sass 3 引入的新語(yǔ)法,其語(yǔ)法完全兼容 CSS3,并且繼承了 Sass 的強(qiáng)大功能,唯一不同之處是 SCSS 需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn),SCSS 對(duì)空白符號(hào)不敏感。

17. axios 是什么?怎么使用?

axios 是一個(gè)基于 promise 的 HTTP 庫(kù),可以發(fā)送 get,post 請(qǐng)求,正是由于 Vue、React 的出現(xiàn),促使了 axios 輕量級(jí)庫(kù)的出現(xiàn)

特定:

  • 可以在瀏覽器中發(fā)送 XMLHttpRequest 請(qǐng)求

  • 可以在 node.js 發(fā)送 http 請(qǐng)求

  • 支持 Promise API

  • 攔截請(qǐng)求和響應(yīng)

  • 轉(zhuǎn)換請(qǐng)求和響應(yīng)

  • 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)

  • 能夠取消請(qǐng)求

  • 自動(dòng)轉(zhuǎn)化 JSON 格式

  • 客戶端支持保護(hù)安全免受 XSRF 攻擊

如何使用:

  • npm install –save axios 安裝axios

  • 在入口 main.js 中導(dǎo)入 axios

import Axios from \'axios\'

Vue.propertype.$axios = Axios;

  • 使用 axios 發(fā)送 get 請(qǐng)求

this.$axios.get(\'/user?stu_id=1002\').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});

  • 使用 axios 發(fā)送 post 請(qǐng)求 post原生請(qǐng)求在后端是接收不到參數(shù)的,所有有兩種解決方案,這里只寫一種!第二種解決方案是用 QS。

var params = new URLSearchParams;
params.append(\'name\',\'孫悟空\(chéng)');
params.append(\'age\',22);
let that = this;
this.$axios.post(\'http://localhost:8082/user\',params).then(function(resp) {
console.log(resp.data.users);
that.ausers = data.data.users;
}).catch(function(err) {
console.log(err);
});

18. vue-router 是什么?它有哪些組件?

vue-router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有:

  • 嵌套的路由、是圖標(biāo)

  • 模塊化的、基于組件的路由配置

  • 路由參數(shù)、查詢、通配符

  • 基于 Vue.js 過(guò)度系統(tǒng)的視圖過(guò)渡效果

  • 細(xì)粒度的導(dǎo)航控制

  • 帶有自動(dòng)激活的 CSS class 的連接

  • HTML 5 歷史模式或 hash 模式,在 IE9 中自動(dòng)降級(jí)

  • 自定義的滾動(dòng)條行為

vue-router 組件:

  • < router-link to=\”\”> 路由的路徑

  • < router-link :to=\”{name:’‘l路由名’}\”> 命名路由

  • < router-view> 路由的顯示

19. 怎么定義 vue-router 的動(dòng)態(tài)路由?怎么獲取傳遞過(guò)來(lái)的動(dòng)態(tài)參數(shù)?

在 router 目錄下的 index.js 文件中,對(duì) path 屬性加上 /:id。使用 router 對(duì)象的 params.id,例如:this.$route.params.id。

20. MVVM 和其他框架 (jQuery)的區(qū)別是什么?哪些場(chǎng)景適合?

  • Vue 是數(shù)據(jù)驅(qū)動(dòng),通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作。

  • 處理數(shù)據(jù)交互的時(shí)候挺適合 MVVM 設(shè)計(jì)模式的。

本文為CSDN博主「紅顏禍水nvn」的原創(chuàng)文章,CSDN 官方經(jīng)授權(quán)發(fā)布。

原文鏈接:https://blog.csdn.net/qq_43647359/article/details/104774302

歡迎更多的開發(fā)者朋友加入 CSDN 原力計(jì)劃!我們將用全新的方式來(lái)釋放更多的流量,讓優(yōu)質(zhì)、有深度、豐富有趣的內(nèi)容得到精準(zhǔn)的流量扶持,同時(shí)也幫助創(chuàng)作者和粉絲有更多互動(dòng)和交流。點(diǎn)擊下方圖片了解詳情。

0

?比爾·蓋茨退出微軟公司董事會(huì);蘋果 WWDC、微軟 Build 大會(huì)均改為線上舉辦;Rust 1.42.0 發(fā)布| 極客頭條

?11 國(guó)股市熔斷,“禍及”程序員?!

?2.2版本發(fā)布!TensorFlow推出開發(fā)者技能證書

?Soul App 高管被捕,惡意舉報(bào)導(dǎo)致競(jìng)品被下架

?2020 年最新版 68 道Redis面試題,20000 字干貨,趕緊收藏起來(lái)備用!

?最近一個(gè)名為 BTCU 的比特幣分叉,準(zhǔn)備用新分叉解決比特幣網(wǎng)絡(luò)的舊問(wèn)題

版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請(qǐng)發(fā)送郵件至 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除。

(0)
上一篇 2022年9月30日 上午9:21
下一篇 2022年9月30日 上午9:35

相關(guān)推薦

  • 申請(qǐng)國(guó)家重大科研項(xiàng)目

    尊敬的評(píng)審專家: 我謹(jǐn)代表自己的團(tuán)隊(duì),向國(guó)家重大科研項(xiàng)目評(píng)審委員會(huì)申請(qǐng)科研項(xiàng)目。本申請(qǐng)項(xiàng)目名為“基于人工智能的智能家居系統(tǒng)”,旨在開發(fā)一種智能化的家居系統(tǒng),使人們的生活更加便捷,舒…

    科研百科 2025年2月2日
    0
  • 市科研項(xiàng)目申請(qǐng)書怎么寫

    市科研項(xiàng)目申請(qǐng)書怎么寫 市科研項(xiàng)目申請(qǐng)書是申請(qǐng)市級(jí)別科研項(xiàng)目的重要文檔,通常包含項(xiàng)目背景、研究目的、研究?jī)?nèi)容、研究方法、預(yù)期成果、研究預(yù)算、人員安排等內(nèi)容。以下是一份典型的市科研項(xiàng)…

    科研百科 2025年5月11日
    2
  • 施工進(jìn)度管理規(guī)定

    施工進(jìn)度管理規(guī)定 為加強(qiáng)施工管理,保證施工進(jìn)度和質(zhì)量,依據(jù)《中華人民共和國(guó)建筑法》和其他相關(guān)法規(guī),制定本施工進(jìn)度管理規(guī)定。 一、適用范圍 本管理規(guī)定適用于建筑項(xiàng)目的施工管理,包括施…

    科研百科 2024年5月24日
    39
  • 科研項(xiàng)目研制指導(dǎo)思想

    科研項(xiàng)目研制指導(dǎo)思想 科研項(xiàng)目研制是一項(xiàng)非常重要的工作,它關(guān)系到科研項(xiàng)目的成功與否和最終的成果。在科研項(xiàng)目研制過(guò)程中,必須有明確的指導(dǎo)思想,以確??蒲许?xiàng)目能夠順利完成。本文將介紹科…

    科研百科 2025年4月19日
    2
  • 科研項(xiàng)目國(guó)家補(bǔ)貼

    科研項(xiàng)目國(guó)家補(bǔ)貼: 促進(jìn)科技創(chuàng)新和經(jīng)濟(jì)發(fā)展 科研項(xiàng)目是國(guó)家科技創(chuàng)新的重要支撐,也是經(jīng)濟(jì)發(fā)展的重要引擎。為了促進(jìn)科研項(xiàng)目的發(fā)展,國(guó)家提出了一系列補(bǔ)貼措施,包括科研項(xiàng)目國(guó)家補(bǔ)貼。 科研…

    科研百科 2025年3月24日
    17
  • 小白能做科研項(xiàng)目管理

    小白也能做科研項(xiàng)目管理 科研項(xiàng)目管理是一個(gè)復(fù)雜而繁瑣的過(guò)程,需要涉及到很多方面,包括項(xiàng)目計(jì)劃、進(jìn)度控制、成本預(yù)算、風(fēng)險(xiǎn)管理等。對(duì)于初學(xué)者來(lái)說(shuō),如何高效地進(jìn)行科研項(xiàng)目管理是一個(gè)值得探…

    科研百科 2025年6月3日
    1
  • 如何入手科研項(xiàng)目工作呢

    入手科研項(xiàng)目工作是進(jìn)行科學(xué)研究的第一步,也是最重要的一步。以下是一些入手科研項(xiàng)目工作的建議: 1. 確定研究問(wèn)題:明確想要研究的問(wèn)題,這是科研項(xiàng)目工作的核心。確定研究問(wèn)題是進(jìn)行科學(xué)…

    科研百科 2025年4月4日
    2
  • uniCloud真是小程序云開發(fā)的利器,小程序部署也可以白嫖(unicloud 小程序)

    據(jù)報(bào)道微信小程序2021年日活超過(guò)4.5億 開發(fā)者突破300萬(wàn),我們的日常生活已經(jīng)離不開微信小程序了,無(wú)論是健康碼還是網(wǎng)上購(gòu)物,到餐廳點(diǎn)菜,買票預(yù)定等等,小程序已經(jīng)無(wú)處不在了。 一…

    科研百科 2023年4月7日
    695
  • 物理學(xué)專業(yè)實(shí)驗(yàn)科研項(xiàng)目

    物理學(xué)專業(yè)實(shí)驗(yàn)科研項(xiàng)目 隨著科技的不斷進(jìn)步,物理學(xué)的研究也在不斷深入。其中,實(shí)驗(yàn)科研項(xiàng)目是物理學(xué)研究中不可或缺的一部分。這些項(xiàng)目可以通過(guò)實(shí)驗(yàn)來(lái)驗(yàn)證理論,探索新的物理學(xué)領(lǐng)域,并為未來(lái)…

    科研百科 2025年5月17日
    2
  • 于春泓科研項(xiàng)目

    于春泓科研項(xiàng)目:探索人工智能在醫(yī)療保健領(lǐng)域的應(yīng)用 近年來(lái),隨著人工智能技術(shù)的不斷發(fā)展,其在醫(yī)療領(lǐng)域的應(yīng)用也越來(lái)越廣泛。于春泓教授和他的團(tuán)隊(duì)一直致力于探索人工智能在醫(yī)療保健領(lǐng)域的應(yīng)用…

    科研百科 2025年5月31日
    1
大香蕉伊在线现现| 国日韩无码一区二区三区 | 高潮视频免费精品无| 中文字字幕AV无水印| 天天激情国产| 啊啊啊啊啊啊欧美一区二区| a级毛片精品免费无码精品| 大交香蕉欧美国产| 日韩一夲道不卡一二三区| 日本无码大全超清资源| 国产视频第三区| 超黄黄色特黄av| 图片区一区二区三区四区| 久色91| 黄色文章美女av| 国产第一区自拍小视频| 综合欧美图区一区| 黑鸡巴插入女欧美| 综合婷婷激情五月| 熟妇乱论网| 欧美日韩成人性爱网址| 一本道欧美综合| 麻豆久久亚洲精品网址| 操逼啊阿啊大鸡巴好爽| ou'mei一区二区三区| 麻豆传媒 在线观看| 日韩 熟女 欧美 第一页| 91色婷九色| 亚洲图片国产精品一区二区| 蜜臀av伊人久久| 午夜黄色影院在线| 久久精品二区三区| 日韩电影久久| 麻豆传媒在线老师| 欧美日本视频1期2区| 九九热精品8| 日韩123—二三不卡视频| 欧美激情国产日韩| 亚洲天堂8| aa久久无码伊人| 木林宝库不卡一区二区三区|