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中自定义插件(2022/8/1)的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  2. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  3. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  4. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  5. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  6. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  7. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

随机推荐

  1. InnoDB 中不同SQL语句设置的锁

    锁定读.UPDATE 或 DELETE 通常会给在SQL语句处理过程扫描到的每个索引记录上设置记录锁.语句中是否存在排除该行的WHERE条件并不重要.InnoDB不记得确切的WHERE条件,但只知道哪 ...

  2. you need to load the kernel first

    背景:在用第三方软件备份win10系统时,提示you need to load the kernel first 1.进BIOS把硬盘AHCI 模式调整成 SATA. 2.检查硬盘数据线是否插紧.主板 ...

  3. DolphinScheduler 源码剖析之 Master 容错处理流程

    点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...

  4. Unity3D学习笔记11——后处理

    目录 1. 概述 2. 详论 2.1. 实现 2.2. 解析 1. 概述 一般来说,图形渲染引擎都会把帧缓冲(Framebuffer)技术封装成两个接口,其中之一就是后处理(Post-process) ...

  5. Python图像处理丨基于OpenCV和像素处理的图像灰度化处理

    摘要:本篇文章讲解图像灰度化处理的知识,结合OpenCV调用cv2.cvtColor()函数实现图像灰度操作,使用像素处理方法对图像进行灰度化处理. 本文分享自华为云社区<[Python图像处理 ...

  6. 漏洞扫描工具awvs13破解

    AWVS13_windows破解版:链接:https://pan.baidu.com/s/1qeGiNubhWgY6oeMx_IkMtg 提取码:2i2o AWVS13_linux破解版:链接:htt ...

  7. html js 导出excel表格

    这个使用js 导出excel,可以集成其他语言,可以html,php,asp ,java 等,自己喜欢用那种语言就用哪种,使用非常方便.js是使用tableExport.js ,jquery-3.2. ...

  8. [NOIP2018提高组] 保卫王国 (树链剖分+动态DP)

    题面 题目链接-Luogu 题目链接-Loj(要加Freopen) 题解 什么是动态DP? OneInDark:你不需要知道这么多,你只需要知道是利用了广义矩阵乘法就够了! 广义矩乘 广义矩阵乘法,简 ...

  9. CEOI 2019 Day2 T2 魔法树 Magic Tree (LOJ#3166、CF1993B、and JOI2021 3.20 T3) (启发式合并平衡树,线段树合并)

    前言 已经是第三次遇到原题. 第一次是在 J O I 2021 S p r i n g C a m p \rm JOI2021~Spring~Camp JOI2021 Spring Camp 里遇到的 ...

  10. 【Java】学习路径63-反射、类的加载-附思维导图(完结)

    这一章的知识在实际开发也没有那么重要,主要是了解即可,另外掌握如何使用反射机制. 类的使用: 在虚拟机中: 类的加载->类的连接->类的初始化 类的加载   只会加载需要用到的类,加载到内 ...