大綱
一、Vue介紹
? ? ? ? ???1.1? 什么是Vue
? ? ?vue是一個(gè)構(gòu)建用戶界面UI的漸進(jìn)式j(luò)avascript框架，漸進(jìn)式的框架是指可以一步一步的由淺入深的去使用該框架。
? ? ?vue官網(wǎng)： https://cn.vuejs.org/
? ? ? ? ???1.2 Vue的優(yōu)點(diǎn)?
???1、體積小
?? ?壓縮后33k左右，體積小意味著下載速度很快???2、更高的運(yùn)行效率
?? ?基于虛擬dom，一種預(yù)先通過javascript進(jìn)行各種計(jì)算，把最終的DOM操作計(jì)算出來并進(jìn)行優(yōu)化的技術(shù)???3、雙向數(shù)據(jù)綁定
???4、生態(tài)豐富，學(xué)習(xí)比較簡(jiǎn)單
? ? ? ? ??? 1.3 安裝vue的方式 （使用一個(gè)框架，第一步 下載安裝）
???1、直接CDN引入（需要網(wǎng)絡(luò)）
?? ?<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
?? ?<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
?? ?<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
?? ?<script src="https://cdn.jsdelivr.net/npm/vue"></script>???2、手動(dòng)下載和引入
?? ?開發(fā)環(huán)境：https://vuejs.org/js/vue.js
?? ?生產(chǎn)環(huán)境：https://vuejs.org/js/vue.min.js? 進(jìn)入官網(wǎng) 下載vue.js?
?
???3、npm安裝
?拓展（CDN加速）
?? ??? 簡(jiǎn)介：CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)，CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。? ? ?? CDN加速：主要是加速靜態(tài)資源，如網(wǎng)站上面上傳的圖片、媒體，以及引入的一些Js、css等文件。CDN加速需依靠各個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)，例如：120臺(tái)CDN服務(wù)器分布在全國范圍，從北京訪問，則會(huì)從最近的節(jié)點(diǎn)返回資源，這是核心。
? ? ?? CDN服務(wù)器通過緩存或者主動(dòng)抓取主服務(wù)器的內(nèi)容來實(shí)現(xiàn)資源儲(chǔ)備。
? ? ?? CDN基本原理：將源站內(nèi)容分發(fā)至最接近用戶的節(jié)點(diǎn)，使用戶可就近取得所需內(nèi)容，提高用戶訪問的響應(yīng)速度和成功率。
? ? ?? 優(yōu)勢(shì)：可以讓用戶就近訪問資源
二、庫和框架的區(qū)別
??????????庫：本質(zhì)上是一些函數(shù)的集合
? ? ? ???框架
?? ?框架是一套完整的解決方案，使用框架是需要遵循框架的規(guī)則，將代碼放入框架的合適位置，框架在合適的時(shí)候調(diào)用代碼。
三、Vue案例01
注意：vue有兩種開發(fā)方式，一種是直接頁面開發(fā)，一種是工程級(jí)開發(fā)，本示例使用的是直接頁面開發(fā)方式。
運(yùn)用工具：WebStorm????????
???1、創(chuàng)建Vue項(xiàng)目? (VueDay01)
????2、將從官網(wǎng)中下載的vue.js放到j(luò)s目錄下
????3、新建一個(gè)用來存放html文件的目錄，創(chuàng)建 HelloVue.html 頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--{{}}:插值-->
<div id="app">{{message}}</div>
<!--未交給vue實(shí)例管理-->
<div>{{message}}</div>
<!--引入vue,即可以使用vue.js中相關(guān)的東西了-->
<script src="../js/vue.js"></script>
<script>
//創(chuàng)建一個(gè)vue實(shí)例(new Vue在vue.js中定義了)，可以有一個(gè)參數(shù)用于掛載元素
const app = new Vue({
el: '#app', //用于掛載要管理的元素
data:{ //定義數(shù)據(jù)
message: '青山不改，綠水長(zhǎng)流'
}
})
</script>
</body>
</html>new Vue：來源于vue.js內(nèi)部定義的，故可以new出來
let(變量)：可重新賦值
const(常量)：不可重新賦值
在ES6中一般不用Var，因?yàn)樗娜毕萦悬c(diǎn)多，無變量作用域
? 編程范式：
?????????? 聲明式編程
????????????????? 優(yōu)勢(shì)：可以真正做到 數(shù)據(jù)(data:{})和界面(div) 完全分離?
? ? ? ? ???命令式編程
? ? ? ????????????循序漸進(jìn)的，一步一步來的，例如：若你要煮飯，必須有大米，然后放在電飯鍋中清洗，再煮。
?原生js的寫法（編程范式：命令式編程）
? ? 1、創(chuàng)建div元素，設(shè)置id屬性
? ? 2、定義一個(gè)變量為message
? ? 3、將定義的message變量放在前面的div元素中顯示
? ? 4、修改massage的數(shù)據(jù)
? ? 5、將修改后的數(shù)據(jù)再次替換到div元素中?
展示：
不改變頁面的結(jié)構(gòu)，在控制臺(tái)通過app.message ='XXX'?動(dòng)態(tài)修改值文章來源：http://www.zghlxwxcb.cn/news/detail-436990.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-436990.html
到了這里，關(guān)于Vue入門簡(jiǎn)介【第一篇】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
