整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
者 | 紅顏禍水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 (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。
我喜歡 Vue 的一點是它吸取了其它框架的優(yōu)秀之處，并有條不紊的將它們組合在一起。 比如:
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中。
現(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>
瀏覽器效果如下
以上就是對Vue中的條件渲染和列表渲染的介紹，非常的簡單，但是越是簡單的東西越是要打撈基礎(chǔ)，就像是學(xué)習(xí)編程語言的語法一樣，希望對和我一樣初學(xué)Vue的小伙伴有一些幫助，共同進步！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
