Vue基礎語法2 Vue基礎語法2

Vue基礎語法2

修飾符

修飾符是由點開頭的指令後置來表示

事件修飾符

在時間處理程序中用event.prentDefault() 或 event.stopPropagation 是非常常見的需求。儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理DOM事件細節。
爲了解決這個問題，Vue.js爲v-on提供了事件修飾符。

• .stop 阻止事件冒泡
• .prevent 阻止默認行爲
• .capture 修改事件的執行順序爲捕獲模式
• .self 限制事件只能被事件源觸發, 不能被冒泡觸發
• .once 只執行一次

<button type="button" @click.stop="click">按鈕</button>
<!-- 阻止事件冒泡 -->
            
<a href="www.baidu.com" @click.prevent.stop="click">百度</a>
<!-- 阻止a標籤跳轉並且阻止事件冒泡 -->

按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：

• .enter
• .space
• .esc
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .up
• .down
• .left
• .right

<input type="text" @keydown.enter="down">
<!-- 當鍵盤按下enter鍵 -->

表單修飾符

• trim 去除字符串首尾空格
• lazy 延遲數據同步
• number 將表單數據轉換爲數值型

<input type="text" v-model.trim="uname" />
<!-- 去除首尾空格 -->

偵聽器和計算屬性

偵聽器

偵聽器可以監視數據的更新，並進行一些業務處理能力。偵聽器無需手動，只要定義了並且數據發生變化就會自動執行

const myVue = new Vue({
    el: '#app',
    data: {
        uname: ''
    },
    watch: {
        uname(newValue, oldValue) {
            console.log(newValue, '改變之前的數據');
            console.log(eldValue, '改變之後的數據');
        }
    },
})

計算屬性

計算屬性就是一種特殊的方法，和methods方法類似。不同的是，計算屬性內部提供的緩存機制

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

過濾器

過濾器，可用於一些常見的文本格式化。過濾器可以用在連個地方：雙花括號和v-bind表達式。
過濾器分爲全局過濾器和局部過濾器，定義在vue實例內部的過濾器爲局部過濾器，直接以vue.filter定義的過濾器爲全局過濾器

<div id="app">
    <!-- 格式化時間 -->
    <p>{{date | fnName}}</p>
    <input type="text" v-bind:value="date | fnName">
</div>

const vm = new Vue({
    el: '#app',
    data: {
        date: new Date().getTime()
    },
    //私有過濾器
    filters: {
        fnName(time, divider = '/') {
            const date = new Date(time);
            const y = date.getFullYear(); // 獲取年份
            const m = date.getMonth() + 1; // 獲取月份
            const d = date.getDate(); // 獲取日期
            const h = date.getHours(); // 獲取小時
            const mm = date.getMinutes(); // 獲取分鐘
            const s = date.getSeconds(); // 獲取秒數
            return `${y}${divider}${m}${divider}${d} ${h}:${mm}:${s}`;
        }
    }
})

//全局過濾器
Vue.filter('fnName', function(time, divider = '/') {
    const date = new Date(time);
    const y = date.getFullYear(); // 獲取年份
    const m = date.getMonth() + 1; // 獲取月份
    const d = date.getDate(); // 獲取日期
    const h = date.getHours(); // 獲取小時
    const mm = date.getMinutes(); // 獲取分鐘
    const s = date.getSeconds(); // 獲取秒數
    return `${y}${divider}${m}${divider}${d} ${h}:${mm}:${s}`;
})

過渡動畫

Vue導航切換過渡動畫很常見，頁面上使用了過渡動畫，用戶體驗更加友好，過渡動畫主要是配合CSS樣式來實現動畫效果的。
主要使用場景如下：

• 條件渲染（使用v-if）
• 條件展示（使用v-show）
• 動態組件
• 組件根節點

這裏是一個典型的例子：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

過渡類名

在進入/離開的過渡中，會有 6 個 class 切換。

1. v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。

2. v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。

3. v-enter-to：在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。

4. v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。

5. v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。

6. v-leave-to：在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。