plugins.js
export default {
install(Vue,x,y,z){
console.log(x,y,z)
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.prototype.hello = ()=>{alert('你好啊')}
}
}
Student.Test.vue
<template>
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default {
name:'Student-Test',
data() {
return {
name:'lala',
sex:'女'
}
},
}
</script>
School-Test.vue
<template>
<div>
<h2>学校名称:{{name | mySlice}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="test">点我测试一个hello方法</button>
</div>
</template>
<script>
export default {
name:'School-Test',
data() {
return {
name:'尚硅谷12345',
address:'北京',
}
},
methods: {
test(){
this.hello()
}
},
}
</script>
App.vue
同上。
main.js
import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins'
Vue.config.productionTip = false
Vue.use(plugins,1,2,3)
new Vue({
el:'#app',
render: h => h(App)
})