插件使用

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')}
		
		
	}
}