Vue.js基礎知識點總結

時間 2020-07-08

標籤 vue.js vue 基礎知識總結欄目 JavaScript 简体版

原文原文鏈接

Vue基礎

邂逅Vuejs

1.認識Vuejs

Vue是一個漸進式框架, 什麼是漸進式的呢?
- 聲明式渲染→組件系統→客戶端路由→集中式狀態管理→項目構建
- 漸進式意味着你能夠將Vue做爲你應用的一部分嵌入其中，帶來更豐富的交互體驗。
Vue有不少特色和Web開發中常見的高級功能
- 解耦視圖和數據
- 可複用的組件
- 前端路由技術
- 狀態管理
- 虛擬DOM

2.Vue初體驗

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title>  <!--一、導入Vue的包-->  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body>  <!--這個div區域就是MVVM中的 View-->  <div id="app">  {{message}}  </div> </body> <script>  // 二、建立一個Vue的實例  var app = new Vue({  el: '#app', //用於掛載要管理的元素  data: {// 定義數據  message: '學習Vue.js'  }  }); </script> </html> 複製代碼

3.Vue中的MVVM

View層
- 視圖層
- 前端開發中, 一般就是DOM層
- 主要的做用是給用戶展現各類信息
Model層
- 數據層
- 數據多是咱們固定的死數據, 更多的是來自咱們的服務器, 從網絡上請求下來的數據
VueModel層
- 視圖模型層
- 視圖模型層是View和Model溝通的橋樑
- 一方面它實現了 Data binding, 也就是數據綁定, 將Model的改變實時的反應到了View中
- 另外一方面它實現了DOM Listener，也就是DOM監聽，當DOM發生一些事件(點擊、滾動、touch等)時，能夠監聽到，並在須要的狀況下改變對應的Data。

4.Vue實例傳入的options

目前掌握

屬性名	類型	做用
`el`	類型: string \| HTMLElement	決定Vue實例會管理哪個DOM
`data`	類型: Object \| Function (組件當中data必須是一個函數)	Vue實例對應的數據對象
`methods`	類型: { [key: string]: Function }	定義屬於Vue的一些方法, 能夠再其餘地方調用, 也能夠在指令中使用

5.Vue生命週期

官方圖

插值指令

1.Mustache

插值表達式 {{}}

數據綁定最多見的形式就是使用「Mustache」語法（雙大括號）的文本插值。例如：javascript
<span>Message: {{ msg }}</span> 複製代碼
Mustache 標籤將會被替代爲對應數據對象上 msg 屬性（msg定義在data對象中）的值。css

不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會自動更新。html

語法	`{{}}`JavaScript 表達式支持
普通表達式	{{ number + 1 }}
三元表達式	{{ ok ? 'YES' : 'NO' }}
三元表達式	{{ name == 'smyhvae' ? 'true' : 'false' }}
調用方法	{{ message.split('').reverse().join('') }}

2.v-once

該指令後面不須要跟任何表達該指令表示元素只渲染一次，不會隨着數據的改變而改變。前端

<h2 v-once>{{message}}</h2>
複製代碼

3.v-html

解析數據中的html代碼，渲染到頁面中vue

<h2 v-html="url"></h2>
複製代碼

4.v-text

v-text做用和Mustache比較類似：都是用於將數據顯示在界面中, 不一樣的是 v-text 是寫在屬性中 v-text一般狀況下，接收一個string類型java

<h2 v-text="text"></h2>
複製代碼

5.v-pre

v-pre用於跳過這個元素和它子元素的編譯過程，用於顯示本來的Mustache語法。web

<h2 v-pre>{{message}}</h2>
複製代碼

6.v-cloak

在某些狀況下，咱們瀏覽器可能會直接顯然出未編譯的Mustache標籤。 v-cloak指令和CSS 規則一塊兒用的時候，可以解決插值表達式閃爍的問題（即：能夠隱藏未編譯的標籤直到實例準備完畢）算法

<!-- 在vue解析以前, div中有一個屬性v-cloak 在vue解析以後, div中沒有一個屬性v-cloak --> <div id="app" v-cloak>  <h2>{{message}}</h2> </div> 複製代碼

總結

Mustache: {{}}語法, 能夠寫變量/邏輯表達式/計算值...
v-once : 元素只渲染一次，不會隨着數據的改變而改變。
v-html="" : 解析數據中的html代碼，渲染到頁面中
v-text="msg": 寫在屬性當中, 將數據顯示在界面中
v-pre: 原文輸出, 顯示本來的Mustache語法
v-cloak : 通常配合CSS規則一塊兒使用, 夠解決插值表達式閃爍的問題

v-bind綁定屬性

1.v-bind介紹

前面咱們學習的指令主要做用是將值插入到咱們模板的內容當中。
可是，除了內容須要動態來決定外，某些屬性們也但願動態來綁定。
做用：能夠給html元素或者組件動態地綁定一個或多個特性，例如動態綁定 style和 class
- 好比動態綁定a元素的href屬性
- 好比動態綁定img元素的src屬性
這個時候，咱們可使用v-bind指令：
- 做用：動態綁定屬性
- 縮寫： :
- 預期：any (with argument) | Object (without argument)
- 參數：attrOrProp (optional)

2.v-bind綁定class

綁定class有兩種方式npm

對象語法

數組語法

對象語法
- 對象語法的含義是 :class後面跟的是一個對象。

<!-- 用法一：直接經過{}綁定一個類 -->
<h2 :class="{'active': isActive}">Hello World</h2>   <!-- 用法二：也能夠經過判斷，傳入多個值 --> <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>   <!-- 用法三：和普通的類同時存在，並不衝突 --> <!--注：若是isActive和isLine都爲true，那麼會有title/active/line三個類--> <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>   <!-- 用法四：若是過於複雜，能夠放在一個methods或者computed中 -->  <!--注：classes是一個計算屬性 --> <h2 class="title" :class="classes">Hello World</h2> 複製代碼

數組語法
- 數組語法的含義是 :class後面跟的是一個數組。

<!-- 1. ['active','news'] 當字符串使用 -->
<h2 class="title" :class="['active','news']">{{message}}</h2>  <!-- [active, new] 當變量使用 --> <h2 class="title" :class="[active,news]">{{message}}</h2>  <!-- 3. 函數返回值使用 --> <h2 class="title" :class="getClasses()">{{message}}</h2> 複製代碼

3.v-bind綁定style

咱們能夠利用v-bind:style來綁定一些CSS內聯樣式數組
綁定class有兩種方式
- 對象語法
- 數組語法
對象語法
- style後面跟的是一個對象類型
- 對象的 key是css屬性名
- 對象的 value是具體賦的值, 能夠來自 data中的屬性

:style="{color: currentColor, fontSize: fontSize + 'px'}" 
複製代碼

數組語法
- style後面跟的是一個數組類型, 多個值以 , 分隔

<div v-bind:style="[baseStyles, fontColor]"></div>
/* js */ baseStyle: {background: 'lime'}, fontSize: {fontSize: '80px'} 複製代碼

computed計算屬性

1.基本概念

計算屬性出現的目的是解決模板中放入過多的邏輯會讓模板太重且難以維護的問題
計算屬性是基於它們的響應式依賴進行緩存的
在某些狀況，咱們可能須要對數據進行一些轉化後再顯示，或者須要將多個數據結合起來進行顯示
- 好比咱們有 firstName和 lastName兩個變量，咱們須要顯示完整的名稱。
- 可是若是多個地方都須要顯示完整的名稱，咱們就須要寫多個 {{firstName}} {{lastName}}

將上面代碼轉換成計算屬性

/* html */ 
<h2>{{fullNmae}}</h2>  /* js */ computed: {  fullNmae: function () {  return this.firstNmae + ' ' + this.lastNmae;  }  } 複製代碼

2.計算屬性的setter和getter

每一個計算屬性都包含一個 getter和一個 setter
- 在上面的例子中，咱們只是使用 getter來讀取。
- 在某些狀況下，你也能夠提供一個setter方法（不經常使用）。
- 在須要寫setter的時候，代碼以下：

展開查看

3.計算屬性的緩存

methods和computed區別
- methods裏面的數據無論發沒發生變化, 只要調用了都會執行函數(有的時候數據沒發生變化咱們不但願調用函數)
- computed計算屬性會進行緩存, 若是數據沒發生變化,函數只會被調用一次(數據發生變化纔會調用函數)
總結:
- methods無論數據發沒發生變化都會調用函數
- computed只有在依賴數據發生變化時纔回調函數

事件監聽指令

在前端開發中，咱們須要常常和用戶交互
- 這個時候咱們就必須監聽用戶的發生時間，好比點擊, 拖拽事件等等
v-on 介紹
- 做用: 綁定事件監聽器
- 縮寫: @

1.v-on參數

當 methods中定義方法, 以供 @click調用時, 須要注意參數問題
狀況一: 若是該方法不須要額外參數, 方法後 ()能夠省略
- 沒有傳入參數, 接收形參時默認會將原生事件 event參數傳遞進去
狀況二: 若是須要同時傳入某個參數, 同時須要 event時, 能夠經過 $event傳入事件

2.v-on修飾符

v-on 提供了不少事件修飾符來輔助實現一些功能。事件修飾符有以下

修飾符	做用
.stop	阻止冒泡。本質是調用 event.stopPropagation()
.prevent	阻止默認事件行爲本質是調用 event.preventDefault()
.{keyCode \| keyAlias }	當事件是從特定鍵觸發時才觸發回調
.once	事件只觸發一次

條件渲染指令

1.vi-f與v-else-if與v-else

Vue的條件指令能夠根據表達式的值在DOM中渲染或銷燬元素或組件

<h2 v-if="score>=90">優秀</h2>
 <h2 v-else-if="score>=80">良好</h2>  <h2 v-else-if="score>=60">及格</h2>  <h2 v-else>不及格</h2> 複製代碼

邏輯較多不建議在模板中使用 v-if-else-if

2.複用元素渲染問題

一個問題: 涉及到了Vue底層, 虛擬DOM virtual DOM 點擊切換表單後,input的value值並無被清空,爲何?

引出：當實現點擊按鈕切換 input表單時, 咱們輸入上的 value, 點擊按鈕切換表單時會發現 value值還存在, 可是 input元素確實切換了, 這是由於什麼呢?

<span v-if="isUser">
 <label for="user">用戶名</label>  <input type="text" placeholder="用戶名" id="user" key="user"> </span> <span v-else>  <label for="email">郵箱</label>  <input type="text" placeholder="郵箱" id="email" key="email"> </span> <button @click="isUser=!isUser">切換類型</button> <script> const app = new Vue({  el: '#app',  data: {  isUser: true  } }) </script> 複製代碼

緣由:
- 1.這是由於Vue在進行DOM渲染時, 出於性能考慮, 會盡量服複用已經存在的元素, 而不是建立新的元素
- 2.上面的案例中, Vue內部會進行對比發現兩部分都類似只會替換屬性, 不會給你建立全新的元素
- 3.上面 if 的 input再也不使用, 直接做爲 else 的 input來使用
解決方案
- 1.若是咱們不但願 Vue出現相似重複利用的問題, 能夠給對應的 input添加 key
- 2.而且保證要們須要的 key不一樣, 這樣 vue就會建立一個全新 input元素

3.v-show

v-show的用法和v-if很是類似,也用於決定一個元素是否渲染

v-if 和 v-show對比
- v-if 當條件爲false時,壓根不會有對應的元素在DOM中
- v-show 當條件爲false時, 僅僅是將元素的 display 屬性設置 none 而已
開發中如何選擇呢?
- 當須要在顯示與隱藏之間切換很頻繁時,使用v-show
- 當只有一次切換時,經過使用v-if

<h2 v-show="isShow">{{message}}</h2>
複製代碼

循環遍歷指令

1.v-for遍歷數組

做用：根據數組中的元素遍歷指定模板內容生成內容。
語法: v-for="(item, index) in items"

<ul>
 <!-- item: 是每一項元素 index: 下標/索引 -->  <li v-for="(item, index) in name">  {{index+1}}.{{item}}  </li>  </ul> 複製代碼

2.v-for遍歷對象

做用: 遍歷對象
語法: v-for="(value, key, index) in items"

<ul>
 <!-- value:屬性值 key:屬性名 index:下標/索引 -->  <li v-for="(value, key, index) in info">  {{index+1}}.{{value}}  </li>  </ul> 複製代碼

3.Vue中Key屬性

官方推薦咱們在使用 v-for時,給對應的元素或組件添加上一個 :key屬性。
爲何須要這個key屬性呢(瞭解) ?
- 這個其實和Vue的虛擬DOM的 Diff算法有關係。
當某一層有不少相同的節點時，也就是列表節點時，咱們但願插入一個新的節點
- 咱們但願能夠在B和C之間加一個F，Diff算法默認執行起來是這樣的。
- 即把C更新成F，D更新成C，E更新成D，最後再插入E，是否是很沒有效率？
因此咱們須要使用key來給每一個節點作一個惟一標識
- Diff算法就能夠正確的識別此節點
- 找到正確的位置區插入新的節點
key的做用主要是爲了高效的更新虛擬DOM

使用v-for更新已渲染的元素列表時,默認用就地複用策略; 若是列表數據修改的時候, 它會根據key值去判斷某個值是否修改, 若是修改, 則從新渲染這一項, 不然複用以前的元素; 咱們在使用的使用常常會使用index(即數組的下標)來做爲key,但其實這是不推薦的一種使用方法;

4.數組響應式方法

由於Vue是響應式的, 因此當數據發生變化時, Vue會自動檢測數據變化, 視圖會對應的更新
Vue中包含了一組觀察數組編譯的方法, 使它們改變數組也會觸發更新視圖
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

5.Vue.set修改響應式數據

Vue.set(vm.items, indexOftem, newValue)
vm.$set(vm.items ,indexOften,newValue)
- 參數1: 要修改的數組/對象
- 參數2: 要設置的索引/添加的屬性名
- 參數3: 設置的值

6.v-if 和 v-for

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着

v-if 將分別重複運行於每一個v-for循環中。

避免 v-if 和 v-for用在一塊兒

緣由
- 若是使用了 if 判斷, 每次渲染在Vue內部都會遍歷整個列表, 不論判斷條件是否發生了變化
使用計算屬性的好處
- 1.過濾後的列表只會在users數組發生相關變化時才被從新運算,過濾更高效。
- 2.使用v-for="user in activeusers"以後,咱們在渲染
- 3.的時候只遍歷活躍用戶,渲染更高效。
- 4.解耦渲染層的邏輯,可維護性(對邏輯的更改和擴展)更強。
- 詳細講解

表單綁定v-model

1.基本概念

Vue中使用 v-model指令來實現表單元素和數據的雙向綁定
- 數據與模板是相互影響的, 一方發生變化, 另外一方當即作出更新
引出:
- 在以前的案例, 咱們經過v-bind,給<input>標籤綁定了data對象裏的name屬性。data中的name的值發生改變時, <input>標籤裏的內容會自動更新。
- 可如今要作的是: 在<input>標籤裏修改內容, 要求data中的name的屬性值自動更新。從而實現雙向數據綁定。該怎麼作呢? 這就能夠利用 v-model這個屬性。

區別:
- v-bind: 只能實現數據的單向綁定, 從M自動綁定到v。
- v-model: 只有 v-model才能實現雙向數據綁定。注意, v-model後面不須要跟冒號
注意
- v-model只能運用在表單元素中, 或者用於自定義組件。常見的表單元素包括: input(radio,text,address,email...) ,select, checkbox, textarea.

2.v-model原理

v-model實際上是一個語法糖, 他背後本質是包含兩個操做
- v-bind綁定一個value屬性
- v-on指令綁定當前元素的input事件
也就是說下面的代碼：等同於下面的代碼：

<input type="text" v-model="message">
<!-- 等同於下面的代碼 --> <input type="text" :value="message" @input="message = $event.target.value"> 複製代碼

3.表單綁定v-model

Vue中使用 v-model指令來實現表單元素和數據的雙向綁定
案例解析:
- 當咱們在數據框輸入內容時
- 由於input中v-model綁定了message, 因此會實時將輸入的內容傳遞給message, message發生變化
- 當message發生變化時, 由於上面咱們使用Mustanche語法, 將message的值插入到DOM中, 因此DOM會發生響應式的改變
- 因此, 經過v-model實現了雙向的綁定
固然, 咱們能夠將v-model用於textarea元素

1.表單綁定v-model

2.textarea綁定v-model

4.表單中其它類型綁定v-model

表單中其它類型, 綁定 v-model

表單類型	單選/多選狀況	綁定的值
`v-model: radio`	多個單選框時	綁定的`值是value`
`v-model: checkbox`	單個勾選框	v-model即爲`布爾值`
	多個複選框	選中多個, 對應的`data`屬性是一個`數組`
`v-model: select`	單選	`v-model`綁定的是一個`值`
	多選	`v-model`綁定的是一個`數組`

v-model: radio

v-model: checkbox

v-model: select

5.值綁定

動態的給 value賦值而已
- 咱們前面以前寫的 value中的值, 都是在定義input中直接給定的
- 可是真是開發中, 這些input中的value值多是從服務器中獲取, 而後定義的
- 因此咱們能夠經過 v-bind:value動態的給value綁定值

值綁定

5.v-model的修飾符

修飾符	做用
`.lazy`	當表單`失去焦點`或按下`回車`時,`data`中的數據纔會更新
`.number`	輸入的內容轉換爲`number`數據類型
`.trim`	過濾內容的兩側`空格`

Vue經常使用特性

1.自定義指令

爲什麼須要自定義指令

內置指令不知足需求

Vue.directive 註冊全局指令

自定義指令語法(獲取焦點)

Vue.directive('focus', {
 inserted: function (el) {  el.focus()// 獲取元素的焦點  } }) // 使用自定義指令 <input type="text" v-focus> 複製代碼

帶參數的自定義指令

Vue.directive('color', {
 // bind聲明週期, 只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置  // el 爲當前自定義指令的DOM元素   // binding 爲自定義的函數形參 經過自定義屬性傳遞過來的值 存在 binding.value 裏面  bind: function(el, binding){  // 根據指令的參數設置背景色  // console.log(binding.value.color)  el.style.backgroundColor = binding.value.color;  }  }); // 使用帶參數自定義指令 <input type="text" v-color='msg'> 複製代碼

自定義局部指令

局部指令，須要定義在 directives 的選項用法和全局用法同樣
局部指令只能在當前組件裏面使用
當全局指令和局部指令同名時以局部指令爲準

directives: {
 focus: {  inserted: function(el) {  el.focus();  }  } } 複製代碼

2.偵聽器 watch

偵聽器的應用場景

數據變化時執行 異步或 開銷較大的操做

image-20200511180435528

注意: watch 中的屬性必定是data 中已經存在的數據

// 當data中的: firstName屬性或lastNames屬性改變時, 會自動觸發對應的watch
watch: {  firstName(val) { // val: 表示變化後的值  this.fullName = val + ' ' + this.lastName;  },  lastName(val) {  this.fullName = this.firstName + ' ' + val;  }  } 複製代碼

3.過濾器

概念: Vue.js容許咱們自定義過濾器,可被用做一些常見的文本格式化/處理。

過濾器能夠用在兩個地方: mustache插值表達式、v-bind表達式。

過濾器應該被添加在JavaScript表達式的尾部,由「管道」符指示。

過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本

image-20200511204822969

全局註冊時是filter，沒有s的。而局部過濾器是filters，是有s的

支持級聯操做(對前一個過濾的數據再次進行過濾處理)

自定義全局過濾器

咱們能夠用全局方法 Vue.filter()自定義一個全局過濾器。這樣的話,每個Vue的對象實例( 每個VM實例)均可以拿到這個過濾器。它接收 兩個參數: 過濾器的名稱、 過濾器函數。

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div> <div :class="msg | upper"></div> <!-- 帶參數過濾 --> <div>{{date | format('yyyy-MM-dd')}}</div> <script>  // 1.全局過濾器  Vue.filter('upper', (val) => {  // val就是要處理的數據  return val.charAt(0).toUpperCase() + val.slice(1);  })  // 2.處理帶參數過濾器  Vue.filter('format', (date, arg) => {  // arg: 傳遞的參數  if (arg === 'yyyy-MM-dd') {  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();  }  }) </script> 複製代碼

自定義私有過濾器

私有過濾器: 在某一個vue對象內部定義的過濾器稱之爲私有過濾器
這種過濾器只有在 當前vue對象的 el指定的監管區域有用。

<!-- 管道符前面的price: 要把price這段文本進行過濾 -->
<!-- 管道符後面的showPrice: 是經過showPrice這個過濾器來進行操做 --> <td>{{price | showPrice}}</td> <script> const app = new Vue({  filters: {  showPrice(price) {  return '￥' + price.toFixed(2);  }  } }) </script> 複製代碼

4.生命週期

事物從出生到死亡的過程
Vue實例從建立到銷燬的過程,這些過程當中會伴隨着一些函數的自調用。咱們稱這些函數爲鉤子函數
主要階段
掛載(初始化相關屬性)
- beforeCreate
- created
- beforeMount
- mounted
更新(元素或組建的變動操做)
- beforeUpdate
- updated
銷燬(銷燬相關屬性)
- beforeDestroy
- destroyed

鉤子函數	過程
beforeCreate	在實例初始化以後, 數據觀測和事件配置以前被調用此時data和methods以及頁面的DOM結構都沒有初始化什麼都作不了
created	在實例建立完成後被當即調用此時data 和 methods已經可使用可是頁面尚未渲染出來
beforeMount	在掛載開始以前被調用此時頁面上還看不到真實數據只是一個模板頁面而已
mouted	el被新建立的vm.$el替換, 並掛載到實例上去以後調用該鉤子。數據已經真實渲染到頁面上在這個鉤子函數裏面咱們可使用一些第三方的插件
beforeUpdate	數據更新時調用，發生在虛擬DOM打補丁以前。頁面上數據仍是舊的
update	因爲數據更改致使的虛擬DOM從新渲染和打補丁, 在這以後會調用該鉤子。頁面上數據已經替換成最新的
beforeDestroy	實例銷燬以前調用
destroyed	實例銷燬後調用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。