vue--day40--plugins插件

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>