整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | 紅顏禍水nvn
責編 | 唐小引
出品 | CSDN 原力計劃
1. 什么是 MVVM？
MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設計思想。Model 層代表數據模式，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化為 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。
2. 父組件向子組件傳值的方法？
父組件傳遞的數據子組件用 props 方法接收。
子組件通過兩種方式接收：可以傳遞任何類型（數組，對象，各種數據類型等等）
props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}
詳細介紹看這篇：Vue 父組件向子組件傳值
https://blog.csdn.net/qq_34928693/article/details/80539350
3. 子組件向父組件傳值的方法？
子組件向父組件傳值用 this.$emit(key,value) ，父組件接收的時候需要在父組件中創建的子組件的標簽中綁定 Key，格式:@Key=“方法名”，父組件聲明這個方法，方法帶參數，這個參數就是子組件傳遞的 Value。
詳細介紹看這篇：Vue子組件向父組件傳值
https://blog.csdn.net/sisi_chen/article/details/81635216
4. Vuex 是什么？哪種功能場景使用它？
Vuex 是專門為 Vue.js 設計的狀態管理模式，它采用集中式儲存管理 Vue 應用中所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
當項目龐大的時候使用它：
需要動態的注冊響應式數據；
需要命名空間 namespace 來管理組織我們的數據；
希望通過插件，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。
5. Vuex 有哪幾種屬性？
state：基本數據
getters：從基本數據派生的數據
mutations：提交更改數據的方法，同步！
actions：像一個裝飾器，包裹 mutations，使之可以異步。
modules：模塊化 Vuex。
6. 如何讓 CSS 旨在當前組件中起作用？
當前組件的 < style>標簽修改為< style scoped>
7. 請列舉出3個 Vue 中常見的生命周期鉤子函數。
beforeCreate：Vue 實例的掛載元素 $el 和數據對象 data 都為未定義，還未初始化。
created：vue 實例的數據對象 data 有值了，$el 沒有。
beforeMount：vue 實例的 $el 和 data 都初始化了，但還是虛擬的 dom 節點，具體的 data.filter 還未替換掉。
mounted：vue 實例掛載完成，data.filter 成功渲染
beforeUpdate：data 更新時觸發。
updated：data 更新時觸發。
beforeDestroy：組件銷毀時觸發。
destroyed：組件銷毀時觸發，vue 實例解除了事件監聽以及 dom 的綁定（無響應了），但 DOM 節點依舊存在。
8. Vue 生命周期總共有幾個階段？
beforeCreate 創建前
created 創建后
beforeMount 載入前
mounted 載入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 銷毀前
destroyed 銷毀后
9. 說出至少 4 種 Vue 當中的指令和它的用法？
v-html：渲染文本（能解析 HTML 標簽）
v-text：渲染文本（統統解析成文本）
v-bing：綁定數據
v-once：只綁定一次
v-model：綁定模型
v-on：綁定事件
v-if v-shou：條件渲染
10. vue-cli 工程中常用的 npm 命令有哪些？
npm install：下載 node_modules 資源包的命令
npm run dev：啟動 vue-cli 開發環境的 npm 命令
npm run build：vue-cli 生成生產環境部署資源的 npm 命令
11. 請說出 vue-cli 工程中每個文件夾和文件的用處。
build 文件夾：存放 webpack 的相關配置以及腳本文件，在實際開發過程中只會偶爾用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夾：常用到此文件夾下的 config.js (index.js) 配置開發環境的端口號，是否開啟熱加載或者設置生產環境的靜態資源相對路徑、是否開啟 gzip 壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
node_modules：存放 npm install 命令下載的開發環境和生產環境的各種依賴。
src文件夾 ：工程項目的源碼以及資源、包括頁面圖片、路由組件、路由配置、vuex、入口文件等。
其他文件：定義的一些項目信息，說明等等。
12. vue-router 路由的兩種模式。
hash 模式：
# 后面的 hash 值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新瀏覽器，每次 hash 值的變化會觸發 hashchange 事件。
history 模式：
利用了 HTML5 中新增的 pushState 和 replaceState 方法。這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。
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 打包后會在當前工作目錄下生成一個 dist 文件夾，文件夾中會有 static 靜態文件以及 index.html 初始頁面。
15. Vue 如何優化首屏加載速度？
異步路由加載
不打包庫文件
關閉 sourcemap
開啟 gzip 壓縮
16. scss 是什么？
SCSS 是 Sass 3 引入的新語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能，唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮進，SCSS 對空白符號不敏感。
17. axios 是什么？怎么使用？
axios 是一個基于 promise 的 HTTP 庫，可以發送 get，post 請求，正是由于 Vue、React 的出現，促使了 axios 輕量級庫的出現
特定：
可以在瀏覽器中發送 XMLHttpRequest 請求
可以在 node.js 發送 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應
轉換請求數據和響應數據
能夠取消請求
自動轉化 JSON 格式
客戶端支持保護安全免受 XSRF 攻擊
如何使用：
npm install --save axios 安裝axios
在入口 main.js 中導入 axios
import Axios from 'axios'
Vue.propertype.$axios = Axios;使用 axios 發送 get 請求
this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});使用 axios 發送 post 請求 post原生請求在后端是接收不到參數的，所有有兩種解決方案，這里只寫一種！第二種解決方案是用 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 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：
嵌套的路由、是圖標
模塊化的、基于組件的路由配置
路由參數、查詢、通配符
基于 Vue.js 過度系統的視圖過渡效果
細粒度的導航控制
帶有自動激活的 CSS class 的連接
HTML 5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為
vue-router 組件：
< router-link to=""> 路由的路徑
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的顯示
19. 怎么定義 vue-router 的動態路由？怎么獲取傳遞過來的動態參數？
在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id。使用 router 對象的 params.id，例如：this.$route.params.id。
20. MVVM 和其他框架 （jQuery）的區別是什么？哪些場景適合？
Vue 是數據驅動，通過數據來顯示視圖層而不是節點操作。
處理數據交互的時候挺適合 MVVM 設計模式的。
本文為CSDN博主「紅顏禍水nvn」的原創文章，CSDN 官方經授權發布。
原文鏈接：https://blog.csdn.net/qq_43647359/article/details/104774302
歡迎更多的開發者朋友加入 CSDN 原力計劃！我們將用全新的方式來釋放更多的流量，讓優質、有深度、豐富有趣的內容得到精準的流量扶持，同時也幫助創作者和粉絲有更多互動和交流。點擊下方圖片了解詳情。
?比爾·蓋茨退出微軟公司董事會；蘋果 WWDC、微軟 Build 大會均改為線上舉辦；Rust 1.42.0 發布| 極客頭條
?11 國股市熔斷，“禍及”程序員？！
?2.2版本發布！TensorFlow推出開發者技能證書
?Soul App 高管被捕，惡意舉報導致競品被下架
?2020 年最新版 68 道Redis面試題，20000 字干貨，趕緊收藏起來備用！
?最近一個名為 BTCU 的比特幣分叉，準備用新分叉解決比特幣網絡的舊問題
我們相信在 Web 的世界里沒有一種方案可以解決所有問題。正因如此，Vue 被設計成一個靈活的、可以漸進式集成的框架。根據使用場景的不同需要，相應地有多種不同的方式來使用 Vue，以此在技術棧復雜度、開發體驗和性能表現間取得最佳平衡。
Vue 可以以一個單獨 JS 文件的形式使用，無需構建步驟！如果你的后端框架已經渲染了大部分的 HTML，或者你的前端邏輯并不復雜，不需要構建步驟，這是最簡單的使用 Vue 的方式。在這些場景中你可以將 Vue 看作一個更加聲明式的 jQuery 替代品。
Vue 也提供了另一個更適用于此類無構建步驟場景的版本 petite-vue（https://github.com/vuejs/petite-vue）。它為漸進式增強已有的 HTML 作了特別的優化，功能更加精簡，十分輕量。
你可以用 Vue 來構建標準的 Web Component，這些 Web Component 可以嵌入到任何 HTML 頁面中，無論它們是如何被渲染的。這個方式讓你能夠在不需要顧慮最終使用場景的情況下使用 Vue：因為生成的 Web Component 可以嵌入到舊應用、靜態 HTML，甚至用其他框架構建的應用中。
一些應用在前端需要具有豐富的交互性、較深的會話和復雜的狀態邏輯。構建這類應用的最佳方法是使用這樣一種架構：Vue 不僅控制整個頁面，還負責處理抓取新數據，并在無需重新加載的前提下處理頁面切換。這種類型的應用通常稱為單頁應用 (Single-Page application，縮寫為 SPA)。
Vue 提供了核心功能庫和全面的工具鏈支持，為現代 SPA 提供了極佳的開發體驗，覆蓋以下方面：
純客戶端的 SPA 在首屏加載和 SEO 方面有顯著的問題，因為瀏覽器會收到一個巨大的 HTML 空頁面，只有等到 JavaScript 加載完畢才會渲染出內容。
Vue 提供了一系列 API，支持將一個 Vue 應用在服務端渲染成 HTML 字符串。這能讓服務器直接返回渲染好的 HTML，讓用戶在 JavaScript 下載完畢前就看到頁面內容。Vue 之后會在客戶端對應用進行“激活 (hydrate)”使其重獲可交互性。這被稱為服務端渲染 (SSR)（https://cn.vuejs.org/guide/scaling-up/ssr.html），它能夠極大地改善應用在 Web 核心指標上的性能表現，如最大內容繪制 (LCP)。
Vue 生態中有一些針對此類場景的、基于 Vue 的上層框架，比如 NuxtJS（https://nuxt.com/），能讓你用 Vue 和 JavaScript 開發一個全棧應用。
如果所需的數據是靜態的，那么服務端渲染可以提前完成。這意味著我們可以將整個應用預渲染為 HTML，并將其作為靜態文件部署。這增強了站點的性能表現，也使部署變得更容易，因為我們無需根據請求動態地渲染頁面。Vue 仍可通過激活在客戶端提供交互。這一技術通常被稱為靜態站點生成 (SSG)，也被稱為 JAMStack。
SSG 有兩種風格：單頁和多頁。這兩種風格都能將站點預渲染為靜態 HTML，區別在于：
單頁 SSG 更適合于重交互、深會話的場景，或需要在導航之間持久化元素或狀態。否則，多頁 SSG 將是更好的選擇。
Vue 團隊也維護了一個名為 VitePress 的靜態站點生成器，你正在閱讀的文檔就是基于它構建的！VitePress 支持兩種形式的 SSG。另外，NuxtJS 也支持 SSG。你甚至可以在同一個 Nuxt 應用中通過不同的路由提供 SSR 和 SSG。
管 Vue 主要是為構建 Web 應用而設計的，但它絕不僅僅局限于瀏覽器。你還可以：
網傳送門：https://www.vuepress.cn
簡潔至上：
以 Markdown 為中心的項目結構，以最少的配置幫助你專注于寫作。
Vue 驅動：
享受 Vue + webpack 的開發體驗，可以在 Markdown 中使用 Vue 組件，又可以使用 Vue 來開發自定義主題。
高性能：
VuePress 會為每個頁面預渲染生成靜態的 HTML，同時，每個頁面被加載的時候，將作為 SPA 運行。
VuePress可生成出全靜態的文檔結構，可用于知識庫、文檔庫，甚至寫作庫的建立；
可根據Vue的基礎功能進行擴展，擴展出前后端交互的功能；
有UI開發的筒子們可以自定義主題，創建更加美觀的文檔庫；
下面是以我本地為例進行的操作，相關nodejs、npm環境初始化的工作不是本文展示的重點
以下內容來自VuePress官網的快速開始
前提條件
VuePress 需要 Node.js (opens new window) >= 8.6
本文會幫助你從頭搭建一個簡單的 VuePress 文檔。如果你想在一個現有項目中使用 VuePress 管理文檔，從步驟 3 開始。
1.創建并進入一個新目錄
mkdir vuepress-starter && cd vuepress-starter2.使用你喜歡的包管理器進行初始化
yarn init # npm init3.將 VuePress 安裝為本地依賴
我們已經不再推薦全局安裝 VuePress
yarn add -D vuepress # npm install -D vuepress注意
如果你的現有項目依賴了 webpack 3.x，我們推薦使用 Yarn (opens new window) 而不是 npm 來安裝 VuePress。因為在這種情形下，npm 會生成錯誤地依賴樹。
4.創建你的第一篇文檔
mkdir docs && echo '# Hello VuePress' > docs/README.md5.在 package.json 中添加一些 scripts (opens new window)
這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認這些 scripts 已經被添加。
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}6.在本地啟動服務器
yarn docs:dev # npm run docs:devVuePress 會在http://localhost:8080 (opens new window) 啟動一個熱重載的開發服務器。
現在，你應該已經有了一個簡單可用的 VuePress 文檔。接下來，了解一下推薦的 目錄結構 和 VuePress 中的 基本配置。
更多的操作可以按照官網的說明進行完成。
以下是本地經過初始化設置好的配置，可以幫助你實現初始化，帶有導航、側邊欄分組的項目
---
home: true
heroImage: logo.png
heroText: 系統名稱
tagline: 文檔中心
actionText: 快速上手 →
actionLink: /guide/
features:
- title: title1
details: 描述1
- title: title2
details: 描述2
- title: title3
details: 描述3
footer: Copyright ? 2022-present xxx
---
## 這是內容標題1
內容
---
## 這是內容標題2
內容
---
## 這是內容標題3
內容
module.exports = {
base: "/demodocs/",
// 主題和它的配置
title: "Docs",
// theme: 'antdocs',
themeConfig: {
logo: '/logo.png',
nav: [
{ text: '主頁', link: '/' },
{ text: '指導', link: '/guide/' },
{ text: '實例01', link: '/demo01/' },
{
text: '其他',
items: [
{ text: '標題01', link: '/' },
{ text: '百度一下吧', link: 'https://www.baidu.com' },
]
},
{ text: '百度一下', link: 'https://www.baidu.com' },
],
sidebar: {
'/guide/': [
{
title: '指導頁面',
children: [
'', 'markdown-base','markdown-more'
]
}
],
}
},
plugins: ['@vuepress/back-to-top']
}yarn add -D vuepress-theme-antdocsconfig.js中添加主題配置theme: 'antdocs'
將上述配置已經上傳到gitee上，有需要的筒子們可以clone使用：https://gitee.com/gitsongwz/vuepress-starter-templates.git
你看，奇怪的知識是不是又增加了
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
