vue.js-詳解三大流行框架VUE_快速進階前端大咖-Vue基礎
做者 | Jesksonjavascript
來源 | 達達前端小酒館css
Vue概述：
MVX模式簡介，Vue框架簡介，Vue.js的安裝與使用。html
Vue基礎語法：
實例對象，生命週期，模板語法，計算屬性，methods方法前端
Vue渲染：
列表渲染，條件渲染vue
Vue事件與表單：
事件處理，事件對象，事件委派，表單處理java
MVX模式簡介：
MVX框架模式：MVC+MVP+MVVM
MVC:
Model模型+View視圖+Controller控制器node
View經過Controller和Model聯繫，Controller是View和Model的協調者，View和Model不直接聯繫。用戶經過控制器Controller來操做模板從而達到視圖view的變化。webpack
MVP是經過MVC模式演變而來，都是經過Controller/Persenter負責邏輯的處理+Model提供數據+View負責顯示。ios
MVC爲View，Controller，Model三部分。web
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庫。
三大主流框架：
主流的MVVM框架有Angular,React和Vue.js。
Angular是谷歌推出的MVVM框架，功能強大，含有模板，數據雙向綁定，路由，模塊化，服務，自帶了豐富的Angular指令，由谷歌維護。React是由Facebook推出的JavaScript庫，Vue.js是於2014年開發的MVVM框架。
vue.js的安裝
vue.js的下載地址爲
安裝地址：
https://cn.vuejs.org/v2/guide...
一爲：在vue.js的官網上直接下載vue.min.js並用<script>標籤引入。
二爲：利用CDN方式引入Vue.js文件。
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/shell...
webpack地址:
https://doc.webpack-china.org...
瀏覽器：
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永遠式最後的參數，$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（銷燬
❤️ 不要忘記留下你學習的腳印 [點贊 收藏 評論]
做者Info：
【做者】：Jeskson
【原創公衆號】：達達前端小酒館。
【轉載說明】：轉載請說明出處，謝謝合做！~
關於目前文章內容即涉及前端，PHP知識點，若是有興趣便可關注，很榮幸，能被您發現，真是慧眼識英！也感謝您的關注，在將來的日子裏，但願可以一直默默的支持我，我也會努力寫出更多優秀的做品。咱們一塊兒成長，從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。分享 Web 前端相關的技術文章、工具資源、精選課程、熱點資訊。
若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。
請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！
歡迎關注達達的CSDN！
這是一個有質量，有態度的博客
- 1. vue.js-詳解三大流行框架VUE_快速進階前端大咖-Vue基礎
- 2. ****-2小時快速入門：前端火爆Vue框架基礎到進階-Vue
- 3. 前端三大框架Vue框架詳解
- 4. 前端框架vue.js詳解
- 5. vue,react,angular三大web前端流行框架簡單對比
- 6. 前端三大框架（Angular Vue React）
- 7. 01-前端三大框架vue
- 8. 前端三大框架Angular & React & Vue
- 9. 前端三大主流框架
- 10. 一文快速詳解前端框架 Vue 最強大的功能
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • SQL 快速參考 - SQL 教程
- • JDK13 GA發佈：5大特性解讀
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。