Vue基礎-插件

功能:用于增強Vue
本質:包含install方法的一個對象,install的第一個參數是Vue,第二個以后的參數是插件使用者傳遞的數據。
定義插件:

對象.install = function(Vue,options){
   //1.添加全局過濾器
   Vue.filter(....)
   //2.添加全局指令
   Vue.directive(....)
   //3.配置全局混入(合)
   Vue.mixin(....)
   //4.添加實例方法
   Vue.prototype.$myMethod = function(){...}
   Vue.prototype.$myProperty = xxxx
}

使用插件:Vue.use()

例子:
創(chuàng)建plugins.js文件

export default {
    install(Vue) {
        //可以定義全局過濾器
        Vue.filter("mySclice", function (value) {
            return value.slice(0, 4)
        })

        //定義全局指令
        Vue.directive('fbind', {
            //指令與元素綁定時
            bind(element, binding) {
                element.value = binding.value
            },
            //指令所在元素被插入頁面時
            inserted(element, binding) {
                element.focus()
            },
            //指令所在模版被重新解析時
            update(element, binding) {
                element.value = binding.value
            }
        })
        //定義混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            },
        })
        //給Vue原型上添加一個方法
        Vue.prototype.hello = () => {

        }
    }
}

使用,main.js中:

//插件
import plugins from './plugins'
Vue.use(plugins)
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一、本質 造輪子,給Vue生態(tài)圈提供更多優(yōu)良的插件或工具 插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有...
    MonkeyCode閱讀 146評論 0 0
  • vuedemo20230801 Project setup Compiles and hot-reloads fo...
    Messix_1102閱讀 178評論 0 0
  • Vue -漸進式JavaScript框架 介紹 vue 中文網 vue github Vue.js 是一套構建用戶...
    桂_3d6b閱讀 948評論 0 0
  • 1.1 初始化腳手架 1.1.1 說明 Vue 腳手架是 Vue 官方提供的標準化開發(fā)工具(開發(fā)平臺) 最新的版本...
    Java陳序員閱讀 354評論 0 1
  • JavaScript 表達式(Expression):表達式是可以計算并返回一個值的任何合法的 JavaScrip...
    我沒叫阿閱讀 564評論 0 0

友情鏈接更多精彩內容