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