Vue框架---Vue入门
Vue概述
Vue是一個構(gòu)建用戶界面(UI)的[漸進式]JavaScript框架
?
vue.js的核心特點—響應的數(shù)據(jù)綁定
傳統(tǒng)的js操作頁面：在以前使用js操作頁面的時候是這樣的，需要操作某個html元素的數(shù)據(jù)，就的使用js代碼獲取元素然后在處理業(yè)務邏輯
響應式數(shù)據(jù)綁定的方式操作頁面，可以直接使用像下面代碼那樣的寫法就可以將數(shù)據(jù)填充到頁面中
為什么要學習vue
通過學習Vue提供的指令, 很方便的就能把數(shù)據(jù)渲染到頁面上, 不在需要手動操作DOM元素, 前端的Vue之類的框架, 不提倡手動操作DOM元素。
MVVM模式
概述：
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，其核心是提供對View 和 ViewModel 的雙向數(shù)據(jù)綁定，這使得ViewModel 的狀態(tài)改變可以自動傳遞給 View，即所謂的數(shù)據(jù)雙向綁定。
? ?MVVM ===> M / V / VM
? ?M：model數(shù)據(jù)模型（JSON）
? ?V：view視圖（HTML）
? ?VM：ViewModel 視圖模型
V（修改數(shù)據(jù)） -> M ?將視圖層的數(shù)據(jù)通過事件將數(shù)據(jù)提交到后端服務器(前端到后端)
$('#btn_login').click(function(){通過ajax將頁面中的數(shù)據(jù)通過json格式傳遞到后端服務器});M（修改數(shù)據(jù)） -> V ?將后端數(shù)據(jù)（JSON）通過賦值的方式在視圖層展現(xiàn)(后端到前端) ?
? ? ? 通過ajax的方式調(diào)用后端的數(shù)據(jù)接口將回傳過來的JSON數(shù)據(jù)渲染到頁面? ? ?
注：雖然沒有完全遵循MVVM模型，Vue的設計無疑受到了它的啟發(fā)。另外一個js框架“knockout”完全遵循MVVM模型
它有兩個方向：
M ?-> ?VM ?-> ?V
V ?-> ?VM ?-> ?M
????????一是將模型轉(zhuǎn)化成視圖，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。實現(xiàn)的方式是：數(shù)據(jù)綁定。
????????二是將視圖轉(zhuǎn)化成模型，即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)。實現(xiàn)的方式是：DOM 事件監(jiān)聽。
????????這兩個方向都實現(xiàn)的，就是數(shù)據(jù)的雙向綁定。
MVVM的特點：
????????在MVVM的框架下，視圖和模型是不能直接通信的，它們通過ViewModal來通信，ViewModel通常要實現(xiàn)一個observer觀察者，當數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動，這實際上就實現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信。
MVVM的優(yōu)點：
- 低耦合，視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 可重用性，可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
- 獨立開發(fā)，開發(fā)人員可以專注于業(yè)務邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xml代碼。
- 可測試，界面向來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來寫
- 雙向數(shù)據(jù)綁定，它實現(xiàn)了View和Model的自動同步，當Model的屬性改變時，不需要手動操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應View層顯示會自動改變
庫和框架的區(qū)別
庫的英語為 Library ( 簡寫 Lib )，框架的英語為 Framework。
庫是將代碼集合成的一個產(chǎn)品，供程序員調(diào)用。面向?qū)ο蟮拇a組織形式而成的庫也叫類庫。面向過程的代碼組織形式而成的庫也叫函數(shù)庫。在函數(shù)庫中的可直接使用的函數(shù)叫庫函數(shù)。開發(fā)者在使用庫的時候，只需要使用庫的一部分類或函數(shù)，然后繼續(xù)實現(xiàn)自己的功能。
框架則是為解決一個(一類)問題而開發(fā)的產(chǎn)品，框架用戶一般只需要使用框架提供的類或函數(shù)，即可實現(xiàn)全部功能?？梢哉f，框架是庫的升級版。開發(fā)者在使用框架的時候，必須使用這個框架的全部代碼。
Vue引入
1、手動下載
Vue官網(wǎng)下載vue.js（開發(fā)版本）?
起步?
安裝?
下載開發(fā)版本
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="dist/vue.js"></script><!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 --> <script src="dist/vue.min.js"></script>2、cdn下載(需連接網(wǎng)絡)
CDN簡介
CDN是構(gòu)建在網(wǎng)絡之上的內(nèi)容分發(fā)網(wǎng)絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，
? ? ? ? 使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡擁塞，提高用戶訪問響應速度和命中率。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)
?
CDN的全稱：Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。
? ? ? ?
?CDN加速主要是加速靜態(tài)資源，如網(wǎng)站上面上傳的圖片、媒體，以及引入的一些Js、css等文件。?
? ? ? ? CDN加速需要依靠各個網(wǎng)絡節(jié)點，例如100臺CDN服務器分布在全國范圍，從上海訪問，會從最近的節(jié)點返回資源，這是核心。
? ? ? ? CDN服務器通過緩存或者主動抓取主服務器的內(nèi)容來實現(xiàn)資源儲備
? ? ? ? CDN基本原理：將源站內(nèi)容分發(fā)至最接近用戶的節(jié)點，使用戶可就近取得所需內(nèi)容，提高用戶訪問的響應速度和成功率
CDN網(wǎng)址
?找到版本復制標簽或者鏈接
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>Vue指令
- v-once
????????????????這個指令讓視圖只渲染一次，將來就算相應的數(shù)據(jù)發(fā)生變化，也不會重新渲染。該指令主要在希望靜態(tài)顯示不需要更新數(shù)據(jù)的時候使用。
- v-html
????????????????這個指令主要在需要操作原始HTML的時候使用。
- v-bind
????????????????該指令在需要綁定HTML標簽屬性的時候使用。為了方便，該指令還有一個縮寫:，例如:class="myClass"就相當于v-bind:class="myClass"。
- v-on
????????????????該指令主要用于綁定事件處理程序。該指令有縮寫@，例如@click="onClick"就相當于v-on:click="onClick"。
?v-show、v-if、v-else和v-else-if
????????????????這幾個指令主要用于條件渲染，將在后面進行介紹。
- v-for
????????????????該指令用于渲染整個列表，將在后面進行介紹。 - v-model
????????????????該指令可以讓頁面元素和數(shù)據(jù)進行雙向綁定。默認情況下數(shù)據(jù)和頁面元素是單向綁定的，使用該指令可以讓其變成雙向綁定。該指令主要用于處理表單等場景。
Vue實例
每個Vue應用都是通過用Vue構(gòu)造器創(chuàng)建一個新的Vue實例開始的
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body> <div id="app"><h1>{{title}}</h1></div></body><script>//每一個Vue實例都是從new構(gòu)造函數(shù)開始!!var vm=new Vue({el:"#app", // DOM 元素，掛載視圖模型，data:function(){return{title:'hellow Vue！！',data:new Date().getTime()}},methods:{ // 定義方法，用于事件交互時使用的函數(shù) }})</script> </html>注意事項：
1、指定vue管理內(nèi)容區(qū)域，通常我們也把它叫做邊界，這意味著我們接下來的改動全部在指定的div內(nèi)，div外部不受影響
錯誤演示
<body> <div id="app"><!-- 指定vue管理內(nèi)容區(qū)域，通常我們也把它叫做邊界，這意味著我們接下來的改動全部在指定的div內(nèi)，div外部不受影響 --><h1>{{title}}</h1><h1>{{data}}</h1><button v-on:click="doClick(2)">點我</button></div><h1>{{title}}</h1></body><script>var vm=new Vue({el:"#app",data:function(){return{title:'hellow Vue！！',data:new Date().getTime()}},methods:{}})</script>我們的所有的代碼都必須寫在div中，寫在div中的title有值，而在div外面的沒有
2、data在組件開發(fā)中的寫法必須是一個函數(shù)
正確演示
<script>//每一個Vue實例都是從new構(gòu)造函數(shù)開始!!var vm=new Vue({el:"#app", // DOM 元素，掛載視圖模型，// 方式一/* data:{ // 定義屬性，并設置初始值title:'hellow Vue！！',data:new Date().getTime()}, */// 方式二：函數(shù)方式(在組件開發(fā)中的寫法必須是一個函數(shù))data:function(){return{title:'hellow Vue！！',data:new Date().getTime()}},methods:{ // 定義方法，用于事件交互時使用的函數(shù) doClick:function(num){alert('hellow vue!!!'+num);},doRegster(){}}})</script>在開發(fā)中，使用必須使用第二種data函數(shù)方式
3、vue指令：指的是是帶有“v-”前綴的特殊屬性
<button v-on:click="doClick(2)">點我</button>4、用v-on:click指令綁定單擊事件
<body> <div id="app"><!-- 指定vue管理內(nèi)容區(qū)域，通常我們也把它叫做邊界，這意味著我們接下來的改動全部在指定的div內(nèi)，div外部不受影響 --><h1>{{title}}</h1><h1>{{data}}</h1><button v-on:click="doClick(2)">點我</button></div><h1>{{title}}</h1></body><script>//每一個Vue實例都是從new構(gòu)造函數(shù)開始!!var vm=new Vue({el:"#app", data:function(){return{title:'hellow Vue！！',data:new Date().getTime()}},methods:{ doClick:function(num){alert('hellow vue!!!'+num);},doRegster(){}}})</script>示例
雙向數(shù)據(jù)綁定(Vue two way data binding) ?
- 數(shù)據(jù)的改變會引起DOM的改變，DOM的改變也會引起數(shù)據(jù)的變化
- ?只有當實例被創(chuàng)建時data中存在的屬性才是響應式的?
- ?用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定
- ? this在methods屬性的方法里指向當前Vue實例 ? ? ?
? ? ? ????????vm.name/vm.$data.name(外部訪問) ? ?
? ? ? ????????this.name(內(nèi)部訪問)
- ? 用v-once指令進行單向綁定，一般不用
?
注：
- console對象可以使用printf風格的占位符。只支持字符（%s）、整數(shù)（%d或%i）、浮點數(shù)（%f）和對象（%o）四種
- Vue實例還暴露了一些有用的實例屬性與方法。它們都有前綴$，以便與用戶定義的屬性區(qū)分開來
?代碼演示
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body> <div id="app"><h1>{{data}}</h1><!-- 示例一 數(shù)據(jù)的改變會引起DOM的改變，DOM的改變也會引起數(shù)據(jù)的變化--><input type="text" v-model="num" /><button v-on:click="doKeyup()">提交</button><!-- 示例二 只有當實例被創(chuàng)建時data中存在的屬性才是響應式的 -->{{name}}<br /><br /><!-- 用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定 --><input type="text" v-model="num" /><button v-on:click="doIncrement()">++++</button><br><!-- 示例五 用v-once指令進行單向綁定 --><span v-once>{{num}}</span></div></body><script>var vm=new Vue({el:"#app", data:function(){return{title:'hellow Vue！！',data:new Date().getTime(),num:10,name:'ls'}},methods:{doKeyup:function(){console.log(this.num);},doIncrement:function(){this.num=parseInt(this.num)+1; console.log(vm.num);//示例四： 局部訪問和全局訪問//局部訪問：this//全局訪問：vmconsole.log("num=%d","name%=s",this.num,this.name);}}})vm.name='zs';</script> </html>Vue生命周期
?????????Vue實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。
每一個組件或者實例都會經(jīng)歷一個完整的生命周期，總共分為三個階段：初始化、運行中、銷毀。
-
實例、組件通過new Vue() 創(chuàng)建出來之后會初始化事件和生命周期，然后就會執(zhí)行beforeCreate鉤子函數(shù)，這個時候，數(shù)據(jù)還沒有掛載呢，只是一個空殼，無法訪問到數(shù)據(jù)和真實的dom，一般不做操作
-
掛載數(shù)據(jù)，綁定事件等等，然后執(zhí)行created函數(shù)，這個時候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會觸發(fā)updated函數(shù)，在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
-
接下來開始找實例或者組件對應的模板，編譯模板為虛擬dom放入到render函數(shù)中準備渲染，然后執(zhí)行beforeMount鉤子函數(shù)，在這個函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染,在這里也可以更改數(shù)據(jù)，不會觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
-
接下來開始render，渲染出真實dom，然后執(zhí)行mounted鉤子函數(shù)，此時，組件已經(jīng)出現(xiàn)在頁面中，數(shù)據(jù)、真實dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了，可以在這里操作真實dom等事情...
-
當組件或?qū)嵗臄?shù)據(jù)更改之后，會立即執(zhí)行beforeUpdate，然后vue的虛擬dom機制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒
-
當更新完成后，執(zhí)行updated，數(shù)據(jù)已經(jīng)更改完成，dom也重新render完成，可以操作更新后的虛擬dom
-
當經(jīng)過某種途徑調(diào)用$destroy方法后，立即執(zhí)行beforeDestroy，一般在這里做一些善后工作，例如清除計時器、清除非指令綁定的事件等等
-
組件的數(shù)據(jù)綁定、監(jiān)聽...去掉后只剩下dom空殼，這個時候，執(zhí)行destroyed，在這里做善后工作也可以
代碼 提取碼：xo7p
至此，vue入門介紹完畢，由于作者水平有限難免有疏漏，歡迎留言糾錯。
總結(jié)
以上是生活随笔為你收集整理的Vue框架---Vue入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在安卓上部署服务器--ksweb+wor
- 下一篇： Vue框架详解（适合Java学习者）