plugins(自定义插件)

vue

1.在src>plugins.js(创建js)

export default {
  install(Vue) {
    Vue.filter('mySlice', function (value) {
      return value.slice(0, 3)
    })
    Vue.directive('fbind', {
      // 指令与元素成功绑定时(一上来)
      bind(element, binding) {
        element.value = binding.value;
        console.log('bind');
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus();
        console.log('inserted');

      },
      // 指令所在的模版被重新解析时
      update(element, binding) {
        element.value = binding.value;
        console.log('update');

      }
    })

    // 定一个miixn
    Vue.mixin({
      data() {
        return {
          we: '123'
        }
      },
    })
    Vue.prototype.hello = () => { alert('hello') }
  }
}

2.在main.js中引入使用

1
2
3

// 引入插件
import plugins from './plugins';
Vue.use(plugins);//应用(使用)插件

3.在组件中使用

<template>
  <div class="school">
   <h2 >学生姓名{{name | mySlice}}</h2>
   <h2>学生性别{{sex}}</h2>
   <input type="text" v-fbind:value = 'name' >
   <h3>插件混入:{{we}}</h3>
   <h3 @click="hello">测试插件事件</h3>
  </div>
</template>

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！

plugins(自定义插件)

特色标签

链接