整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者 | 紅顏禍水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)出來，ViewModel 是一個同步 View 和 Model 的對象。
2. 父組件向子組件傳值的方法？
父組件傳遞的數(shù)據(jù)子組件用 props 方法接收。
子組件通過兩種方式接收：可以傳遞任何類型（數(shù)組，對象，各種數(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) ，父組件接收的時候需要在父組件中創(chuàng)建的子組件的標(biāo)簽中綁定 Key，格式:@Key=“方法名”，父組件聲明這個方法，方法帶參數(shù)，這個參數(shù)就是子組件傳遞的 Value。
詳細(xì)介紹看這篇：Vue子組件向父組件傳值
https://blog.csdn.net/sisi_chen/article/details/81635216
4. Vuex 是什么？哪種功能場景使用它？
Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理模式，它采用集中式儲存管理 Vue 應(yīng)用中所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
當(dāng)項(xià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 實(shí)例的掛載元素 $el 和數(shù)據(jù)對象 data 都為未定義，還未初始化。
created：vue 實(shí)例的數(shù)據(jù)對象 data 有值了，$el 沒有。
beforeMount：vue 實(shí)例的 $el 和 data 都初始化了，但還是虛擬的 dom 節(jié)點(diǎn)，具體的 data.filter 還未替換掉。
mounted：vue 實(shí)例掛載完成，data.filter 成功渲染
beforeUpdate：data 更新時觸發(fā)。
updated：data 更新時觸發(fā)。
beforeDestroy：組件銷毀時觸發(fā)。
destroyed：組件銷毀時觸發(fā)，vue 實(shí)例解除了事件監(jiān)聽以及 dom 的綁定（無響應(yīng)了），但 DOM 節(jié)點(diǎn)依舊存在。
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)配置以及腳本文件，在實(shí)際開發(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文件夾 ：工程項(xiàng)目的源碼以及資源、包括頁面圖片、路由組件、路由配置、vuex、入口文件等。
其他文件：定義的一些項(xiàng)目信息，說明等等。
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ǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。只是當(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 的強(qiáng)大功能，唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮進(jìn)，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 格式
客戶端支持保護(hù)安全免受 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)的視圖過渡效果
細(xì)粒度的導(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é)點(diǎn)操作。
處理數(shù)據(jù)交互的時候挺適合 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ì)劃！我們將用全新的方式來釋放更多的流量，讓優(yōu)質(zhì)、有深度、豐富有趣的內(nèi)容得到精準(zhǔn)的流量扶持，同時也幫助創(chuàng)作者和粉絲有更多互動和交流。點(diǎn)擊下方圖片了解詳情。
?比爾·蓋茨退出微軟公司董事會；蘋果 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ò)的舊問題
我們相信在 Web 的世界里沒有一種方案可以解決所有問題。正因如此，Vue 被設(shè)計(jì)成一個靈活的、可以漸進(jìn)式集成的框架。根據(jù)使用場景的不同需要，相應(yīng)地有多種不同的方式來使用 Vue，以此在技術(shù)棧復(fù)雜度、開發(fā)體驗(yàn)和性能表現(xiàn)間取得最佳平衡。
Vue 可以以一個單獨(dú) JS 文件的形式使用，無需構(gòu)建步驟！如果你的后端框架已經(jīng)渲染了大部分的 HTML，或者你的前端邏輯并不復(fù)雜，不需要構(gòu)建步驟，這是最簡單的使用 Vue 的方式。在這些場景中你可以將 Vue 看作一個更加聲明式的 jQuery 替代品。
Vue 也提供了另一個更適用于此類無構(gòu)建步驟場景的版本 petite-vue（https://github.com/vuejs/petite-vue）。它為漸進(jìn)式增強(qiáng)已有的 HTML 作了特別的優(yōu)化，功能更加精簡，十分輕量。
你可以用 Vue 來構(gòu)建標(biāo)準(zhǔn)的 Web Component，這些 Web Component 可以嵌入到任何 HTML 頁面中，無論它們是如何被渲染的。這個方式讓你能夠在不需要顧慮最終使用場景的情況下使用 Vue：因?yàn)樯傻?Web Component 可以嵌入到舊應(yīng)用、靜態(tài) HTML，甚至用其他框架構(gòu)建的應(yīng)用中。
一些應(yīng)用在前端需要具有豐富的交互性、較深的會話和復(fù)雜的狀態(tài)邏輯。構(gòu)建這類應(yīng)用的最佳方法是使用這樣一種架構(gòu)：Vue 不僅控制整個頁面，還負(fù)責(zé)處理抓取新數(shù)據(jù)，并在無需重新加載的前提下處理頁面切換。這種類型的應(yīng)用通常稱為單頁應(yīng)用 (Single-Page application，縮寫為 SPA)。
Vue 提供了核心功能庫和全面的工具鏈支持，為現(xiàn)代 SPA 提供了極佳的開發(fā)體驗(yàn)，覆蓋以下方面：
純客戶端的 SPA 在首屏加載和 SEO 方面有顯著的問題，因?yàn)闉g覽器會收到一個巨大的 HTML 空頁面，只有等到 JavaScript 加載完畢才會渲染出內(nèi)容。
Vue 提供了一系列 API，支持將一個 Vue 應(yīng)用在服務(wù)端渲染成 HTML 字符串。這能讓服務(wù)器直接返回渲染好的 HTML，讓用戶在 JavaScript 下載完畢前就看到頁面內(nèi)容。Vue 之后會在客戶端對應(yīng)用進(jìn)行“激活 (hydrate)”使其重獲可交互性。這被稱為服務(wù)端渲染 (SSR)（https://cn.vuejs.org/guide/scaling-up/ssr.html），它能夠極大地改善應(yīng)用在 Web 核心指標(biāo)上的性能表現(xiàn)，如最大內(nèi)容繪制 (LCP)。
Vue 生態(tài)中有一些針對此類場景的、基于 Vue 的上層框架，比如 NuxtJS（https://nuxt.com/），能讓你用 Vue 和 JavaScript 開發(fā)一個全棧應(yīng)用。
如果所需的數(shù)據(jù)是靜態(tài)的，那么服務(wù)端渲染可以提前完成。這意味著我們可以將整個應(yīng)用預(yù)渲染為 HTML，并將其作為靜態(tài)文件部署。這增強(qiáng)了站點(diǎn)的性能表現(xiàn)，也使部署變得更容易，因?yàn)槲覀儫o需根據(jù)請求動態(tài)地渲染頁面。Vue 仍可通過激活在客戶端提供交互。這一技術(shù)通常被稱為靜態(tài)站點(diǎn)生成 (SSG)，也被稱為 JAMStack。
SSG 有兩種風(fēng)格：單頁和多頁。這兩種風(fēng)格都能將站點(diǎn)預(yù)渲染為靜態(tài) HTML，區(qū)別在于：
單頁 SSG 更適合于重交互、深會話的場景，或需要在導(dǎo)航之間持久化元素或狀態(tài)。否則，多頁 SSG 將是更好的選擇。
Vue 團(tuán)隊(duì)也維護(hù)了一個名為 VitePress 的靜態(tài)站點(diǎn)生成器，你正在閱讀的文檔就是基于它構(gòu)建的！VitePress 支持兩種形式的 SSG。另外，NuxtJS 也支持 SSG。你甚至可以在同一個 Nuxt 應(yīng)用中通過不同的路由提供 SSR 和 SSG。
管 Vue 主要是為構(gòu)建 Web 應(yīng)用而設(shè)計(jì)的，但它絕不僅僅局限于瀏覽器。你還可以：
網(wǎng)傳送門：https://www.vuepress.cn
簡潔至上：
以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。
Vue 驅(qū)動：
享受 Vue + webpack 的開發(fā)體驗(yàn)，可以在 Markdown 中使用 Vue 組件，又可以使用 Vue 來開發(fā)自定義主題。
高性能：
VuePress 會為每個頁面預(yù)渲染生成靜態(tài)的 HTML，同時，每個頁面被加載的時候，將作為 SPA 運(yùn)行。
VuePress可生成出全靜態(tài)的文檔結(jié)構(gòu)，可用于知識庫、文檔庫，甚至寫作庫的建立；
可根據(jù)Vue的基礎(chǔ)功能進(jìn)行擴(kuò)展，擴(kuò)展出前后端交互的功能；
有UI開發(fā)的筒子們可以自定義主題，創(chuàng)建更加美觀的文檔庫；
下面是以我本地為例進(jìn)行的操作，相關(guān)nodejs、npm環(huán)境初始化的工作不是本文展示的重點(diǎn)
以下內(nèi)容來自VuePress官網(wǎng)的快速開始
前提條件
VuePress 需要 Node.js (opens new window) >= 8.6
本文會幫助你從頭搭建一個簡單的 VuePress 文檔。如果你想在一個現(xiàn)有項(xiàng)目中使用 VuePress 管理文檔，從步驟 3 開始。
1.創(chuàng)建并進(jìn)入一個新目錄
mkdir vuepress-starter && cd vuepress-starter2.使用你喜歡的包管理器進(jìn)行初始化
yarn init # npm init3.將 VuePress 安裝為本地依賴
我們已經(jīng)不再推薦全局安裝 VuePress
yarn add -D vuepress # npm install -D vuepress注意
如果你的現(xiàn)有項(xiàng)目依賴了 webpack 3.x，我們推薦使用 Yarn (opens new window) 而不是 npm 來安裝 VuePress。因?yàn)樵谶@種情形下，npm 會生成錯誤地依賴樹。
4.創(chuàng)建你的第一篇文檔
mkdir docs && echo '# Hello VuePress' > docs/README.md5.在 package.json 中添加一些 scripts (opens new window)
這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認(rèn)這些 scripts 已經(jīng)被添加。
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}6.在本地啟動服務(wù)器
yarn docs:dev # npm run docs:devVuePress 會在http://localhost:8080 (opens new window) 啟動一個熱重載的開發(fā)服務(wù)器。
現(xiàn)在，你應(yīng)該已經(jīng)有了一個簡單可用的 VuePress 文檔。接下來，了解一下推薦的 目錄結(jié)構(gòu) 和 VuePress 中的 基本配置。
更多的操作可以按照官網(wǎng)的說明進(jìn)行完成。
以下是本地經(jīng)過初始化設(shè)置好的配置，可以幫助你實(shí)現(xiàn)初始化，帶有導(dǎo)航、側(cè)邊欄分組的項(xiàng)目
---
home: true
heroImage: logo.png
heroText: 系統(tǒng)名稱
tagline: 文檔中心
actionText: 快速上手 →
actionLink: /guide/
features:
- title: title1
details: 描述1
- title: title2
details: 描述2
- title: title3
details: 描述3
footer: Copyright ? 2022-present xxx
---
## 這是內(nèi)容標(biāo)題1
內(nèi)容
---
## 這是內(nèi)容標(biāo)題2
內(nèi)容
---
## 這是內(nèi)容標(biāo)題3
內(nèi)容
module.exports = {
base: "/demodocs/",
// 主題和它的配置
title: "Docs",
// theme: 'antdocs',
themeConfig: {
logo: '/logo.png',
nav: [
{ text: '主頁', link: '/' },
{ text: '指導(dǎo)', link: '/guide/' },
{ text: '實(shí)例01', link: '/demo01/' },
{
text: '其他',
items: [
{ text: '標(biāo)題01', link: '/' },
{ text: '百度一下吧', link: 'https://www.baidu.com' },
]
},
{ text: '百度一下', link: 'https://www.baidu.com' },
],
sidebar: {
'/guide/': [
{
title: '指導(dǎo)頁面',
children: [
'', 'markdown-base','markdown-more'
]
}
],
}
},
plugins: ['@vuepress/back-to-top']
}yarn add -D vuepress-theme-antdocsconfig.js中添加主題配置theme: 'antdocs'
將上述配置已經(jīng)上傳到gitee上，有需要的筒子們可以clone使用：https://gitee.com/gitsongwz/vuepress-starter-templates.git
你看，奇怪的知識是不是又增加了
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
