插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

export default {install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter('mySlice', 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原型上添加一个方法（vm和vc就都能用了）Vue.prototype.hello = ()=>{alert('你好啊')}}
}

src/main.js

import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins'   // 引入插件Vue.config.productionTip = falseVue.use(plugins,1,2,3)  // 应用（使用）插件new Vue({el:'#app',render: h => h(App)
})

src/components/School.vue

<template><div><h2>学校名称：{{ name | mySlice }}</h2><h2>学校地址：{{ address }}</h2><button @click="test">点我测试一个hello方法</button></div>
</template><script>export default {name:'School',data() {return {name:'andy',address:'北京',}},methods: {test(){this.hello()}},}
</script>

src/components/Student.vue

<template><div><h2>学生姓名：{{ name }}</h2><h2>学生性别：{{ sex }}</h2><input type="text" v-fbind:value="name"></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男'}},}
</script>

使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)new Vue({// ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

vue-router 使用设置

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')// 不要忘了调用此方法
Vue.use(VueRouter)

awesome-vue 集合了大量由社区贡献的插件和库。

VUE plugin 插件相关推荐

vue 画布插件_一个Vue.js插件，用于使用EaselJS控制HTML5画布
vue 画布插件 vue-easeljs (vue-easeljs) A Vue.js plugin to control an HTML5 canvas using EaselJS. 一个Vue.j ...
Vue3 -- plugin插件
目录 plugin插件定义插件使用插件添加directive 添加mixin 添加config 完整代码总结 plugin插件 plugin插件是用来为 Vue 添加全局功能,把通用性的功能进 ...
vue实现波纹效果_简单的Vue.js插件可实现自定义波纹效果
vue实现波纹效果 Vue-Rippler (vue-rippler) Simple Vue.js plugin for custom ripple effect. 简单的Vue.js插件可实现自定义 ...
IDEA Vue.js插件 2021年1月21日最新
IDEA开发VUE时,需要下载Vue.js插件,但国外的资源有时候很难下下来,可以离线下载插件再安装官网下载地址:https://plugins.jetbrains.com/plugin/9442- ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
七个超级实用的 Vue 3 插件和库
Vue 3 是一个强大的 JavaScript 框架,我们能够创建令人难以置信的用户界面和应用程序.借助本文中提到的插件和库,我们可以简化工作流程并在更短的时间获得更佳的结果. 想要在 2023 年构 ...
安装flex4 plug-in插件的时候遇到老是在起始处安装不起
2019独角兽企业重金招聘Python工程师标准>>> 安装flex4 plug-in插件的时候遇到老是在起始处安装不起解决方案:1.有可能你安装的目录有中文字符 2.你放安装文件 ...
在控制台打印sql语句的办法(MyBatis Log Plugin插件的安装与使用)
MyBatis Log Plugin插件的安装与使用在使用Mybatis开发项目时,由于避免出现SQL注入,大部分情况下都是使用#{}占位符的方式传参.如果SQL比较复杂,参数又很多的话,要通过日志 ...
Mybatis Plugin插件安装破解及使用
为什么80%的码农都做不了架构师?>>> Mybatis Plugin 一.Mybatis Plugin插件是什么提供Mapper接口与配置文件中对应SQL的导航编辑XML ...

VUE plugin 插件

插件

开发插件

使用插件

vue-router 使用设置

VUE plugin 插件相关推荐

最新文章

热门文章