北京建行网站/举例说明什么是seo
提示:记录工作中遇到的需求及解决办法
文章目录
- 前言
- 一、目录结构
- 二、代码
- 1. 创建 m-Toast.vue 文件
- 2. 创建 global.js 文件
- 3. 在 main.js 文件中导入 global.js 文件
- 4. 在 App.vue 文件中使用 全局方法创建的 组件
前言
在此之前一直不明白Vue.extend( )干什么用的,如何使用,看了一些视频,再结合vue文档,浅浅的理解了一些,以及一些简单的应用,如有不对请指出。
我将使用脚手架生成一个vue2项目来解释。
提示:以下是本篇文章正文内容,下面案例可供参考
一、目录结构
二、代码
1. 创建 m-Toast.vue 文件
<template><div class="message"><div class="text">{{ text }}</div></div>
</template>
<script>
export default {name: 'm-Toast',props: {text: {type: String,default: ''},},mounted () {this.timer = setTimeout(() => {this.$destroy()clearTimeout(this.timer);}, 2000)},destroyed () {clearTimeout(this.timer);document.body.removeChild(this.$el)},methods: {},
}
</script>
<style scoped>
.message {min-width: 380px;background-color: #f0f9eb;color: #67c23a;position: fixed;padding: 15px 15px 15px 20px;top: 20px;left: 50%;z-index: 2022;font-size: 14px;transform: translate(-50%, 0);
}.text {overflow: hidden;align-items: center;
}
</style>
2. 创建 global.js 文件
import Vue from "vue";
import Toast from "./components/m-Toast.vue";/** 创建 Toast对应的Vue子类(构造器)* 结合vue文档 和 视频,* extends 的参数可以通过导入一个写好的组件* 或者 是函数 ,例如: * {* template: '<div class="message">* <div class="text">{{ text }}</div>* </div>',* data: function () {* return {* text: '测试',* }* }* }* 下面我选择通过导入组件的方法,因为方便使用样式,结构更明了*/
let ToastSubclass = Vue.extend(Toast)// 全局挂载到原型上方便调用
Vue.prototype.$toast = function (text) {// 创建实例let ToastConstructor = new ToastSubclass({// 就是在调用组件的时候,给组件传递属性值propsData: {text}});/** 挂载(渲染组件)* 使用 $mount() 但不传挂载点,返回一个完整的 Vue 组件实例*/ToastConstructor.$mount()// 把渲染后的真实DOM插入到BODY中即可document.body.appendChild(ToastConstructor.$el)
}
3. 在 main.js 文件中导入 global.js 文件
import Vue from 'vue'
import App from './App.vue'
// 导入 global.js 文件
import './global.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
4. 在 App.vue 文件中使用 全局方法创建的 组件
<template><div id="app"><button @click="config">按钮</button></div>
</template><script>export default {name: 'App',data () {return {count: 0}},mounted () {},methods: {config () {this.$toast(`测试${this.count++}`)}}
}
</script><style></style>
相关文章:

使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、目录结构二、代码1. 创建 m-Toast.vue 文件2. 创建 global.js 文件3. 在 main.js 文件中导入 global.js 文件4. 在 App.vue 文件中使用 全局方法创建的 组件 前言 在此之前一直不明白Vue.extend( )干什么用的…...

ansible部署二进制mysql 8
1、配置文件 ll /ansible -rw-r--r-- 1 root root 836 Sep 22 12:09 my.cnf -rw-r--r-- 1 root root 810 Sep 22 07:21 mysql.service -rw-r--r-- 1 root root 2731 Sep 22 12:32 mysql.yam2、my.cnf内容 rootbole:/ansible# cat my.cnf [mysql] #设置m…...

【2023工业3D异常检测文献】基于混合融合的多模态工业异常检测方法Multi-3D-Memory (M3DM)
Multimodal Industrial Anomaly Detection via Hybrid Fusion 1、Background 随着3D传感器的发展,最近发布了具有2D图像和3D点云数据的MVTec-3D AD数据集,促进了多模态工业异常检测的研究。 无监督异常检测的核心思想是找出正常表示与异常之间的差异。…...

基于微信小程序的宿舍报修系统的设计与实现(lw+演示+源码+运行)
摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对成果信息管理混乱,出错率高,信息安全性差&am…...

前端练习总结(1)
前端实习练习题 前端实习笔试题0920 visibility:hidden display:none把鼠标移到按钮并点击时 hover active focus的顺序代码输出结果1代码输出结果2CSS中哪些属性可以继承cookie sessionStorage localstorage区别面向对象基本特征有哪些,请具体说明下列关于v-model的说法,哪项…...

计算机网络自顶向下(1)---网络基础
目录 1.网络的分类 2.网络协议 3.网络分层结构 1.OSI七层模型 2.TCP/IP四层模型 3.网络与OS的关系 4.网络传输基本流程 1.协议报头 5.网络中的地址管理 1.IP地址 2.端口号 6.传输层协议 1.TCP协议 2.UDP协议 3.网络字节序 7.socket 1.网络的分类 局域网&…...

Pandas -----------------------基础知识(五)
索引和列操作函数缺失值 索引和列操作 # 1 加载数据 # 1.1 从链家租房数据集中获取天通苑租房区域的所有数据存储在df2中 # 1.2 从df2中获取价格列存储在df2_price对象 import pandas as pd df pd.read_csv(/root/pandas_code_ling/data/b_LJdata.csv) df2 df[df[区域] 天通苑…...

RabbitMQ 高级特性——重试机制
文章目录 前言重试机制配置文件设置生命交换机、队列和绑定关系生产者发送消息消费消息 前言 前面我们学习了 RabbitMQ 保证消息传递可靠性的机制——消息确认、持久化和发送发确认,那么对于消息确认和发送方确认,如果接收方没有收到消息,那…...

每天一道面试题(20):锁的发生原因和避免措施
死锁的发生原因和避免措施 一、概述 在多线程编程中,死锁是一个常见的问题。理解死锁的成因和避免策略是提升程序稳定性和性能的重要能力。 二、普通人 vs 高手的回答 普通人回答: “临场发挥…” 高手回答: “死锁是指两个或多个线程在执…...

2024淘宝双11活动,收下这份必买好物推荐清单
双11如何真正值得购买的好物呢?为了帮助大家把握住这次难得的购物良机,我们特别推出了这份“2024淘宝双11必买好物推荐清单”。这份清单涵盖数码电子、家居生活、个护健康等多个领域的优质产品。无论你是科技爱好者,还是注重生活品质的消费者…...

vue-cli,element-plus,axios,proxy
一、vue-cli vue-cli俗称vue脚手架,是vue官方提供的快速生成vue 工程化项目的工具。 1.官网:https://cn.vuejs.org/ 中文官网: https://cli.vuejs.org/zh/ 特点:基于webpack,功能丰富且易于扩展,支持创建vue2和vu…...

《Zeotero的学习》
学习视频链接 Zeotera的安装 官网点击download,选择合适的版本进行下载,并安装插件。 下载完成之后,点击安装包,一路默认就可以。如果不想下载在C盘,可以在步骤中选择自定义路径。 Zeotero的注册 官网进行注册&am…...

大数据复习知识点1
1、HDFS和MapReduce的起源:HDFS起源于Google的GFS论文,它是为了解决大规模数据集的存储问题而设计的。而MapReduce则是Google为了解决大规模数据处理问题而提出的一种并行计算模型。 2、YARN的作用:YARN是Hadoop的资源管理器,它负…...

9.26 Buu俩题解
[CISCN2019 华东北赛区]Web2 看wp写完之后写的 知识点 存储型XSS与过滤绕过sql注入 题解 好几个页面,存在登录框可以注册,存在管理员页面(admin.php) ->既然存在管理员页面,且直接访问admin.php提示我们 说明存在身份验证࿰…...

Mitsuba 渲染基础
Mitsuba 渲染基础 0. Abstract1. 安装 Mitsuba21.1 下载 Mitsuba2 源码1.2 选择后端 (variants)1.3 编译 2. [Mitsuba2PointCloudRenderer](https://github.com/tolgabirdal/Mitsuba2PointCloudRenderer)2.1 Mitsuba2 渲染 XML2.2 Scene 场景的 XML 文件格式2.2.1 chair.npy to…...

深入理解 WebSocket:实时通信的利器
深入理解 WebSocket:实时通信的利器 1. 什么是 WebSocket? WebSocket 是一种网络通信协议,它允许服务器和客户端之间建立持久的双向通信通道,适用于高频率、低延迟的数据交换场景。在传统的 HTTP 通信中,每次请求都需…...

OpenEuler配置本地yum源
0x00 服务器版本 将本地镜像传输至服务器 操作步骤如下 # 创建一个目录用于挂载光盘映像 mkdir /media/cdrom/# 将光盘映像挂载到指定目录 mount /kvm/openeuler.iso /media/cdrom/#进入Yum仓库配置目录 cd /etc/yum.repos.d/# 备份原有的 openEuler.repo 文件 mv openEuler.…...

论文不同写作风格下的ChatGPT提示词分享
学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 在学术论文写作中,不同的写作风格能显著影响文章的表达效果与读者的理解。无论是描述性、分析性、论证性,还是批判性写作风格,合理选择和运用恰当的写…...

单点登录(SSO)基础
单点登录(SSO, Single Sign-On) 是一种身份认证机制,允许用户在多个独立的应用系统中只进行一次登录操作,即可访问所有授权的应用或服务,而无需每次切换应用时都进行登录。SSO 提高了用户体验的便捷性,同时…...

设置VsCode搜索时排除文件,文件列表中隐藏文件
按照《VsCode gdb gdbserver远程调试C程序》中介绍的方法,配置好VsCode后,打开一个C/C工程,发现左侧的面板会显示编译时生成的中间文件(比如.d和.o文件)。我们可以通过设置隐藏掉一些我们不需要打开的文件以简洁面板…...

急!现在转大模型还来得及吗?零基础入门到精通,收藏这一篇就够了
大模型的出现,让行内和行外大多数人都感到非常焦虑。 行外很多人想了解却感到无从下手,行内很多人苦于没有硬件条件无法尝试。想转大模型方向,相关的招聘虽然层出不穷,但一般都要求有大模型经验。而更多的人,则一直处…...

使用 lstm + crf 实现NER
条件随机场CRF 前言 CRF是给定一组输入随机变量条件下另一组输出随机变量的条件概率分布的模型。特点:假设输出随机变量构成马尔卡夫随机场。CRF可以用于不同的预测问题。但是主要讨论线性链条件随机场,这时问题变成了由输入序列对输出序列的判别模型&…...

【牛掰】这款RPA多平台引流获客软件已正式上线,助您日引流1000+
哈喽大家好我是年哥,自从上次与大家团购了那款基于autojs开发的RPA引流获客的源码,经过本缝合怪不断地修修补补,终于将它变成自己的了,还为它起了个魔幻的名字:获客宝RPA。尽管部分功能还有点瑕疵,但是不管…...

Python的包管理工具pip安装
Python的包管理工具pip安装 一、安装步骤1.检查 pip是否已安装2.安装 pip方法一:通过 ensurepip 模块安装(推荐)方法二:通过 get-pip.py 脚本安装(经常应为网络域名问题连接不上) 3.验证pip安装4.创建别名5.更新pip 二、常…...

《AIGC 时代程序员的应对之策》
在 AIGC 大语言模型不断涌现、AI 辅助编程工具日益普及的当下,程序员的工作方式确实面临着深刻变革。对于程序员来说,如何应对这一趋势成为了至关重要的问题。 一方面,有人担忧 AI 可能取代部分编程工作。不可否认,随着技术的发展…...

51单片机系列-串口(UART)通信技术
🌈个人主页: 羽晨同学 💫个人格言:“成为自己未来的主人~” 并行通信和串行通信 并行方式 并行方式:数据的各位用多条数据线同时发送或者同时接收 并行通信特点:传送速度快,但因需要多根传输线…...

使用k8s部署java前后端服务
一、项目架构 前端、后端、数据库 1)前端 静态的资源:img css html js文件 js:axios、ajax 2)后端 提供数据:根据web前端发送的请求,从数据库中获取数据 请求都是无状态的,如何保持会话 …...

使用docker创建zabbix服务器
首先保证服务器已正常安装docker,然后执行下面这几个容器创建命令: #创建MySQL容器 docker run --name mysql-server -t --restartunless-stopped -e MYSQL_DATABASE"zabbix" -e MYSQL_USER"zabbix" -e MYSQL_PASSWORD"zabbix_…...

nodejs 016: javascript语法——解构赋值({ a, b, c } = {})=>{console.log(“Hello“);}
在 JavaScript 中,函数参数 { a, b, c } {} 的含义是在函数定义时提供一个默认的对象参数。这个对象包含了三个可选的属性 a, b, 和 c。如果没有传递参数或者传递的参数是一个非对象类型的值,那么函数内部将使用一个空对象 {} 作为参数。 示例 const …...

【人人都能看懂的大模型原理】(一)
前言 当前大模型的学习资源呈现爆发趋势,各种角色的人都用自己的视角参与到大模型的讨论。但是我发现这些学习资源都有几个特点:只摆事实而不讲道理;只讲应用可能而不提实现代价;只讲可能性而缺乏实操经验分享;洞察材…...