// 注入组件 Vue.mixin({ created: function () { if (this.NOTICE) console.log("组件开始加载") } }) // 添加注入组件时，是否利用console.log来通知的判断条件 Vue.prototype.NOTICE = false;
【注入给非Vue实例本身就有的方法】：
假如是写给例如methods属性的某个方法，例如以下注入：
Vue.mixin({ methods: { test: function () { console.log("mixin test"); } } })
那么，组件里若本身有test方法，并 不会 先执行插件的test方法，再执行组件的test方法。
而是只执行其中一个，并且优先执行组件本身的同名方法。这点需要注意
3、用：
不需要手动调用，在执行对应的方法时会被自动调用的（并且先调用插件里的，再调用组件本身的）
4、其他：
1、如果同时有多个插件注入一个方法（例如created，那么会先执行先注入的那个方法，再依次执行后注入的，最后执行组件本身的）
2、注意，像methods属性下的方法，并不会在组件注入后每个都执行，而是只执行一个，并且优先执行组件本身的。
3.4【添加全局资源】
1、核心思想：
添加方法和正常添加方法类似，甚至几乎一样。
可以添加【自定义指令】、【过滤器】、【过渡等】，这里以【过滤器】为例
2、写：
例如：
//时间格式化过滤器，输入内容是number或者Date对象，输出是YYYY-MM-DD HH-MM-SS Vue.filter('formatTime', function (value) { Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } return new Date(value).Format("yyyy-MM-dd hh:mm:ss"); })
3、用：
和正常使用一样用就行了，so easy。例如：
{{num|formatTime}}
4、其他：
可以用这个找各种有意思的功能，作为插件写好，然后需要的地方导入就行，超级方便！
4、示例demo
附一个有简单功能的示例demo，提供参考使用
/* 说明： * 插件demo，供学习使用 * 本页面用于提供各种处理服务 * 作者：王冬 QQ：20004604 * */ export default { install: function (Vue, options) { // 1. 添加全局方法或属性 // 略 // 2. 添加全局资源 // 时间格式化过滤器，输入内容是number或者Date对象，输出是YYYY-MM-DD HH-MM-SS Vue.filter('formatTime', function (value) { Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } return new Date(value).Format("yyyy-MM-dd hh:mm:ss"); }) // 2. 添加全局资源 // 添加注入组件时，是否利用console.log来通知的判断条件，也是组件实例属性 Vue.prototype.NOTICE = true; // 3. 注入组件 // 注入组件，插件加载开始前提示 Vue.mixin({ created: function () { if (this.NOTICE) console.log("组件开始加载") }, methods: { test: function () { console.log("mixin test"); } } }) // 4. 添加实例方法 // 返回数字是输入数字的两倍，如果不是数字或者不能隐式转换为数字，则输出null // 组件实例方法 Vue.prototype.doubleNumber = function (val) { if (typeof val === 'number') { return val * 2; } else if (!isNaN(Number(val))) { return Number(val) * 2; } else { return null } } // 4. 添加实例方法 // 服务组，将实例方法整合到$service中，避免命名冲突 Vue.prototype.$service = { //电话号码合法性检查 telNumberCheck: function (tel) { var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/; return pattern.test(tel) } } } };