vue--day40--plugins插件

标签：插件 vue name -- value element Vue 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>

标签：插件,vue,name,--,value,element,Vue,plugins
From： https://www.cnblogs.com/satisfysmy/p/17574995.html