插件使用

app.vue

<template>
    <div>
        <Student/>
        <School></School>
    </div>
</template>
<!-- 
    1.插件，增强vue
    本质：包含install的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的
    定义插件（在plugins.js文件中）
        install(Vue)
        {
            可定义很多组件（plugins.js文件）
        }
    使用插件（在main.js文件中）
    import Plugin from './plugins.js'
    Vue.use(Plugin)
 -->
<script>
    import Student from './components/Student'
    import School from './components/School'
    export default{
        name:'App',
        components:{Student,School}
    }
    
</script>

<style>
</style>

student.vue

<template>
  <div>
    <h3>学生姓名:{{name | mySlice}}</h3><!-- 使用plugins下过滤器，将字符控制在0-4位 -->
    
  </div>
</template>
<!-- 

 -->
<script>
  export default {
    name:'Student',
    data(){
      return {
        name:'wei1111 '
      }
    },
  }
</script>

<style>
</style>

school.vue

<template>
  <div>
    <h3>学校名称:{{name}}</h3>
    <input type="text" v-fbind:value='name'><!-- 2. 自动获取焦点 -->
  </div>
</template>

<script>
  export default {
    
    name:'School',
    data(){
      return{
        name:'渲染学校'
      }
    },
  }
</script>

<style>
</style>

　　main.js

import Vue from 'vue'
import App from './App.vue'
import Plugin from './plugins.js'
Vue.use(Plugin)
Vue.config.productionTip = false
new Vue({
  el:'#app',
  render: h => h(App)
})

　　plugins.js

export default{
  install(Vue){
    //全局过滤器
    Vue.filter('mySlice',function(value){
    return value.slice(0,4)
  })
    
    //全局使用（find）
     Vue.directive('fbind',{
     bind(element,binding){
     element.value = binding.value
  },
     //指令所在元素被插入页面时
     inserted(element,binding){
     element.focus()//首次获取焦点
   },
     //指令所在模板被重新解析
     update(element,binding){
     element.value = binding.value
     element.focus()//一直获取焦点 
   }
  }),
  
    //定义混入
    Vue.mixin({
      data(){
        return{
          x:'111'
        }
      }
    }),
    
    //给原型链上添加一个方法
    Vue.prototype.demo = ()=>{alert('hello')}
    
    
  }
}