姓名：王澤華；學(xué)號(hào)：22011211045；學(xué)院：通信工程學(xué)院
原文鏈接：https://blog.csdn.net/qq_66587374/article/details/124411094
【嵌牛導(dǎo)讀】在初步學(xué)習(xí)前端課程的時(shí)候，相信大家都知道Vue這個(gè)名字，至于Vue到底是什么卻不得而知，又或者知道Vue是前端的一大流行框架，那么它到底是用來(lái)干啥的呢，對(duì)于其他框架而言Vue又有什么優(yōu)勢(shì)和特點(diǎn)，學(xué)習(xí)前端的人為什么都要去學(xué)習(xí)Vue呢？對(duì)于這些答案，相信大家都想去親自揭開(kāi)它的謎底，但是如果你未學(xué)過(guò)JavaScript和jQuery那么，請(qǐng)先不要學(xué)習(xí)Vue，因?yàn)闆](méi)有根基是非常晦澀難學(xué)的。反之學(xué)習(xí)的時(shí)候會(huì)特別輕松，所以希望大家學(xué)習(xí)Vue的時(shí)候，盡量都有javascript和jQuery庫(kù)類的基礎(chǔ)。下面將具體介紹Vue的基本知識(shí)。
【嵌牛鼻子】Vue、JavaScript、jQuery
【嵌牛提問(wèn)】Vue是干什么的？如何使用Vue？
一、Vue是什么？
1.簡(jiǎn)介
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
2.什么是漸進(jìn)式框架？
說(shuō)白了，就是框架分層。那是如何分層的呢？就像《功夫》里面黃圣依手里拿的棒棒糖一樣：最核心的是視圖層渲染，然后往外是組件機(jī)制，在此基礎(chǔ)上再加入路由機(jī)制，再加入狀態(tài)管理，最外層是構(gòu)建工具，vue和react都是如此。
Vue分層：聲明式渲染>組件系統(tǒng)>客戶端路由>集中式狀態(tài)管理>項(xiàng)目構(gòu)建
3.發(fā)展史
創(chuàng)始人：尤雨溪
官網(wǎng)：Vue.js - 漸進(jìn)式 JavaScript 框架 | Vue.js
1.2013年，在 Google 工作的尤雨溪，受到 Angular 的啟發(fā)，開(kāi)發(fā)出了一款輕量框架，最初命名為 Seed 。
2.2013年12月，更名為 Vue，圖標(biāo)顏色是代表勃勃生機(jī)的綠色，版本號(hào)是 0.6.0。
3.2014.01.24，Vue 正式對(duì)外發(fā)布，版本號(hào)是 0.8.0。
4.2014.02.25，0.9.0 發(fā)布，有了自己的代號(hào)：Animatrix，此后，重要的版本都會(huì)有自己的代號(hào)。
5.2015.06.13，0.12.0，代號(hào)Dragon Ball，Laravel 社區(qū)（一款流行的 PHP 框架的社區(qū)）首次使用 Vue，Vue 在 JS 社區(qū)也打響了知名度。
6.2015.10.26，1.0.0 Evangelion 是 Vue 歷史上的第一個(gè)里程碑。同年，vue-router、vuex、vue-cli 相繼發(fā)布，標(biāo)志著 Vue從一個(gè)視圖層庫(kù)發(fā)展為一個(gè)漸進(jìn)式框架。
7.2016.10.01，2.0.0 是第二個(gè)重要的里程碑，它吸收了 React 的虛擬 Dom 方案，還支持服務(wù)端渲染。自從Vue 2.0 發(fā)布之后，Vue 就成了前端領(lǐng)域的熱門話題。
8.2019.02.05，Vue 發(fā)布了 2.6.0 ，這是一個(gè)承前啟后的版本，在它之后，將推出 3.0.0。
9.2019.12.05，在萬(wàn)眾期待中，尤雨溪公布了 Vue 3 源代碼，目前 Vue 3 處于 Alpha 版本。
二、為什么要學(xué)習(xí)Vue？
1.易用：熟悉 HTML 、 CSS 、 JavaScript 知識(shí)后，可快速上手 Vue
2.靈活：在一個(gè)庫(kù)和一套完整框架之間自如伸縮
3.高效：20kB 運(yùn)行大小，超快虛擬 DOM
三、庫(kù)和框架的區(qū)別
1.庫(kù)(Library)，
本質(zhì)上是一些函數(shù)的集合。每次調(diào)用函數(shù)，實(shí)現(xiàn)一個(gè)特定的功能，接著把控制權(quán)交給使用者
? ? ? 代表：jQuery
? ? ? jQuery這個(gè)庫(kù)的核心：DOM操作，即：封裝DOM操作，簡(jiǎn)化DOM操作
? ? ? JavaScript：document.getElementById()
? ? ? jQuery：$('').val()
2.框架(Framework)，
是一套完整的解決方案，使用框架的時(shí)候，需要把你的代碼放到框架合適的地方，框架會(huì)在合適的時(shí)機(jī)調(diào)用你的代碼
? ? ? 代表：vue
? ? ? 框架規(guī)定了自己的編程方式，是一套完整的解決方案
? ? ? 使用框架的時(shí)候，由框架控制一切，我們只需要按照規(guī)則寫(xiě)代碼
? ? ? 框架的侵入性很高(從頭到尾)
3.前端渲染方式
四、什么是MVVM框架
1.MVC框架
MVC是后端分層開(kāi)發(fā)的思想，即 Model-View-Controller 的縮寫(xiě)，就是模型-視圖-控制器，也就是說(shuō)一個(gè)標(biāo)準(zhǔn)的Web 應(yīng)用程序是由三部分組成的：
? ? ? View： 用來(lái)把數(shù)據(jù)以某種方式呈現(xiàn)給用戶。
? ? ? Model ：其實(shí)就是數(shù)據(jù)。
? ? ? Controller ：接收并處理來(lái)自用戶的請(qǐng)求，并將 Model 返回給用戶。
2.MVVM框架
MVVM，一種更好的UI模式解決方案，MVVM通過(guò)數(shù)據(jù)雙向綁定讓數(shù)據(jù)自動(dòng)地雙向同步
? ? ?MVVM ===> M / V / VM
? ? ?M：model數(shù)據(jù)模型（JSON）
? ? ?V：view視圖（HTML）
? ? ?VM：ViewModel 視圖模型
(1) V（修改數(shù)據(jù)） -> M? 將視圖層的數(shù)據(jù)通過(guò)事件將數(shù)據(jù)提交到后端服務(wù)器(前端到后端)
? ? ? $('#btn_login').click(function(){
? ? ? ? ? ? ?通過(guò)ajax將頁(yè)面中的數(shù)據(jù)通過(guò)json格式傳遞到后端服務(wù)器
? ? ? });
?(2) M（修改數(shù)據(jù)） -> V? 將后端數(shù)據(jù)（JSON）通過(guò)賦值的方式在視圖層展現(xiàn)(后端到前端)?
? ? ? 通過(guò)ajax的方式調(diào)用后端的數(shù)據(jù)接口將回傳過(guò)來(lái)的JSON數(shù)據(jù)渲染到頁(yè)面
共性：不管是前端到后端，還是后端到前端，使用傳統(tǒng)的方式都必須首先拿到頁(yè)面的Document元素，只有拿到了頁(yè)面元素才能進(jìn)行后續(xù)操作
五、Vue環(huán)境搭建
1.引入Vue.js
2.下載
(1) cdn下載(需連接網(wǎng)絡(luò))
(2)手動(dòng)下載
3.給HTML元素即視圖添加id屬性
4.Vue實(shí)例，并搭建Vue環(huán)境
? 每個(gè)Vue應(yīng)用都是通過(guò)用Vue構(gòu)造器創(chuàng)建一個(gè)新的Vue實(shí)例開(kāi)始的
? <!-- 指定vue管理內(nèi)容區(qū)域，通常我們也把它叫做邊界，這意味著我們接下來(lái)的改動(dòng)全部在指定的div內(nèi)，div外部不受影響 -->? ?
? <div id="d1">{{message}}</div>?
5.注意
注1：data在組件開(kāi)發(fā)中的寫(xiě)法必須是一個(gè)函數(shù)
注2：vue指令：指的是是帶有“v-”前綴的特殊屬性
注3：用v-on:click指令綁定單擊事件
注4：var vm = new Vue({
? ? ? ? ? ? el：'#ID'? ? ? ? // DOM 元素，掛載視圖模型，
? ? ? ? ? ? data：{},? ? ? ? // 定義屬性，并設(shè)置初始值
? ? ? ? ? ? methods：{}? ? ? // 定義方法，用于事件交互時(shí)使用的函數(shù)?
? ? ? ? });
六、指令（Directives）
1.什么是指令
指令是一個(gè)帶有v-前綴的特殊屬性，那么指令的本質(zhì)就是自定義屬性
指令的格式，以v-開(kāi)頭
指令可帶參數(shù)，也可不帶參數(shù)，比如v-cloak指令就屬于無(wú)參數(shù)的指令
2.雙向數(shù)據(jù)綁定(Vue two way data binding)?
示例1： 數(shù)據(jù)的改變會(huì)引起DOM的改變，DOM的改變也會(huì)引起數(shù)據(jù)的變化
示例2： 只有當(dāng)實(shí)例被創(chuàng)建時(shí)data中存在的屬性才是響應(yīng)式的
示例3：用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定
示例4： this在methods屬性的方法里指向當(dāng)前Vue實(shí)例? ? ?
? ? ? vm.name/vm.$data.name(外部訪問(wèn))? ?
? ? ? this.name(內(nèi)部訪問(wèn))
示例5：用v-once指令進(jìn)行單向綁定，一般不用
