Vue中的extension方法是指我們在Vue實例中通過擴展Vue構造函數添加自定義的實例方法或者全局的方法。
我們可以通過Vue.extend()方法來擴展Vue構造函數,然后向其中添加自己所需的方法。這些方法可以在Vue實例化之后直接使用。
Vue.extend({ methods:{ customMethod:function(){ console.log("This is a custom method.") } } })
上述代碼中,我們通過Vue.extend()方法擴展了Vue構造函數。在methods中添加了我們自定義的方法customMethod。在Vue實例中直接調用即可。
除了實例方法,在Vue中我們還可以添加全局方法。全局方法可以通過Vue實例、組件以及自定義指令進行引用。
Vue.globalMethod=function(){ console.log("This is a global method.") }
上述代碼中,我們通過Vue構造函數直接添加了一個全局方法。同樣,Vue實例、組件以及自定義指令都可以直接調用該方法。
其中,自定義指令的添加方式如下:
Vue.directive('focus', { inserted: function (el) { el.focus() } })
上述代碼中我們通過Vue.directive()方法添加了一個指令,并在inserted鉤子函數中添加了自定義的指令邏輯。在Vue實例中可以通過v-focus進行使用。
除了實例方法和全局方法,還可以使用過濾器。過濾器的作用是將數據進行格式化處理,用于一些特定的數據展示需求。
Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
上述代碼中我們通過Vue.filter()方法添加了一個過濾器,名稱為capitalize。該過濾器會將字符串的首字母大寫并返回。在Vue實例中,我們可以使用{{message | capitalize}}進行使用。
總之,在Vue中擴展方法可以滿足我們各種自定義需求。我們可以通過Vue.extend()方法、Vue.directive()方法、Vue.filter()方法來添加自己所需要的方法,無論是實例方法、全局方法還是過濾器。
上一篇vue中js代碼