作者 | Jeskson
來源 | 達達前端小酒館
Vue概述：
MVX模式簡介，Vue框架簡介，Vue.js的安裝與使用。
Vue基礎語法：
實例對象，生命周期，模板語法，計算屬性，methods方法
Vue渲染：
列表渲染，條件渲染
Vue事件與表單：
事件處理，事件對象，事件委派，表單處理
MVX模式簡介：
MVX框架模式：MVC+MVP+MVVM
MVC:
Model模型+View視圖+Controller控制器
View通過Controller和Model聯系，Controller是View和Model的協調者，View和Model不直接聯系。用戶通過控制器Controller來操作模板從而達到視圖view的變化。
MVP是通過MVC模式演變而來，都是通過Controller/Persenter負責邏輯的處理+Model提供數據+View負責顯示。
MVC為View，Controller，Model三部分。
MVP理解：
Presenter包含UI的處理邏輯，負責與View和model通訊，Model為數據和數據的處理邏輯，只能與Persenter通訊，View負責呈現只能與Persenter通訊
MVVM組成：
View，展示UI，Model為數據模型，ViewModel視圖模型負責綁定控制視圖，使之Model與View關聯，同時降低耦合。
MVC模式和MVVM模式
移動端應用廣泛軟件架構之一的模式：MVC模式。MVC模式分為三部分，Model模型，View視圖，Controller控制器，MVC模式的過程。
將View層展示給用戶，通過HTML頁面接收用戶動作，將指令傳遞給Controller，觸發的業務傳遞給Controller，Controller完成業務邏輯。
MVC模式執行過程：
MVVM模式：
MVVM模式是將MVC模式的Controller改成ViewModel。view的變化會自動更新ViewModel，ViewModel的變化也會自動變化到View層。
view是用來接收用戶請求的，model是處理數據的，不再與view層進行交互數據，viewmodel監聽view層請求的變化，ViewModel和Model層之間進行數據雙向綁定，Model層監聽ViewModel的變化。
MVC模式和MVVM模式的區別：
MVC模式，數據是單向的，由view->Controller->Model->View方向循環，而在MVVM模式中，數據是可以雙向通信，核心是ViewModel對象。
Vue.js是一套用於構建用戶界面的漸進式JavaScript框架，與其它大型框架不同的是，Vue設計為可以自底向上逐層應用，Vue的核心庫只關注視圖層。
目錄結構：
build:項目構建相關代碼
config:配置目錄，包括端口號等
mode_modules:npm加載的項目依賴模塊
src:
assets:放置一些圖片，components:目錄里面放了一些組件文件，App.vue項目入口文件，main.js：項目的核心文件。
static:靜態資源目錄
test:初始測試目錄
index.html：首頁入口文件
package.json:項目配置文件
Vue框架簡介：
Vue是一套構建用戶界面的漸進式框架，Vue只關注視圖層，采用自底向上增量開發的設計，Vue的目標是通過API實現數據綁定和組合視圖組件。
Vue框架的好處：
數據綁定，指令，輕量級，插件化。
Vue掌握Vue基礎知識，Vue框架基礎語法，Vue開發工具，Vue組件，Vue模塊化開發，Vue工程工具，npm/yarn和webpack開發工具，Vue CLI開發工具，Express服務器開發和axios網絡請求，創建Express應用程序，axios發送AJAX請求，Postman插件，Vue路由，單頁面應用SPA，vue-router實現路由機制，Vuex狀態管理，本地存儲，Vue UI庫，Vue中的UI庫。
三大主流框架：
單向數據流是指數據的流向只能由父組件通過props將數據傳遞給子組件，不能由子組件向父組件傳遞數據，要想實現數據的雙向綁定，只能由子組件接收父組件props傳過來的方法去改變父組件的數據，而不是直接將子組件的數據傳遞給父組件。 react本身是單項數據流，但可以在react項目中通過很多操作實現雙向數據綁定。 單向數據量組件props是父級往下傳遞，你不能向上去修改父組件的數據，並且也不能在自身組件中修改props的值。 React不算mvvm，雖然可以實現雙向綁定，在React中實現雙向綁定通過state屬性，但如果將state綁定到視圖中時，直接修改state屬性是不可的，需要通過調用setState去觸發更新視圖，反過來視圖如果要更新也需要監聽視圖變化 然后調用setState去同步state狀態。標准MVVM應該屬於給視圖綁定數據后，操作數據即是更新視圖
Angular是谷歌推出的MVVM框架，功能強大，含有模板，數據雙向綁定，路由，模塊化，服務，自帶了豐富的Angular指令，由谷歌維護。React是由Facebook推出的JavaScript庫，Vue.js是於2014年開發的MVVM框架。
vue.js的安裝
vue.js的下載地址為
https://vuejs.org/js/vue.js
安裝地址：
https://cn.vuejs.org/v2/guide/installation.html
一為：在vue.js的官網上直接下載vue.min.js並用<script>標簽引入。
二為：利用CDN方式引入Vue.js文件。
Vue地址：
https://unpkg.com/vue
利用npm和webpack模塊包形式引入Vue.js文件
創建一個Vue實例：
引入CDN文件，創建Vue實例對象，在HTML文件中添加關聯Vue實例對象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一個Vue實例</title>
<script type="text/javascript"></script>
</head>
<body>
<div id="app">
name={{name}}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 創建一個Vue實例對象
var vm = new Vue({
el: '#app', // el綁定的id為app的div元素
data: {
name: 'vue'
}
});
</script>
</body>
</html>
Vue框架開發工具
開發文檔：
vue地址：
https://cn.vuejs.org/v2/guide
npm地址：
https://www.kancloud.cn/shellway/npm-doc
webpack地址:
https://doc.webpack-china.org//concepts/
瀏覽器：
Chrome瀏覽器
vue-devtools調式工具
代碼工具：
atom,sublime text,visual studio code
基礎語法：
vue實例對象是vue框架的核心
什么是vue實例對象，vue框架的核心是vue實例對象，即是viewmodel對象，vue實例對象是連接view視圖層和model模型層，核心是viewmodel對象。
view層執行一個數據的雙向綁定，view觸發后告訴viewmodel對象的dom listeners事件的監聽機制，從而更新model層中的數據，當model層中的數據發生變化后，交給數據雙向綁定機制，也會告訴view層要更新數據。
vue實例對象的語法：
var vm = new Vue({});
<body>
<div id="app">
name=={{name}}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 創建一個vue實例對象
var vm = new Vue({
// 綁定的dom元素
el: '#app',
data: {
// 雙向數據綁定機制
name: 'da'
}
});
console.log(vm); // 包含一系列屬性
</script>
</body>
</html>
生命周期
vue生命周期是vue實例對象衍生的一個機制，生命周期是vue實例對象創建過程中所實現的回調函數，可以在回調函數中寫代碼，去實現一些所要的功能。
具體的回調函數：
beforeCreate()
vue實例對象創建之前
created()
vue實例對象創建之后
beforeMount()
vue實例對象和文檔節點掛載之前
mounted()
vue實例對象和文檔節點掛載之后
beforeUpdate()
view視圖更新之前
beforeUpdate()
view視圖更新之前
updated()
view視圖更新之后
beforeDestroy()
vue實例對象銷毀之前
destroyed()
vue實例對象銷毀之后
beforeCreate()和created()
vue創建實例對象：
階段一，初始化事件綁定機制，初始化生命周期的循環，初始化后觸發beforeCreate()回調函數。
階段二，初始化注入器，初始化實體對象，此刻vue實例對象已創建完成，初始化后觸發created()回調函數。
beforeCreate():
Vue實例對象創建之前的回調，此時的el屬性和data屬性為空。
created():
Vue實例對象創建后的回調，此時的el屬性為空，data屬性已經存在。
<body>
<div id="app">
name=={{name}}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
name: 'da'
},
// 生命周期回調函數
beforeCreate:function(){
//vue實例對象創建之前的回調
console.log('beforeCreate');
console.log(this.$el); // undefined
console.log(this.$data);
},
created:function(){
// vue實例對象創建之后的回調
console.log('created');
console.log(this.$el); // undefined
console.log(this.$data);
}
});
</script>
</body>
beforeMount()和mounted()
創建el屬性前先執行beforeMount()回調函數，接着創建el屬性同dom進行綁定后，觸發mounted()回調函數。
beforeMount():
view和model綁定完成之前，在vue實例對象和文檔節點掛載前，此時el屬性為綁定之前的值。
mounted():
view和model綁定完成后的回調，在vue實例對象和文檔節點掛載后，此時是el屬性綁定后的值。
<div id="app">
name=={{name}}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
name: 'da'
},
// 生命周期回調函數
beforeMount:function(){
console.log('beforeMount');
console.log(this.$el.innerHTML);
},
mounted:function(){
console.log('mounted');
console.log(this.$el.innerHTML);
}
});
</script>
</body>
beforeMount:
name=={{name}}
Mounted:
name==da
beforeUpdate()和updated()
beforeUpdate():
view視圖更新之前的回調，el屬性為更新前的值。
updated():
view視圖更新之后的回調，el屬性為更新之后的值。
beforeDestroy()和destroyed()
beforeDestroy():
vue實例對象銷毀之前的回調，el屬性和data屬性仍然具有原始值。
destroyed():
vue實例對象銷毀之后的回調，el屬性和data屬性仍然具有原始值，但是后面再次修改model，就不會改變view了。
模板語法
格式：
name = {{name}}
user.name = {{user.name}}
{{name[0]}}
var data={
name: 'da',
user: {
name: 'da',
age: 2
},
names: ['d','a'],
}
var vm = new Vue{(
el:'#app',
data: data
});
<div>
{{html}}
</div>
<div v-html="html"></div>
<script>
// 雙向
var data={
html: '<font color="red">da</font>'
}
var vm = new Vue{(
el:'#app',
data: data
});
v-bind:href="link.link"
:href="link.link"
{{link.name}}
{{link.name}}
{{5+5}}
{{ok?'yes':'no'}}
{{message.split('').reverse().join('')}}
v-bind:id="'list='+id"
var data={
ok: true,
message: 'dada',
id: 1
}
計算屬性
為什么要使用計算屬性，它是用來計算簡單的運算。不能有太多的處理邏輯，會讓模板復雜，難以維護。
<div id="app">
<div>
{{amount}}
</div>
</div>
var data={
count: 5,
price: 10,
discount: 0.8,
freight: 5
}
// 計算屬性
computed:{
// 每個計算屬性值是函數形式，並且有返回值
amount: function() {
// this表示當前vue實例對象
// this.$data 表示當前vue實例對象裝載的雙向綁定數據
// 代理
// this.$data.count <=> this.count
return this.$data.count * this.$data.price*this.$data.discount;
}
}
computed屬性是由一系列json方法組成，表示一系列計算屬性
每個計算屬性是一個function，並定義了一個函數，這個函數必須由return語句返回計算屬性的返回值。
與v-html相比，只是定義的形式不同而已，計算屬性和data屬性的操作一致。
<div>
<span v-html="amount"></span>
</div>
computed: {
amount: function() {
return '<span>' + this.$data.count*this.$data.price + '</span>';
}
}
method方法
methods方法由一系列json方法組成。
methods: {
// 方法，函數，返回值
getNum: function() {
return this.$data.count;
}
}
<div>
{{getNum()}}
</div>
計算屬性和methods方法的區別
本質區別：
計算屬性是再其依賴的關系上，如果依賴發送改變才會重新計算，就是說依賴的data數據發生改變時，才會重新計算。
methods方法無論其依賴的data數據是否發生改變，每一次調用都會重新計算。
vue渲染
數組元素和對象元素渲染
// v-for指令循環一組相同格式的數據
v-for="item in items"
v-for=(item, index) in items
<ul>
<li v-for="(goods,index) in goodslist">
{{index+1}}-{{goods.name}}
</li>
</ul>
v-for指令可以渲染數據元素，也可以渲染JavaScript對象:
(value, key, index) in object
<ul>
<li v-for="goods in goodslist">
<ul>
<li v-for="(value,key,index) in goods">
{{key}}-{{value}}
</li>
</ul>
</li>
</ul>
計算屬性與列表渲染
<li v-for="goods in filterGoodslist">
{{goods.name}}==={{goods.price}}
</li>
var vm = new Vue ({
el: '#app',
data: {
goodslist: {
{name: 'iphone', price: '9999'},
}
},
computed: {
filterGoodslist: function(){
// 渲染filter時一個數組方法，需要接收一個回調函數
return this.goodslist.filter(function(goods){
return goods.price > 50000;
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue數組更新</title>
<script type="text/javascript"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
list: ['1','2','3']
}
});
</script>
</body>
</html>
如何修改數組的元素？
第一種方法：使用Vue.set()或vm對象.$set()形式修改數組元素
第二種方法：使用數組變異方法修改數組元素
Vue.set(vm.list, 0 '10')
"10"
vm.$set(vm.list, 0, '20')
"20"
數組變異方法：
改變原始數組內容的方法，就是JavaScript的基本內容。
數組變異方法：
push()，pop()，unshift()，shift()
sort()，reverse()
splice()
push()：
在數組元素末尾添加元素
pop():
在數組元素末尾刪除元素
vm.list.pop() // 數組元素末尾刪除
vm.list.push('m4') // 數組元素末尾添加元素
unshift()
在數組元素開頭添加元素
shift()
在數組元素開頭刪除元素
vm.list.unshift('da')
vm.list.shift()
sort()
對數組元素進行排序
reserve()
對數組元素進行翻轉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-排序</title>
<script type="text/javascript"></script>
</head>
<body>
<div id="app">
<h2>達達前端</h2>
<div>
<ul>
<li v-for="item in users">
{{item.name}}-{{item.age}}
</li>
</ul>
</ul>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
users: {
{name:'da',age:1},
{name:'dada',age:2},
}
}
});
</script>
</body>
</html>
vm.users.sort(function(a,b){return a.age-b.age})
添加或刪除數組多個元素
splice():
添加或刪除數組多個元素
vm.list.splice(3,0,'23') // 添加
[]
vm.list.splice(1,1) // 刪除
{'da'}
splice從數組種刪除元素，array.splice
刪除位置下標，刪除元素個數
splice向數組種添加元素，array.splice
添加位置下標，0, 待添加的元素
條件渲染
v-if指令和v-show指令
判斷是否登錄：
<body>
<div id="app">
<div>
<div v-if="isLogined==true">
歡迎你
</div>
<div v-else>
<a href="#">登錄</a>
</div>
</div>
</div>
....
<script>
var vm = new Vue({
el: '#app',
data: {
// 用戶沒有處於登錄狀態
isLogined: false
}
});
</script>
v-if，v-else-if，v-else指令
v-for指令具有更高的優先級，比v-if，注意這里如果兩者合用，那么v-if只是重復循環而已。
template標簽，既是一個整體，又是一個模板，template沒有實際意義。
如何讓v-if指令優先於v-for指令呢？
<template v-if="users.length>1">
<ul>
<li v-for="item in user">
...
</li>
</ul>
</template>
v-if指令在查看瀏覽器中，HTML的元素的，為否，而v-show指令在div的樣式中: display:none。v-show指令式切換渲染css屬性的display，v-if指令決定是否生成dom渲染元素。
vue事件和表單
事件處理的語法格式：
v-on:事件名，@事件名綁定事件處理函數，可用的事件，兩大類分別為鼠標事件和鍵盤事件。
<button v-on:click="count += 1">+1</button>
<button @click="count -= 1">-1</button>
count={{count}}
var vm = new Vue({
el: '#app',
data: {
count: 0
}
});
// 或者
methods: {
increment: function() {
}
}
鼠標事件：
click鼠標單擊
dbclick鼠標雙擊
mouseover鼠標經過
mouseout鼠標移開
鍵盤事件
keydown:
鍵盤按下
keyup:
鍵盤彈起
<input type="text" @keyup = "keyupevent"/>
keyupevent: function() {
}
鼠標事件：
stop阻止事件冒泡
prevent阻止事件默認行為
capture捕獲內部元素事件
once只執行一次事件
鍵盤事件：
keyCode值
keyCode別名
指定按鍵觸發事件
<a href="test.html" @click.prevent="aclick">text
</a>
事件對象
event事件對象表示當前事件的狀態
event.target
獲取觸發事件的HTML的元素
event.type
得到觸發事件的類型
event.type()
觸發事件的類型
event.target()
觸發事件的HTML元素
event.preventDefault()
阻止事件的默認行為
event.stopPropagation()
阻止事件冒泡
傳遞事件對象，手動傳遞，如果有多個參數，那么 event表示當前的使用對象
接收事件對象：
dada: function(event){
// event表示接收到的事件對象
}
事件委派
提高應用程序的性能：借助事件對象上線一個事件委托機制。
那么什么是事件委派機制呢？
就是借助event事件對象，在父元素上綁定事件處理函數，不是在子元素上。
<table @click="edit($event)">
<tr v-for="(goods,index) in list">
這種方式，就連點擊單元格都會觸發事件。
做個判斷就行：（對事件對象進行判斷）
methods: {
dada: function(event) {
if(event.target.nodeName.toLowerCase() == "a") {
...
}
}
<a href="#" v-bind:data-index="index">dada</a>
methods: {
da:function(event){
if(event.target.nodeName.toLowerCase() == 'a') {
...
console.log(event.target.dataset.index);
}
}
}
表單處理
<input type="radio" v-model="gender" name="gender"
value="man">
<input type="radio" v-model="gender" name="gender"
value="woman">
<select v-model="province">
<option value="1"> d </option>
<option value="2"> a </option>
</select>
focus
文本框獲取光標
blur
文本框失去光標
click
選中某一個單選按鈕或復選框
change
切換下拉列表選項
submit
提交按鈕
分頁應用
每一頁顯示10條數據，當前頁page參數
第一頁從0,…,9 數組數據下標是從0開始的
開始下標：offset = (page-1)*pagesize
結束下標: offset + pagesize
items.slice(offset, offset+pagesize)
分頁：
總頁碼 = Math.ceil(總記錄數/每一頁記錄數)
生命周期的四個階段：
create（初始）、mount（加載）、update（更新）、destroy（銷毀）
var data={
items: [
{name: 'da', age： 1 }
],
item: {
name: '',
status: 1
},
pagesize； 5，
page:1
};
computed: {
// 總頁數
pagecount: function() {
return Math.ceil(this.items.length/this.pagesize);
},
// 當前
pageitems: function() {
var offset=(this.page-1) * this.pagesize;
return this.items.slice(offset, offset + this.pagesize);
}
},
methods: {
// 刪除
delitem(index){
this.item[index].status=3;
}
jumpToPage(p) {
this.page = p;
},
lastpage() {
this.page--;
},
nextpage(){
this.page++;
}
}
vue生命周期可以分為八個階段，分別是：
beforeCreate（創建前）、created（創建后）、beforeMount(載入前)、mounted（載入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（銷毀前）、destroyed（銷毀
關於目前文章內容即涉及前端，PHP知識點，如果有興趣即可關注，很榮幸，能被您發現，真是慧眼識英！也感謝您的關注，在未來的日子里，希望能夠一直默默的支持我，我也會努力寫出更多優秀的作品。我們一起成長，從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈現給小伙伴。分享 Web 前端相關的技術文章、工具資源、精選課程、熱點資訊。
感謝閱讀，原創不易，喜歡就點個[贊] or [轉發分享]，這是我寫作最大的動力。
意見反饋
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
點關注，有好運