plugins 插件

## 插件：

功能：用于增强Vue
 1. 本质包含install方法的一个对象，install的第一个参数是Vue，第二个的参数是插件使用者传递的数据
 2. 定义插件：
    对象.install = function(){
         //添加全局过滤器
         Vue.filter(....)
         
         //添加全局指令
         Vue.directive(....)

         //配置全局混入
         Vue.mixin(....)

         //添加实例方法
          Vue.prototype.$myMethod = function(){....}
          Vue.prototype.$myProperty = xxx
    }
 3. 使用插件：Vue.use(plugins)


举例说明：
**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:'清华大学，欢迎你！',
             address: '北京'
           }
        },
        methods:{
           test(){
              this.hello()
           }
        }
    }
</script>

**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>

**plugins.js**
export default {
   install(Vue) {
      //console.log("陈慕夏是阿恒和阿夏最喜欢的小朋友")

     //全局过滤器
	 Vue.filter('mySlice',function(value){
	     return value.slice(0,4)
	 })
	 //结果：School.vue => 学校名称过滤后：清华大学
	  
	 //定义全局指令(对象式)
	Vue.directive('fbind',{
	     `指令与元素成功绑定时`
	     bind(element,binding){
	         element.value = binding.value
	     },
	     `指令所在元素被插入页面时`
	     inserted(element,binding){
	         element.focus()
	     },
	     `指令所在的模版被重新解析时`
	     update(element,binding){
	         element.value = binding.value
	     }
	})
   }
   //结果：Student.vue => 输入框里自动绑定姓名：陈慕夏

   //定义混入
   Vue.mixin({
       data(){
		   return {
		      x: 100,
		      y: 200
		   }
		}
   })
   //结果：所有的vc,vm身上都有除自身组件定义的数据之外还有混入的数据x,y

  //给Vue原型上添加一个方法（vm和vc就都能用上）
  Vue.prototype.hello = ()=> {
     alert("你好啊！陈慕夏")
  }
  //结果：点击School.vue组件里的按钮弹出“你好啊！陈慕夏”
}

**main.js**
// 引入插件
import plugins from './plugins'

//使用插件
Vue.use(plugins)