HTML+JS框架下開發(fā)與VUE框架下開發(fā)最基礎(chǔ)的區(qū)

HTML+JS框架下開發(fā)與VUE框架下開發(fā)最基礎(chǔ)的區(qū)別

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

1、什么是vue

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

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

2、什么是HTML(HTML5)

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

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

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

1、開發(fā)和部署

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

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

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

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

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

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

3、安全性

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

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

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

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

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

者 | 紅顏禍水nvn

責(zé)編 | 唐小引

出品 | CSDN 原力計劃

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設(shè)計思想。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è)計的狀態(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è)計模式的。

本文為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)作者和粉絲有更多互動和交流。點(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ò)的舊問題

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

<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頁面中引用VUE3的演示頁面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 簡單語法注冊或獲取全局組件.注冊還會自動使用給定的 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é)果效果

在線咨詢

上一篇：原本，一鍵去除文件圖片灰底，輕松還原文檔本來模樣
下一篇：CSS 偽元素基礎(chǔ)知識：first-line、fir

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML+JS框架下開發(fā)與VUE框架下開發(fā)最基礎(chǔ)的區(qū)

您的項(xiàng)目需求