vue.js-詳解三大流行框架VUE_快速進階前端大咖-Vue基礎

時間 2019-12-19

標籤 vue.js vue 詳解三大流行框架快速進階前端基礎欄目 JavaScript 简体版

原文原文鏈接

做者 | 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的下載地址爲

vuejs.org/js/vue.js

安裝地址：

cn.vuejs.org/v2/guide/in…

一爲：在vue.js的官網上直接下載vue.min.js並用<script>標籤引入。

二爲：利用CDN方式引入Vue.js文件。

Vue地址：

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地址： cn.vuejs.org/v2/guide

npm地址： www.kancloud.cn/shellway/np…

webpack地址: 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視圖更新以前

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 [轉發分享]，這是我寫做最大的動力。