Vue從甜小白到皮大佬系列(二) v-指令

閱讀時間預估:5分鐘

啥是指令?

指令通俗的來講就是一個方法名的縮寫,經過特定的指令,完成特定的事情,vue中指令前綴爲v-

指令的做用

表達式的值改變時,將其產生連帶的影響,響應地做用於DOM

經常使用的指令有哪些?

v-text

• 解釋：更新DOM對象的 textContent

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

v-html

• 解釋：更新DOM對象的 innerHTML

<h1 v-html="msg"></h1>
複製代碼

v-bind

• 做用：當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM
• 語法：v-bind:title="msg"
• 簡寫：:title="msg"

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
複製代碼

v-on

• 做用：綁定事件
• 語法：v-on:click="say" or v-on:click="say('參數', $event)"
• 簡寫：@click="say"
• 說明：綁定的事件定義在methods

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
複製代碼

事件修飾符

• .stop 阻止冒泡，調用 event.stopPropagation()

• .prevent 阻止默認行爲，調用 event.preventDefault()

• .capture 添加事件偵聽器時使用事件捕獲模式

• .self 只當事件在該元素自己（好比不是子元素）觸發時，纔會觸發事件

• .once 事件只觸發一次

v-model

• 做用：在表單元素上建立雙向數據綁定
• 說明：監聽用戶的輸入事件以更新數據
• 案例：計算器

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
複製代碼

v-for

• 做用：基於源數據屢次渲染元素或模板塊

<!-- 1 基礎用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>
<!-- item 爲當前項，index 爲索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 爲值，key 爲鍵，index 爲索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>
複製代碼

key屬性

• 推薦：使用 v-for 的時候提供 key 屬性，以得到性能提高。
• 說明：使用 key，VUE會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。
• Vue 項目時爲何要在列表組件中寫 key，其做用是什麼
• vue key屬性的說明

<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>
複製代碼

樣式處理 -class和style

• 使用方式：v-bind:class="expression" or :class="expression"
• 表達式的類型：字符串、數組、對象（重點） 語法：

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析後
<div class="active"></div>
 
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析後
<div class="active text-danger"></div>
 
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析後
<div class="active text-danger"></div>
 
 
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 將多個 樣式對象 應用到一個元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定義的對象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
複製代碼

v-if 和 v-show

• 條件渲染
• v-if：根據表達式的值的真假條件，銷燬或重建元素
• v-show：根據表達式之真假值，切換元素的 display CSS 屬性

<p v-show="isShow">這個元素展現出來了嗎？？？</p>
<p v-if="isShow">這個元素，在HTML結構中嗎？？？</p>
複製代碼

提高性能：v-pre

• 說明：vue會跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始 Mustache標籤。跳過大量沒有指令的節點會加快編譯。

<span v-pre>{{ this will not be compiled }}</span>
複製代碼

提高性能：v-once

• 說明：vue只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

<span v-once>This will never change: {{msg}}</span>
複製代碼

過濾器 filter

• 做用：文本數據格式化
• 過濾器能夠用在兩個地方：{{}}和 v-bind 表達式
• 兩種過濾器：1 全局過濾器 2 局部過濾器

全局過濾器

• 說明：經過全局方式建立的過濾器，在任何一個vue實例中均可以使用
• 注意：使用全局過濾器的時候，須要先建立全局過濾器，再建立Vue實例
• 顯示的內容由過濾器的返回值決定

Vue.filter('filterName', function (value) {
  // value 表示要過濾的內容
})
複製代碼

<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
 
<script>
  Vue.filter('date', function(value, format) {
    // value 要過濾的字符串內容，好比：dateStr
    // format 過濾器的參數，好比：'YYYY-MM-DD hh:mm:ss'
  })
</script>
複製代碼

局部過濾器

• 說明：局部過濾器是在某一個vue實例的內容建立的，只在當前實例中起做用

{
  data: {},
  // 經過 filters 屬性建立局部過濾器
  // 注意：此處爲 filters
  filters: {
    filterName: function(value, format) {}
  }
}
複製代碼

按鍵值修飾符

• 說明：在監聽鍵盤事件時，Vue 容許爲 v-on - 在監聽鍵盤事件時添加關鍵修飾符
• 鍵盤事件 - 鍵值修飾符
• 其餘：修飾鍵（.ctrl等）、鼠標按鍵修飾符（.left等）

// 只有在 keyCode 是 13 時調用 vm.submit()
@keyup.13="submit"
// 使用全局按鍵別名
@keyup.enter="add"
 
---
 
// 經過全局 config.keyCodes 對象自定義鍵值修飾符別名
Vue.config.keyCodes.f2 = 113
// 使用自定義鍵值修飾符
@keyup.enter.f2="add"
複製代碼

監視數據變化 - watch

• 概述：watch是一個對象，鍵是須要觀察的表達式，值是對應回調函數
• 做用：當表達式的值發生變化後，會調用對應的回調函數完成響應的監視操做
• VUE $watch

new Vue({
  data: { a: 1, b: { age: 10 } },
  watch: {
    a: function(val, oldVal) {
      // val 表示當前值
      // oldVal 表示舊值
      console.log('當前值爲：' + val, '舊值爲：' + oldVal)
    },
 
    // 監聽對象屬性的變化
    b: {
      handler: function (val, oldVal) { /* ... */ },
      // deep : true表示是否監聽對象內部屬性值的變化 
      deep: true
    },
 
    // 只監視user對象中age屬性的變化
    'user.age': function (val, oldVal) {
    },
  }
})
複製代碼

計算屬性 - computed

• 說明：計算屬性是基於它們的依賴進行緩存的，只有在它的依賴發生改變時纔會從新求值
• 注意：Mustache語法（{{}}）中不要放入太多的邏輯，不然會讓模板太重、難以理解和維護
• 注意：computed中的屬性不能與data中的屬性同名，不然會報錯
• Vue computed屬性原理

var vm = new Vue({
  el: '#app',
  data: {
    firstname: 'jack',
    lastname: 'rose'
  },
  computed: {
    fullname() {
      return this.firstname + '.' + this.lastname
    }
  }
})
複製代碼

看完這篇不知道面前的這位大俠是否真正的領略到vue指令的巧妙之處,必定要多用多理解每一個指令內部是如何實現的,進階大佬很是管用!!歡迎留言點贊加評論,文章有不對的地方懇請各位大佬提出.

若是個人分享對面前的這位大俠有所啓發,懇請以程序員最高禮遇點✨ 星加分享的方式鼓勵我.

關注公衆號回覆:學習 領取前端最新最全學習資料,也能夠進羣和大佬一塊兒學習交流

猛戳我點星星