Vue.js基礎知識點總結

時間  2020-10-18
標籤 css html 前端 vue 算法 npm 數組 瀏覽器 緩存 服務器 欄目 JavaScript 简体版
原文   原文鏈接

Vue基礎

Vue.js

邂逅Vuejs

1.認識Vuejs

  • Vue是一個<font color='red'>漸進式框架</font>, 什麼是漸進式的呢?css

    • 聲明式渲染→組件系統→客戶端路由→集中式狀態管理→項目構建
    • 漸進式意味着你能夠將Vue做爲你<font color='red'>應用的一部分</font>嵌入其中，帶來更豐富的交互體驗。

  • Vue有不少特色和Web開發中常見的高級功能html

    • 解耦視圖和數據
    • 可複用的組件
    • 前端路由技術
    • 狀態管理
    • 虛擬DOM

2.Vue初體驗

image-20200510173726520

<!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層前端

    • <font color='red'>視圖層</font>
    • 前端開發中, 一般就是DOM層
    • 主要的做用是給用戶展現各類信息

  • Model層vue

    • <font color='red'>數據層</font>
    • 數據多是咱們固定的死數據, 更多的是來自咱們的服務器, 從網絡上請求下來的數據

  • VueModel層算法

    • <font color='red'>視圖模型層</font>
    • 視圖模型層是View和Model溝通的橋樑
    • 一方面它實現了 Data binding, 也就是數據綁定, 將Model的改變實時的反應到了View中
    • 另外一方面它實現了DOM Listener，也就是DOM監聽，當DOM發生一些事件(點擊、滾動、touch等)時，能夠監聽到，並在須要的狀況下改變對應的Data。

4.Vue實例傳入的options

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

5.Vue生命週期

插值指令

1.Mustache

  • 插值表達式 {{}}

數據綁定最多見的形式就是使用 「Mustache」 語法（雙大括號）的文本插值。例如：npm

<span>Message: {{ msg }}</span>

Mustache 標籤將會被替代爲對應數據對象上 msg 屬性（msg定義在data對象中）的值。 數組

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

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

2.v-once

該指令後面不須要跟任何表達
該指令表示元素<font color='red'>只渲染一次</font>，不會隨着數據的改變而改變。 
<h2 v-once>{{message}}</h2>

3.v-html

解析<font color='red'>數據中的html</font>代碼，渲染到頁面中 
<h2 v-html="url"></h2>

4.v-text

v-text做用和Mustache比較類似：都是用於將<font color='red'>數據顯示在界面</font>中, 不一樣的是 v-text 是寫在屬性中
v-text一般狀況下，接收一個string類型 
<h2 v-text="text"></h2>

5.v-pre

v-pre用於跳過這個元素和它子元素的編譯過程，用於<font color='red'>顯示本來的Mustache</font>語法。 
<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介紹

  • 前面咱們學習的指令主要做用是將值插入到咱們<font color='red'>模板的內容</font>當中。
  • 可是，除了內容須要動態來決定外，某些<font color='red'>屬性</font>們也但願動態來綁定。

  • 做用：能夠給html元素或者組件動態地綁定一個或多個特性，例如動態綁定style和class緩存

    • 好比動態綁定a元素的href屬性
    • 好比動態綁定img元素的src屬性

  • 這個時候，咱們可使用v-bind指令：服務器

    • 做用：動態綁定屬性
    • 縮寫： :
    • 預期：any (with argument) | Object (without argument)
    • 參數：attrOrProp (optional)

2.v-bind綁定class

綁定class有兩種方式

  • 對象語法
  • 數組語法

  • 對象語法

    • 對象語法的含義是:class後面跟的是一個<font color='red'>對象</font>。
<!-- 用法一：直接經過{}綁定一個類 -->
<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後面跟的是一個<font color='red'>數組</font>。
<!-- 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.基本概念

  • 計算屬性出現的目的是<font color='red'>解決模板中放入過多的邏輯</font>會讓模板太重且難以維護的問題
  • 計算屬性是基於它們的響應式<font color='red'>依賴進行緩存</font>的

  • 在某些狀況，咱們可能須要對數據進行一些轉化後再顯示，或者須要將多個數據結合起來進行顯示

    • 好比咱們有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算法就能夠正確的識別此節點
    • 找到正確的位置區插入新的節點
  • <font color='red'>key的做用主要是爲了高效的更新虛擬DOM</font>

image-20200505214434701

使用 v-for更新已渲染的元素列表時,默認用<font color='red'>就地複用</font>策略; 若是列表數據修改的時候, 它會根據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指令來實現表單元素和<font color='red'>數據的雙向綁定</font>

    • 數據與模板是相互影響的, 一方發生變化, 另外一方當即作出更新

  • 引出:

    • 在以前的案例, 咱們經過v-bind,給<input>標籤綁定了data對象裏的name屬性。data中的name的值發生改變時, <input>標籤裏的內容會自動更新。
    • 可如今要作的是: 在<input>標籤裏修改內容, 要求data中的name的屬性值自動更新。從而實現<font color='red'>雙向數據綁定</font>。該怎麼作呢? 這就能夠利用v-model這個屬性。

image-20200510174213506

  • 區別:

    • 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元素

​

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

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



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 實例銷燬後調用
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程