整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          20 道必看的 Vue 面試題 - 原力計劃

          者 | 紅顏禍水nvn

          責(zé)編 | 唐小引

          出品 | CSDN 原力計劃

          1. 什么是 MVVM?

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

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

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

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

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

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

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

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

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

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

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

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

          4. Vuex 是什么?哪種功能場景使用它?

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

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

          • 需要動態(tài)的注冊響應(yīng)式數(shù)據(jù);

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

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

          5. Vuex 有哪幾種屬性?

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

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

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

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

          • modules:模塊化 Vuex。

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

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

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

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

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

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

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

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

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

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

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

          8. Vue 生命周期總共有幾個階段?

          • beforeCreate 創(chuàng)建前

          • created 創(chuàng)建后

          • beforeMount 載入前

          • mounted 載入后

          • beforeUpdate 更新前

          • updated 更新后

          • beforeDestroy 銷毀前

          • destroyed 銷毀后

          9. 說出至少 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:啟動 vue-cli 開發(fā)環(huán)境的 npm 命令

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

          11. 請說出 vue-cli 工程中每個文件夾和文件的用處。

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

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

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

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

          • 其他文件:定義的一些項目信息,說明等等。

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

          • hash 模式:

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

          • history 模式:

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

          13. 如何解決 Vue 中的 ajax 跨域問題?

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

          修改 proxyTable: {
          '/api':{ //使用 /api 來代替 "http://localhost:8082"
          target:'http://localhost:8082', //源地址
          changeOrigin:true, //改變源
          pathRewrite:{
          '^/api':'http://localhost:8082' //路徑重寫
          }
          }
          },

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

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

          • npm run build :Vue 打包命令

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

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

          • 異步路由加載

          • 不打包庫文件

          • 關(guān)閉 sourcemap

          • 開啟 gzip 壓縮

          16. scss 是什么?

          SCSS 是 Sass 3 引入的新語法,其語法完全兼容 CSS3,并且繼承了 Sass 的強大功能,唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮進,SCSS 對空白符號不敏感。

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

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

          特定:

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

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

          • 支持 Promise API

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

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

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

          • 能夠取消請求

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

          • 客戶端支持保護安全免受 XSRF 攻擊

          如何使用:

          • npm install --save axios 安裝axios

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

          import Axios from 'axios'

          Vue.propertype.$axios = Axios;
          • 使用 axios 發(fā)送 get 請求

          this.$axios.get('/user?stu_id=1002').then(function(resp) {
          console.log(resp);
          }).catch(function(err) {
          console.log(err);
          });
          • 使用 axios 發(fā)送 post 請求 post原生請求在后端是接收不到參數(shù)的,所有有兩種解決方案,這里只寫一種!第二種解決方案是用 QS。

          var params = new URLSearchParams;
          params.append('name','孫悟空');
          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īng)用變得易如反掌。包含的功能有:

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

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

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

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

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

          • 帶有自動激活的 CSS class 的連接

          • HTML 5 歷史模式或 hash 模式,在 IE9 中自動降級

          • 自定義的滾動條行為

          vue-router 組件:

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

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

          • < router-view> 路由的顯示

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

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

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

          • Vue 是數(shù)據(jù)驅(qū)動,通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操作。

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

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

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

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

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

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

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

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

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

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

          為一名Vue.js的忠實用戶,我想有必要寫點文章來歌頌這一門美好的語言了,下面將給大家介紹Vue.js,希望能夠激發(fā)你對Vue.js的興趣。

          什么是Vue:

          Vue (讀音 /vju?/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時,Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

          Vue的吸引力:

          我喜歡 Vue 的一點是它吸取了其它框架的優(yōu)秀之處,并有條不紊的將它們組合在一起。 比如:

          • 具有響應(yīng)式組件化的虛擬 DOM 只提供視圖層, props 和類 Redux 狀態(tài)管理與 React 類似。
          • 條件渲染和服務(wù)與 Angular 類似。
          • 受到 Polymer 簡潔及性能方面的啟發(fā),Vue 提供了類似的模式,比如 HTML, 樣式以及 JavaScript 組合在一起。

          Vue 相比其它框架的優(yōu)勢有: 簡潔,提供更多語義化的 API , 比 React 的表現(xiàn)稍好,不像 Polymer 那樣使用 polyfill,相比 Angular 有獨立的視圖。

          在對Vue.js 有初步的認識的情況下,我們來說說今天的重點吧:Vue.js教程:渲染,指令,事件。

          首先,當(dāng)然是從 "Hello, world!" 的例子開始啦。運行如下示例:

          如果你熟悉 React,你會發(fā)現(xiàn)兩者有很多相同之處。通過 mustache 模板以及使用一個變量,可以避免在內(nèi)容中使用 JavaScript,但是不同的一點是我們直接書寫 HTML 而不是 JSX 。雖然 JSX 易于使用,但是我無需再花時間把 class 改成 className,等等。這樣啟動及運行會更輕量。

          現(xiàn)在嘗試一下我喜歡的 Vue 的特性: 循環(huán)以及條件渲染。

          條件渲染

          假如有一組元素,類似導(dǎo)航條,我打算重復(fù)利用。合理的做法是放在數(shù)組中動態(tài)的更新。使用普通的 JS (需要 Babel) ,我們會這樣做: 創(chuàng)建一個數(shù)組,然后創(chuàng)建一個空字符串,用來存放使用 <li>包裹的元素,再用 <ul>包裹所有內(nèi)容,使用 innerHTML 方法添加到 DOM 中:

          這種方法是可行的,但是有點麻煩?,F(xiàn)在試一試 Vue 的 v-for循環(huán):

          非常簡潔。如果你熟悉 Angular,你對此應(yīng)該不陌生。我發(fā)現(xiàn)這種條件渲染的方式簡單明了。如果你需要更新內(nèi)容,修改起來也很簡單。

          另外一種好的方式是使用 v-model 進行動態(tài)綁定。試試下面的例子:

          在這個 demo 中你會注意到兩點。首先,可以直接向書中打字并且動態(tài)更新文本。Vue 通過 v-model非常方便的實現(xiàn)了 <textarea>和 <p>的數(shù)據(jù)綁定。

          其次,你可能注意到我們將數(shù)據(jù)放在了函數(shù)中。在這個例子中,不這樣做也可以。我們可以和之前的例子一樣放在一個對象中。但是這種方式只能在 Vue 實例中使用,在程序中也是如此 (所以,在組件中不要使用這種方法)。在一個 Vue 實例中這樣使用是可以的,但是我們需要在子組件中分享數(shù)據(jù)。最好一開始就把數(shù)據(jù)放在函數(shù)中,因為使用組件時我們希望每個組件都有自己的狀態(tài)。

          并不是只有簡單的輸入綁定,甚至 v-if可以用 v-show替換,有 v-show的元素不是銷毀或重建組件,而是始終保持在 DOM 中,切換可見性。

          Vue 提供了很多指令, 下面是我經(jīng)常使用的一些指令。很多指令都有縮寫,所以我會一起列出來。在之后的教程中,我們主要使用指令縮寫,所以最好先熟悉一下下面的表格。

          也有非常好的事件修飾符和其他 API:

          加快開發(fā)的方法:

          你也可以 自定義指令。

          我們會在稍后的例子中使用這些方法!

          事件處理

          數(shù)據(jù)綁定雖然很好,但是沒有事件處理也無法發(fā)揮更大的用途,因此接下來就試一試! 這是我喜歡的一部分。我們將使用上面的綁定和監(jiān)聽器來監(jiān)聽 DOM 事件。

          在應(yīng)用程序中有幾種不同的方法來創(chuàng)建可用的方法。比如在普通的 JS 中,你可以選擇函數(shù)名,但是實例方法直觀地稱為 methods!

          我們創(chuàng)建了一個名為 increment的方法并且你會注意到函數(shù)自動綁定了 this,會指向?qū)嵗敖M件中的 data 。我喜歡這種自動綁定,不需要通過 console.log查看 this的指向。 我們使用縮寫 @click綁定 click 事件。

          Methods 并不是創(chuàng)建自定義函數(shù)的唯一方式。你也可以使用 watch。兩者的區(qū)別是 methods 適合小的、同步的計算,而 watch對于多任務(wù)、異步或者響應(yīng)數(shù)據(jù)變化時的開銷大的操作是有利的。我經(jīng)常在動畫中使用 watch 。

          讓我們看看如何傳遞事件并且進行動態(tài)地樣式綁定。如果你記得上面的表格,你可以使用 :來代替 v-bind,因此我們可以很簡單地通過 :style以及 傳遞狀態(tài),或者 :class綁定樣式 (以及其他屬性)。這種綁定確實有很多用途。

          在以下的例子中,我們使用 hsl(),因為 hue calculated as a circle of degrees of color,所以每一個位置都有色值。這種方法很有用,因為任何數(shù)值都有效。因此,當(dāng)我們在屏幕上移動鼠標(biāo),背景顏色將相應(yīng)更新。我們使用 ES6 模板字面量。

          你應(yīng)該看到我們甚至不需要傳遞 @click事件,Vue 將它作為方法的參數(shù)(這里顯示為 e)自動傳遞。

          此外,原生方法也可以使用,比如 event.clientX,并且很容易關(guān)聯(lián) this實例。在元素的樣式綁定中,CSS 屬性需要使用駝峰命名。在這個例子中,你可以看到 Vue 的簡單明了。

          實際上我們甚至不需要創(chuàng)建一個方法,如果事件足夠簡單,我們也可以在組件中直接增加計數(shù)器的值:

          我們沒有使用任何方法而是直接在 @click事件中修改狀態(tài)。而且我們也可以在其中添加一點邏輯判斷(因為在購物網(wǎng)站中不會有小于零的東西)。 一旦這種邏輯過于復(fù)雜,即使可讀性下降,最好還是寫到一個方法中。這是個很好的選擇。

          對編程感興趣,想了解更多的編程知識,關(guān)注頭條號一起玩轉(zhuǎn)編程

          更多編程資訊、干貨持續(xù)更新中~

          之前一段時間由于工作很忙,沒有時間繼續(xù)學(xué)習(xí)Vue,今天算是繼續(xù)對之前的學(xué)習(xí)進行補充了,今天要學(xué)習(xí)的便是Vue的條件渲染和列表渲染,我們將討論if、if-else、if-else-if,show等。在列表渲染中,我們將討論如何使用for循環(huán)。



          條件渲染

          對于條件渲染,其概念就是滿足條件的渲染界面輸出,在Vue中借助if,if-else,if-else-if,show等的幫助下完成條件檢查,我們首先通過一個實例來解釋條件渲染的細節(jié)



          瀏覽器效果



          在上面的例子中,我們創(chuàng)建了一個按鈕和兩個帶有消息的h1標(biāo)簽。聲明了一個名為show的變量,并將其初始化為值true。它顯示在按鈕附近。在單擊按鈕時,我們調(diào)用方法showdata,它切換變量show的值。這意味著在單擊按鈕時,變量show的值將從true變?yōu)閒alse,false變?yōu)閠rue。我們已將if分配給h1標(biāo)記,如以下代碼段所示。

          <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
          <h1 v-if = "show">這是H1標(biāo)簽</h1>
          

          現(xiàn)在它將做的是,它將檢查變量show的值,如果它是真的,將顯示h1標(biāo)簽。單擊按鈕并在瀏覽器中查看,因為show變量的值更改為false,h1標(biāo)記不會顯示在瀏覽器中。僅在show變量為true時顯示。

          以下是瀏覽器中的顯示。



          我們看下瀏覽器中dom的變化情況



          變?yōu)閒alse時,h1已經(jīng)不見了




          下面是使用了if-else的示例




          主要就是這段代碼:

          <h1 v-if="show">這是H1標(biāo)簽</h1>
          <h2 v-else>這是H2標(biāo)簽</h2>
          



          現(xiàn)在,如果show為true,將顯示“這是H1標(biāo)簽”,如果為false,則顯示“這是H2標(biāo)簽”。這是我們將在瀏覽器中獲得的內(nèi)容。




          點擊按鈕后變化




          接下來是v-show的示例



          v-show的行為與v-if相同。它還根據(jù)分配給它的條件顯示和隱藏元素。v-if和v-show之間的區(qū)別在于v-if如果條件為false則從DOM中刪除HTML元素,如果條件為真則將其添加回來。而v-show隱藏了元素,如果條件為false,則display:none。如果條件為真,它會顯示元素返回。因此,元素始終存在于dom中。

          列表渲染

          • v-for

          現(xiàn)在讓我們使用v-for指令進行列表渲染



          名為items的變量聲明為數(shù)組。在方法中,有一個名為showinputvalue的方法,它被分配給帶有水果名稱的輸入框。在該方法中,使用以下代碼將輸入文本框內(nèi)的水果添加到數(shù)組中

          showinputvalue : function(event) {
           this.items.push(event.target.value);
          }
          

          我們使用v-for來顯示輸入的水果,如下面的代碼片段所示。V-for迭代數(shù)組中存在的值。

          <ul>
           <li v-for = "a in items">{{a}}</li>
          </ul>
          

          要使用for循環(huán)迭代數(shù)組,我們必須使用v-for = "a in items",其中a保存數(shù)組中的值并顯示直到所有項都完成。我們看下瀏覽器輸出:



          嘗試輸入一些水果名稱:



          Dom代碼對比



          如果我們希望顯示數(shù)組的索引,則使用以下代碼完成:



          主要代碼如下

          <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
          

          瀏覽器效果如下



          總結(jié)

          以上就是對Vue中的條件渲染和列表渲染的介紹,非常的簡單,但是越是簡單的東西越是要打撈基礎(chǔ),就像是學(xué)習(xí)編程語言的語法一樣,希望對和我一樣初學(xué)Vue的小伙伴有一些幫助,共同進步!


          主站蜘蛛池模板: 国模丽丽啪啪一区二区| 在线观看国产区亚洲一区成人| 无码人妻久久一区二区三区蜜桃 | 日韩精品久久一区二区三区| 国产激情一区二区三区 | 尤物精品视频一区二区三区| 亚洲区精品久久一区二区三区| 日本中文字幕在线视频一区 | 中文无码AV一区二区三区| 国产一区二区好的精华液| 国产一区二区三区乱码网站| 精品亚洲一区二区| 国产色情一区二区三区在线播放| 国产萌白酱在线一区二区| 亚洲性色精品一区二区在线| 亚洲一区精品视频在线| 精品视频一区二区三三区四区| 中文字幕av无码一区二区三区电影| 国产一区二区影院| 国产在线观看91精品一区| 日本一区二区三区不卡在线视频 | 国产美女视频一区| 无码精品人妻一区二区三区免费 | 无码人妻精品一区二区三区66 | 中文字幕日韩精品一区二区三区 | 国产伦一区二区三区免费| 无码一区二区三区免费视频| 国产乱人伦精品一区二区在线观看| 亚洲电影唐人社一区二区| 亚洲香蕉久久一区二区三区四区| 精品欧洲AV无码一区二区男男 | 一区在线免费观看| 中文字幕无码免费久久9一区9| 国产亚洲情侣一区二区无| 国产午夜福利精品一区二区三区| 久久精品国产一区二区三| 51视频国产精品一区二区| 成人H动漫精品一区二区| 国产成人精品无人区一区| 狠狠色成人一区二区三区| 国产成人精品视频一区二区不卡|