Vue-38、Vue中插件使用

1、新建plugins.js文件

2、可以在plugins.js 定义全局过滤器 定义全局指令 定义混入 给vue原型上添加一个方法

export  default {
  install(Vue){
      console.log("install",Vue);
        //全局过滤器
      Vue.filter('mySlice',function (value) {
          return value.slice(0,4)
      });

      //定义全局指令
      Vue.directive('fbind',{
          //指令与元素成功绑定时（一上来）
          bind(element, binding) {
              element.value  = binding.value;
          },
          //指令所在元素被插入页面时
          inserted(element, binding){
              element.focus();
          },
          //指令所在的模板被重新解析时
          update(element, binding){
              element.value  = binding.value;
          }
      });
      //定义混入
      Vue.mixin({
          data(){
              return{
                  x:100,
                  y:200
              }
          }
      });
      //给VUE原型上添加一个方法   （vm和原型都能用）
      Vue.prototype.hello = ()=>{
          alert('你好啊')
      }
  }
};

3、在mian.js引入插件

//该文件是整个项目的入口文件
//引入Vue
import Vue from 'vue'
//引入APP组件，他是所有组件的父组件
import App from './App.vue'
import plugins from './plugins'
//关闭Vue是生产提示
Vue.config.productionTip = false;
//应用插件
Vue.use(plugins);
//创建Vue实例对象---vm
new Vue({
  render: h => h(App),
}).$mount('#app');

4、在shool 和student组件中可以使用

school.vue

<template>
    <div class="school">
        <h1>学校名称：{{name | mySlice}}</h1>
        <h2>学校地址：{{address}}</h2>
        <button @click="test" >点我测hello方法</button>
    </div>
</template>
<!---->
<script>
    //引入一个混合

    export default {
        name: "School",
        data(){
            return{
                name:'清华大学光华学院',
                address:'北京',
            }
        },
        methods:{
            test(){
                this.hello();
            }
        }

    }
</script>

<style scoped>
    .school{
        background-color: bisque;
    }
</style>

student.vue

<template>
    <div>
        <h2 >学生姓名：{{name}}</h2>
        <h2 >学生年龄：{{age}}</h2>
        <input v-fbind:value="name">
    </div>
</template>
<script>
    export default {
        name: "Student",
        data(){
            return{
                name:'张三',
                age:19
            }
        },

    }
</script>

<style scoped>

</style>```


App.vue

```javascript
<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
        <student></student>
      <School></School>
      <hr>
  </div>
</template>
<script>
import  Student from './components/Student.vue'
import School from './components/School.vue'
export default {
  name: 'App',
  components: {
    Student,
      School
  },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #500012;
  margin-top: 60px;
}
</style>