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

極客James發表於2019-08-27
Vue

? Vue構建大型單頁面電商應用 開源啦!點我看原始碼??

閱讀時間預估: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屬性

<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指令的巧妙之處,一定要多用多理解每個指令內部是如何實現的,進階大佬非常管用!!歡迎留言點贊加評論,文章有不對的地方懇請各位大佬提出.

如果我的分享對面前的這位大俠有所啟發,懇請以程式設計師最高禮遇點✨ 星加分享的方式鼓勵我.

關注公眾號回覆:學習 領取前端最新最全學習資料,也可以進群和大佬一起學習交流

Vue從甜小白到皮大佬系列(二) v-指令
猛戳我點星星

相關文章