天我來(lái)談?wù)勎覍?duì)傳統(tǒng)HTML與VUE的區(qū)別理解(不談太深的區(qū)別，查了一下網(wǎng)上那些說(shuō)的都一樣，我只談很多人最關(guān)心的不一樣的，說(shuō)不對(duì)請(qǐng)理解,對(duì)不太了解或想了解VUE的人)。

1、 什么是vue

官網(wǎng)介紹：vue是一套構(gòu)建用戶界面的漸進(jìn)式框架。它與其他重量級(jí)框架不同的是，vue采用自下而上增量開發(fā)的設(shè)計(jì)。Vue的核心庫(kù)只關(guān)注視圖層，非常容易學(xué)習(xí)，非常容易與其他庫(kù)或已有項(xiàng)目整合。

Vue的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖層組件。

2、什么是HTML(HTML5)

HTML5是Web中核心語(yǔ)言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。

總結(jié)：它們相同的地方就一句話:用途和結(jié)果都是一樣的，不管是VUE還是HTML，最終都是將數(shù)據(jù)使用各種UI及方式展現(xiàn)給用戶，也就是都是視圖層頁(yè)面的。

有人會(huì)說(shuō)使用HTML和VUE開發(fā)有什么區(qū)別呢？許多人覺(jué)得結(jié)果都是視圖層表達(dá)，而且VUE打包發(fā)布后不還是HTML+一堆JS文件，而且還要引入導(dǎo)入編譯感覺(jué)特麻煩，感覺(jué)VUE好難，為什么要學(xué)VUE？

1、開發(fā)和部署

VUE 開發(fā)過(guò)程確實(shí)挺麻煩的，要安裝依賴，要npm一堆包(還經(jīng)常失敗)。而HTML就簡(jiǎn)單多了，直接就拿來(lái)主意，下載下來(lái)，改改就用。

部署的話都差不多，都是在任何服務(wù)上都可以直接使用，而且都沒(méi)有什么依賴。

但是我覺(jué)得VUE的開發(fā)類似于開發(fā)一個(gè)APP，所以他的打包結(jié)果是比純HTML+JS更安全的，相當(dāng)于做過(guò)混淆，因而他發(fā)布后的體積更小。

2、數(shù)據(jù)通訊

HTML+JS 數(shù)據(jù)POST,GET 等基本訪問(wèn)方式，但是如果直接在HTML中使用數(shù)據(jù)判斷，或數(shù)據(jù)循環(huán)輸出必須借助js,jquery等通過(guò)前端處理然后對(duì)id進(jìn)行賦值操作，所以一般只能借助動(dòng)態(tài)語(yǔ)言如php,java,.net等語(yǔ)言環(huán)境進(jìn)行轉(zhuǎn)化，但這樣使得web對(duì)動(dòng)態(tài)語(yǔ)言環(huán)境依賴性過(guò)強(qiáng)，造成后端遷移時(shí)太過(guò)于復(fù)雜，而且這樣的Web一般要求前端和后端部署在一起。

VUE則不依賴于動(dòng)態(tài)語(yǔ)言輸出環(huán)境，只要是雙方約定了數(shù)據(jù)傳輸接口，服務(wù)器放在哪里，不管使用什么后臺(tái)語(yǔ)言都沒(méi)關(guān)系，因而他的靈活性更強(qiáng)。

3、安全性

有些產(chǎn)品有些公司對(duì)語(yǔ)言是有選擇的，主要是不想讓代碼暴露太多，而HTML+JS的方式往往是達(dá)不到要求的，因而現(xiàn)在許多企業(yè)還是在使用桌面軟件的形式，又或者是要你使用對(duì)方的云服務(wù)，而私有云部署則要貴的很多，而且比較貴的軟件還要安裝秘鑰軟件，加密狗等方式，無(wú)非就是防止你將軟件轉(zhuǎn)移或無(wú)限使用或獲取他的核心算法（雖然js也是有混淆方法的，但很少有人會(huì)這么做，我也沒(méi)試過(guò)但是很影響效率）。

以前我在一個(gè)公司就是加班寫了一個(gè)WEB程序里邊有一個(gè)算法是分析公司產(chǎn)品結(jié)構(gòu)的（那時(shí)VUE還不盛行），正好呢又遇到一個(gè)懂點(diǎn)的老板(居然會(huì)用F12)，結(jié)果看到核心代碼了，當(dāng)時(shí)就否定了，改用了WinForm 重寫，那個(gè)辛苦你懂的。

VUE的打包的話，其實(shí)就是根據(jù)在頁(yè)面中所使用到的組件然后根據(jù)你的邏輯關(guān)系等進(jìn)行混淆打包，然后在用戶加載時(shí)按需進(jìn)行加載解析，從某種意義上來(lái)說(shuō)做WEB是一種保護(hù)。我覺(jué)得這與桌面程序及APP打包效果是一樣的(軟件和APP也是可以反編譯嘛，反編譯后的結(jié)果就是混淆)，當(dāng)然不說(shuō)加密混淆了。

現(xiàn)在國(guó)內(nèi)出現(xiàn)了像DCloud、APICloud（雖然這二家經(jīng)常打架，畢竟相似度很高，我不做評(píng)論，但不可否認(rèn)對(duì)一個(gè)只會(huì)寫HTML+JS的人轉(zhuǎn)寫APP是一個(gè)不錯(cuò)的選擇）這些由HTML5開始的跨平臺(tái)軟件也開始支持VUE了。

最后附上VUE打包后的調(diào)試預(yù)覽圖，純HTML的就不多說(shuō)了，自己F12吧。

者 | 紅顏禍水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)出來(lái)，ViewModel 是一個(gè)同步 View 和 Model 的對(duì)象。

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

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

子組件通過(guò)兩種方式接收：可以傳遞任何類型（數(shù)組，對(duì)象，各種數(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) ，父組件接收的時(shí)候需要在父組件中創(chuàng)建的子組件的標(biāo)簽中綁定 Key，格式:@Key=“方法名”，父組件聲明這個(gè)方法，方法帶參數(shù)，這個(gè)參數(shù)就是子組件傳遞的 Value。

詳細(xì)介紹看這篇：Vue子組件向父組件傳值

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

4. Vuex 是什么？哪種功能場(chǎng)景使用它？

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

當(dāng)項(xiàng)目龐大的時(shí)候使用它：

• 需要?jiǎng)討B(tài)的注冊(cè)響應(yīng)式數(shù)據(jù)；

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

• 希望通過(guò)插件，來(lái)更改記錄；方便測(cè)試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。

5. Vuex 有哪幾種屬性？

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

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

• mutations：提交更改數(shù)據(jù)的方法，同步！

• actions：像一個(gè)裝飾器，包裹 mutations，使之可以異步。

• modules：模塊化 Vuex。

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

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

7. 請(qǐng)列舉出3個(gè) Vue 中常見(jiàn)的生命周期鉤子函數(shù)。

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

• created：vue 實(shí)例的數(shù)據(jù)對(duì)象 data 有值了，$el 沒(méi)有。

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

• mounted：vue 實(shí)例掛載完成，data.filter 成功渲染

• beforeUpdate：data 更新時(shí)觸發(fā)。

• updated：data 更新時(shí)觸發(fā)。

• beforeDestroy：組件銷毀時(shí)觸發(fā)。

• destroyed：組件銷毀時(shí)觸發(fā)，vue 實(shí)例解除了事件監(jiān)聽以及 dom 的綁定（無(wú)響應(yīng)了），但 DOM 節(jié)點(diǎn)依舊存在。

8. Vue 生命周期總共有幾個(gè)階段？

• beforeCreate 創(chuàng)建前

• created 創(chuàng)建后

• beforeMount 載入前

• mounted 載入后

• beforeUpdate 更新前

• updated 更新后

• beforeDestroy 銷毀前

• destroyed 銷毀后

9. 說(shuō)出至少 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：?jiǎn)?dòng) vue-cli 開發(fā)環(huán)境的 npm 命令

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

11. 請(qǐng)說(shuō)出 vue-cli 工程中每個(gè)文件夾和文件的用處。

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

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

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

• src文件夾 ：工程項(xiàng)目的源碼以及資源、包括頁(yè)面圖片、路由組件、路由配置、vuex、入口文件等。

• 其他文件：定義的一些項(xiàng)目信息，說(shuō)明等等。

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

• hash 模式：

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

• history 模式：

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

13. 如何解決 Vue 中的 ajax 跨域問(wèn)題？

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

修改 proxyTable: {
'/api':{ //使用 /api 來(lái)代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改變?cè)?br>pathRewrite:{
'^/api':'http://localhost:8082' //路徑重寫
}
}
},

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

14. Vue 打包命令是什么？Vue 打包后會(huì)生成哪些文件？

• npm run build ：Vue 打包命令

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

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

• 異步路由加載

• 不打包庫(kù)文件

• 關(guān)閉 sourcemap

• 開啟 gzip 壓縮

16. scss 是什么？

SCSS 是 Sass 3 引入的新語(yǔ)法，其語(yǔ)法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能，唯一不同之處是 SCSS 需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn)，SCSS 對(duì)空白符號(hào)不敏感。

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

axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以發(fā)送 get，post 請(qǐng)求，正是由于 Vue、React 的出現(xiàn)，促使了 axios 輕量級(jí)庫(kù)的出現(xiàn)

特定：

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

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

• 支持 Promise API

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

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

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

• 能夠取消請(qǐng)求

• 自動(dòng)轉(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 請(qǐng)求

this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});

• 使用 axios 發(fā)送 post 請(qǐng)求 post原生請(qǐng)求在后端是接收不到參數(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è)面應(yīng)用變得易如反掌。包含的功能有：

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

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

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

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

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

• 帶有自動(dòng)激活的 CSS class 的連接

• HTML 5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)

• 自定義的滾動(dòng)條行為

vue-router 組件：

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

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

• < router-view> 路由的顯示

19. 怎么定義 vue-router 的動(dòng)態(tài)路由？怎么獲取傳遞過(guò)來(lái)的動(dòng)態(tài)參數(shù)？

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

20. MVVM 和其他框架 （jQuery）的區(qū)別是什么？哪些場(chǎng)景適合？

• Vue 是數(shù)據(jù)驅(qū)動(dòng)，通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作。

• 處理數(shù)據(jù)交互的時(shí)候挺適合 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ì)劃！我們將用全新的方式來(lái)釋放更多的流量，讓優(yōu)質(zhì)、有深度、豐富有趣的內(nèi)容得到精準(zhǔn)的流量扶持，同時(shí)也幫助創(chuàng)作者和粉絲有更多互動(dòng)和交流。點(diǎn)擊下方圖片了解詳情。

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

?11 國(guó)股市熔斷，“禍及”程序員？！

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

?Soul App 高管被捕，惡意舉報(bào)導(dǎo)致競(jìng)品被下架

?2020 年最新版 68 道Redis面試題，20000 字干貨，趕緊收藏起來(lái)備用！

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

天是2021.7.14,是個(gè)好日子.好久沒(méi)發(fā)布文章了.今天發(fā)布下如何在在html頁(yè)面中使用vue3.義縣游學(xué)電子科技一直以技術(shù)文章為主.以下是h5的頁(yè)面源碼:

<html>

<script src="https://unpkg.com/vue@next"></script>

<body>

<div id="vue">

<div v-html="rhtml"></div>

<props-demo-simple></props-demo-simple>

</div>

</body>

<script>

const htmls={

data(){

return{

rhtml:"<h1>html頁(yè)面中引用VUE3的演示頁(yè)面</h1>",

}

}

}

const app=Vue.createApp(htmls)

// 簡(jiǎn)單語(yǔ)法注冊(cè)或獲取全局組件.注冊(cè)還會(huì)自動(dòng)使用給定的 id 設(shè)置組件的名稱

app.component('props-demo-simple', { data() {

return {

count: 0

}

},

props: ['size', 'myMessage'],template: `

<button v-on:click="count++">

You clicked me {{ count }} times.

</button>`

}

)

app.mount("#vue")

</script>

</html>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運(yùn)行的結(jié)果效果