1.main.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({
//将 app 组件放入到容器中
render: h => h(App),
}).$mount('#app')
2. plugins.js
export default {
install(Vue){
console.log("9999999");
//全局过滤
Vue.filter('mySlice',function name(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 和vc 就都能用了
Vue.prototype.hello=()=>{alert("hello你好呀")}
}
}
3. Student.vue
<template>
<div class="demo">
<h2 @click="showName">学生姓名{{name|mySlice}}</h2>
<h2>学生性别{{sex}}</h2>
<input type="text" v-fbind:value="name"/>
<button @click="sayhello">点我弹框hello</button>
</div>
</template>
<script>
export default {
name:"Student",
data() {
return {
name:"张三987654321",
sex:'男'
};
},
methods: {
showName(){
alert(this.name);
},
sayhello(){
this.hello();
}
},
mounted(){
console.log('组件中的mounted');
}
}
</script>