者 | 紅顏禍水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)系。