多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[toc] ## Mixins Mixin (混入) 是一种可以在多个 Vue 组件之间灵活复用特性的机制。你可以像写一个普通 Vue 组件的选项对象一样编写一个 mixin: ~~~ // mixin.js module.exports = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // test.js var myMixin = require('./mixin') var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // -> "hello from mixin!" ~~~ 更多细节请参见 API。 ## 使用插件进行扩展 通常插件会为 Vue 添加一个全局的功能。 ## 撰写插件 你可以撰写以下几种典型类型的插件: 1. 添加一个或几个全局方法。比如 vue-element 2. 添加一个或几个全局资源:指令、过滤器、动画效果等。比如 vue-touch 3. 通过绑定到 Vue.prototype 的方式添加一些 Vue 实例方法。这里有个约定,就是 Vue 的实例方法应该带有 $ 前缀,这样就不会和用户的数据和方法产生冲突了。 ~~~ exports.install = function (Vue, options) { Vue.myGlobalMethod = ... // 1 Vue.directive('my-directive', {}) // 2 Vue.prototype.$myMethod = ... // 3 } ~~~ ## 使用插件 假设我们使用的构建系统是 CommonJS,则需要作如下调用: ~~~ var vueTouch = require('vue-touch') // use the plugin globally Vue.use(vueTouch) ~~~ 你也可以向插件里传递额外的选项: ~~~ Vue.use(require('my-plugin'), { /* pass in additional options */ }) ~~~ ## 现有的插件 & 工具 - vue-resource: 一个插件,为用 XMLHttpRequest 或 JSONP 生成网络请求、响应提供服务。 - vue-validator: 一个表单验证的插件。 - vue-devtools:一个用来调试 Vue.js 应用程序的 Chrome 浏览器开发者工具扩展。 - vue-touch::添加基于 Hammer.js 的触摸手势的指令。 - vue-element: 用 Vue.js 注册 Custom Elements。