技術標籤：Vuevuevue.js前端

自定義指令

Vue 自帶的指令無法滿足開發需求，這時需要自定義一些指令。指令可以註冊為全域性指令或者區域性指令。全域性指令使用 Vue 物件下的 directive 方法定義，區域性指令在 Vue 例項中設定 directives 屬性。

如下程式碼所示：

// 註冊為全域性指令
Vue.directive('focus', {
    inserted: function (el) {
        // 獲取焦點事件
        el.focus()
    }
})

// 註冊為區域性指令
let vm = new Vue({
    el: '.container'
 
,
    directives: {
        focus: {
            inserted: function (el) {
                // 呼叫觸發該指令元素的 focus 屬性，獲取焦點
                el.focus()
            }
        }
    }
})

在定義指令時無需使用 v- 作為字首，在呼叫指令時，需要新增 v- 字首。

有引數的自定義指令

如果自定義的指令中需要傳遞引數，那麼在 inserted 後面函式的形參中設定多個值，其中第一個值為繫結該指令的元素，第二個值為傳遞的引數。若想要獲取第二個引數中的值，需要呼叫該引數的 value

Vue.directive('bg_color', {
    // 函式中接收兩個引數，第一個引數為觸發該指令的元素，第二個引數為該指令中傳遞的引數
    inserted: function (el, obj) {
        // 使用元素的 style 為其設定樣式
      	// 通過形參的 value 屬性來獲取形參真正的值
        el.style.backgroundColor = obj.value.color
    }
})
let vm = new Vue({
    el: '.container',
    data: {
        data:
 
 { color: "red" }
    }
})

<div class="container">
    <div v-bg_color='data'></div>
</div>

需要注意，在 JS 部分，如果想要獲取引數真正的值，需要呼叫 value 屬性，因為渲染時，傳來的形參是一個物件，如果不呼叫 value 結果如下：

由結果可見，渲染時傳來的形參是一個物件，裡面的 value 屬性才是真正傳遞的值。

計算屬性

Vue 的程式設計方式為宣告式程式設計，如果所有邏輯都寫在表示式中，會讓模板難以維護。對於任何較為複雜的邏輯都應該使用 計算屬性。

如果要設定計算屬性，需要在 Vue 例項中使用 computed 屬性，該屬性為一個物件，物件中直接宣告相應的函式。使用該屬性時，直接呼叫該函式即可，呼叫函式時只寫函式名即可。如下程式碼所示：

<div class="container">
    <p>{{ msg }}</p>
  	<!-- 直接呼叫方法 -->
    <p>{{ reversedMessage }}</p>
</div>

let vm = new Vue({
    el: '.container',
    data: {
        msg: 'Hello'
    },
    // 如果要設定計算屬性，需要設定 computed 屬性
    computed: {
        // 反轉字串
        reversedMessage: function () {
            this.msg = this.msg.split('').reverse().join('')
        }
    }
})

計算屬性和方法的區別

計算方法：

使用計算屬性來進行操作時會進行快取；使用方法進行操作時不會快取得到的結果。對於一些大型計算來說，使用計算屬性可以有效的節省效能。如下程式碼所示：

<div class="container">
    <!-- 呼叫方法和呼叫計算屬性的區別是：呼叫方法時，需要加 () -->
    <p>{{ reversedMessage() }}</p>
  	<p>{{ reversedMessage() }}</p>
</div>

let vm = new Vue({
    el: '.container',
    data: {
        msg: 'Hello'
    },
    methods: {
        reversedMessage: function () {
          	console.log('呼叫了')
            return this.msg.split('').reverse().join('')
        }
    }
})

上面程式碼中呼叫了兩次方法，每呼叫一次方法會列印一次呼叫了。瀏覽器控制檯中結果如下：

呼叫了
呼叫了

計算屬性：

<div class="container">
  	<!-- 呼叫兩次 -->
    <p>{{ reversedMessage }}</p>
  	<p>{{ reversedMessage }}</p>
</div>

let vm = new Vue({
    el: '.container',
    data: {
        msg: 'Hello'
    },
    // 如果要設定計算屬性，需要設定 computed 屬性
    computed: {
        // 反轉字串
        reversedMessage: function () {
          	console.log('呼叫了')
            this.msg = this.msg.split('').reverse().join('')
        }
    }
})

瀏覽器控制檯中結果如下：

呼叫了