自定义插件

本文展示了如何创建一个名为myPlugins的自定义Vue插件,该插件包含一个名为upper的指令,将文本转换为大写。在main.js中引入并注册这个插件,然后在组件模板中使用v-upper指令将h1标签的内容转化为大写。
摘要由CSDN通过智能技术生成

1.创建自定义插件 js文件 myPlugins.js

let myPlugins = {}

myPlugins.install = function (Vue, options) {
    // console.log("调用")
    Vue.directive(options.name,(element,params)=>{
        // console.log(params)
        element.innerHTML=params.value.toUpperCase()
    })
}

export default myPlugins

2.在main.js中引入并注册自定义插件

//引入自定义插件
import myPlugins from "@/plugins/muPlugins";

//注册全局组件
Vue.use(myPlugins,{
  name:'upper'
})

3.在组件中使用

<template>
    <div>
        <h1 v-upper="mag"></h1>     
    </div>
</template>

<script>
export default {
data() {
        return {
            mag: 'abc'
        }
    },
}
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值