20Vue入门教程Vue插件

　　1。简介
　　本节我们将介绍Vue的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。2。木子解释插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：
　　添加全局方法或者属性。如：vuecustomelement。
　　添加全局资源：指令过滤器过渡等。如vuetouch。
　　通过全局混入来添加一些组件选项。如vuerouter。
　　添加Vue实例方法，通过把它们添加到Vue。prototype上实现。
　　一个库，提供自己的API，同时提供上面提到的一个或多个功能。如vuerouter。
　　Vue插件是对Vue全局功能的扩展，他可以给Vue添加全局方法、属性、组件、过滤器、指令等等。3。使用插件
　　通过全局方法Vue。use（）使用插件。它需要在你调用newVue（）启动应用之前完成：Vue。use（MyPlugin）newVue（｛。。。组件选项｝）代码块12345
　　也可以传入一个可选的选项对象：Vue。use（MyPlugin，｛someOption：true｝）代码块1
　　Vue。use会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。Vue。js官方提供的一些插件（例如vuerouter）在检测到Vue是可访问的全局变量时会自动调用Vue。use（）。然而在像CommonJS这样的模块环境中，你应该始终显式地调用Vue。use（）：用Browserify或webpack提供的CommonJS模块环境时varVuerequire（vue）varVueRouterrequire（vuerouter）不要忘了调用此方法Vue。use（VueRouter）代码块123456
　　awesomevue集合了大量由社区贡献的插件和库。4。开发插件
　　Vue。js的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象：constMyPlugin｛｝MyPlugin。installfunction（Vue，options）｛1。添加全局方法或属性Vue。myGlobalMethodfunction（）｛逻辑。。。｝2。添加全局资源Vue。directive（mydirective，｛bind（el，binding，vnode，oldVnode）｛逻辑。。。｝。。。｝）3。注入组件选项Vue。mixin（｛created：function（）｛逻辑。。。｝。。。｝）4。添加实例方法Vue。prototype。myMethodfunction（methodOptions）｛逻辑。。。｝｝代码块1234567891011121314151617181920212223242526272829
　　接下来，我们写一个具体的插件示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodymybuttondefaultmybuttonmybuttontypedefaultdefaultmybuttonmybuttontypeprimaryprimarymybuttonmybuttontypewarningwarningmybuttonmybuttontypesuccesssuccessmybuttonbodystyle。marigin｛margintop：10px；｝。button｛width：100；height：34px；lineheight：32px；outline：none；margin：0；padding：0；boxsizing：borderbox；cursor：pointer；｝。buttondefault｛backgroundcolor：ffffff；color：333333；border：1pxsolidccc；｝。buttonprimary｛backgroundcolor：39f；color：ffffff；border：1pxsolid39f；｝。buttonwarning｛backgroundcolor：f90；color：ffffff；border：1pxsolidf90；｝。buttonsuccess｛backgroundcolor：0c6；color：ffffff；border：1pxsolid0c6；｝stylehtml
　　运行案例可查看在线运行效果
　　代码解释：JS代码第320行，我们定义了插件MyPlugin，该插件中包含一个全局组件MyButton。JS代码第22行，通过Vue。use使用MyPlugin。HTML代码第2、4、6、8、10行，使用MyPlugin插件中的MyButton组件。5。小结
　　本节，我们带大家学习了Vue插件的使用方式。主要知识点有以下几点：通过Vue。use（插件名字）使用插件。通过install方法开发插件。