Vue学习之--------Vue中自定义插件(2022/8/1)
2023-09-14 09:07:25 时间
文章目录
1、插件的基本介绍
-
1、功能:用于增强Vue
-
2、本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
-
3、定义插件:
对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }
-
4、在main.js中
使用插件:Vue.use()
2、实际应用
2.1 目录结构
2.2 代码实例
2.2.1 学校组件(School.vue)
<template>
<div class="demo">
<h2>学校名称:{{ name | mySlice}}</h2>
<h2>学校地址:{{ address }}</h2>
<input type="text" v-fbind:value="name">
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "长沙大学真不赖",
address: "湖南长沙",
};
},
methods: {
showName() {
alert(this.name);
},
},
};
</script>
<style>
.demo {
background-color: pink;
}
</style>
2.2.2 学生组件(Student.vue)
<template>
<div>
<h2>学生姓名:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<h2>学生年龄:{{ studentAge }}</h2>
<button @click="modifiAge">修改学生年龄</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "zyz",
sex: "男",
studentAge: 18,
};
},
methods: {
modifiAge() {
this.studentAge++;
},
},
};
</script>
2.2.3 定义的插件
const plugin = {
install(Vue) {
//定义全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 5)
})
//定义全局指令
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
}
},
})
}
}
export default plugin
2.2.4 App.vue (汇总定义的组件)
<template>
<div>
<Student/>
<hr />
<School/>
</div>
</template>
<script>
//引入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
name: "App",
components: {
School,
Student,
},
};
</script>
2.2.5 main.js中引入组件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import plugin from './plugins'
Vue.use(plugin)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3、测试效果
4、什么是mixin(混入)
-
1、功能:可以把多个组件共用的配置提取成一个混入对象(便于维护、共用部分抽取出来、同时提高代码复用)
-
2、使用方式:
第一步定义混合:
{ data(){....}, methods:{....} .... }
第二步使用混入:
全局混入:
Vue.mixin(xxx)
局部混入:mixins:['xxx']
相关文章
- vue笔记:vue组件的生命周期
- React和Vue对比
- 富文本框vue-quill-editor的使用
- [Vue @Component] Extend Vue Components in TypeScript
- [Vue] Dynamic Vue.js Components with the component element
- [FE] 被动检测 iframe 加载 src 成功失败的一种思路和方式 (Vue)
- vue学习:xmg vue学习笔记2/14代码案例
- vue学习笔记
- vue快速学习02、基础用法
- Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
- Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
- 前端框架Vue------>第一天学习(2) v-if
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
- vue-route(三)后台管理路由配置
- 【vue】vue的插值语法及常用指令的应用_02
- vue快速学习01、环境与常用属性标签
- Vue学习笔记——vuex
- Vue学习笔记——使用Vue脚手架
- Vue学习笔记——Vue核心
- 测试开发之Vue学习笔记-Vue组件