- 博客(21)
- 收藏
- 关注
RSS订阅原创 vue事件总线EventBus的使用
前言在父子组件的通信中，我们会使用props向子组件传递数据，而子组件会通过$emit自定义事件向父组件发送数据。那么在多层组件场景下，两个组件之间没有直接的引入关联，该如何通信呢？常用的方案有两种，一种使用vuex状态管理，另一种那个便是使用EventBus来解决通信问题。使用方法1. 定义在main.js中定义eventbus挂载到vue实例原型上。// main.jsVue.prototype.$EventBus = new Vue()2. 发送事件在A页面触发事件，第一个参数为事
2022-05-22 23:42:56
2465
原创 Nuxt项目的部署教程
前言由于vue通过js动态控制路由去生成内容，导致搜索引擎无法收录，天生不适合SEO。而Nuxt是一款基于vue的框架，内置了服务器端渲染。Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端，而不是纯 javascript。与传统的 Vue SPA 相比，使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。Nuxt的部署与vue有出入，主要有两种模式，npm run generate和npm run build方式一、generate模式这种模式打
2022-05-08 23:37:32
12177
2
原创 web端video截图和录屏功能的实现
web端video截图和录屏功能的实现前言平常在用视频app，特别是一些摄像头监控软件的时候，经常会对直播、回放的视频进行抓拍录屏的操作。今天就来实现一下这两个功能思路截图： 主要是利用canvas的drawImage和toDataURL两个方法。将获取到的video标签加入到canvas中，然后再将canvas导出为图片。drawImage： 可以在画布上绘制图像、画布或视频；也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸；toDataURL： 返回一个包含图片展示的 da
2022-05-04 23:52:51
3317
7
原创 微信小程序 tree树形组件的实现
前言最近公司的小程序来了一个需求，需要实现一个树形结构的展示。pc端的tree组件可谓百家争鸣，拿来即用的组件很多，奈何在网上检索一番，并未发现小程序端有适合的tree组件，于是便开始了尝试，自己写一个简单的tree组件。（末尾附完整代码）先看效果开始首先项目结构如图模拟一下树形结构数据index/index.js data: { dataTree: [ { id: 1, name: '一级A', children: [
2020-12-27 17:25:42
8872
8
原创 cnpm : 无法加载文件 C:\Users\12042\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息
解决：1.以管理员身份打开 power shell2. 输入 set-ExecutionPolicy RemoteSigned3. 再输入 A 或者 Y
2020-11-28 17:12:11
162
原创 echarts图表鼠标移入时会产生抖动
问题描述：配置tooltip属性，鼠标悬浮事件频繁发生解决：tooltip: { transitionDuration:0}提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。参考...
2020-05-05 15:50:55
3798
2
原创 【vue】filter过滤器的用法
前言过滤器filter经常被用在文本的格式化。比如时间戳的转化，价格符号的添加（￥），分为局部过滤器和全局过滤器。种类一、局部过滤器写在组件内部，供该组件使用1.定义单个过滤器afterprice，给价格添加符号 <ul> <li v-for="item,index in list"> <span>{{item.na...
2020-04-12 22:26:54
455
原创 【JS】JavaScript之闭包的详细解释
前言闭包在js中应用非常广泛，也是极为重要的知识点。刚开始了解闭包时也是云里雾里，花了好长时间才搞明白。下面来详细叙说一下闭包的知识。一、准备知识要理解好闭包的概念，我们首先得清楚下面的三个知识点：作用域（全局变量和局部变量）链式作用域结构js垃圾回收机制1、作用域变量作用域分为全局变量和局部变量先看下面一段js代码 var name = '小明' funct...
2020-03-25 03:02:03
212
原创 【JS】节流、防抖的介绍
前言刚开始看到这三个名词有点不知所措，不清楚到底指的是啥，后面了解了才知道其实我们有时已经使用过了，只是不知道这一个名词而已。下面就来详细的介绍一下。节流1、概念：控制函数在某个时间段内只触发一次一个简单的例子，比如最近因为国外疫情的爆发，很多人选择回国。那么这段时间安检人员进行安检是一个持续触发的事件，然后我们控制安检人员每30s执行一次安检。这就是节流：控制函数在某个时间段内只触发一...
2020-03-21 00:20:21
135
原创 【阿里云】如何使用阿里云搭建个人网站
前言作为一个前端切图仔，怎么能没有自己的个人网站呢。这篇文章就教大家使用阿里云搭建一个个人网站。话不多说，请往下看一、购买阿里云服务器首先我们得有一个云服务器去部署我们的项目，你可以选择阿里云，腾讯云等各种云。（以阿里云为例）登录阿里云，选择最新活动-->新手上路-->免费试用只要你没有用过阿里云的产品，你就可以免费领取下面的云服务器最基础的配置，个人测试是没问题，如果...
2020-03-20 02:57:02
1330
原创 【node】node.js实现一个简单的爬虫
前言我们写项目的时候会需要模拟数据，这里教大家使用node去实现一个简单的爬虫，获取目标网站的数据资源。（末尾附完整代码）思路首先找到目标网页，爬取整个网页的html内容，查看网页源代码，找到需要爬取内容的DOM结构，根据正则或者使用jquery操作（cheerio）提取相应的内容，然后将结果写入文件。一、准备所需要的模块：1、http：网络通信2、fs：文件操作3、cheerio...
2020-03-17 21:50:52
583
2
原创 【node】node.js怎么用递归删除非空目录
前言使用fs.unlink()或者fs.unlinkSync()可以删除文件，使用fs.rmdir()或s.rmdirSync()可以删除空的目录。但是一个非空目录并没有直接的操作去删除。这样只能去封装一个函数。思路1.首先定义一个函数，传入一个目录路径，判断路径是否存在fs.existsSync()2.读取该目录下的所有资源（文件、空目录，非空目录）fs.readdirSync()3....
2020-03-14 22:05:53
941
原创 【ES6】let、var和const的区别
一直没有好好地学习ES6，最近准备从头到尾撸一遍，记录一下自己的心得。前言：ES5中声明变量只有两种方式：var 和function，在ES6中新增了let和const方式。它们都是去定义一个变量，当然不同的方式含义也不同。一、constconst的中文含义是恒定的，这里你可以理解为const定义一个变量之后，它的值不可改变（这个说法不准确，后面会说到）。因为不可修改，所以声明时必须赋初始...
2020-02-29 23:10:33
143
原创 【css】什么是浮动、清除浮动的方法
什么是浮动？什么是浮动呢？首先css里面的很多元素属于块级元素，即它会单独占据文档的一行。而浮动的元素，它会脱离文档流。设置了浮动的元素可以左右移动，知道它的外边框碰到另外一个块级元素边框。标准文档流下，一个只设置宽未设置高度的div包裹两个设置高宽的div，会如图撑开。代码：<!DOCTYPE html><html lang="zh"><head>...
2020-02-29 01:04:01
129
原创 【JS实例】原生JS轮播图之旋转木马（自动、手动切换）
前言轮播图是开发网站、app不可缺少的页面结构。轮播图有很多种，3D模式，碎片化等。这里简单写一种旋转木马形式的，如下面图：实现原理：左右两侧效果用的是transform的rotateY属性，使图片看起开具有3D效果，分别定义三种状态的样式，然后每次调换图片的样式源码（主要代码附带解释）：css： *{ margin: 0; ...
2020-02-28 22:57:24
1982
原创 【axios】axios拦截器 实现路由跳转、用户登录及token验证
我们平时开发项目中，并不是所有的路由都可以直接访问，有些路由需要登录之后才可以查看，这里就需要在跳转时进行一个判断，如果已经登录则直接跳转，否则跳转到登录页。通过全局导航守卫实现，即router.beforeEach。 这并没有结束，本地可能存在登录信息...
2020-02-27 17:16:49
12281
5
原创 【vue】keep-alive的使用，vue返回上一页不刷新
用vue做单页应用，在我们来回切换路由或者点击返回键的时候，页面总是会重新刷新。这样的用户体验是非常差的，我们希望页面的数据会保留，而不是每次进入都要重新载入。这里我们可以使用vue官方提供的内置组件keep-alive，------>官方传送门。下面简单介绍一下如何使用。一、强制缓存1、所有的组件都缓存<keep-alive> <router-view...
2020-02-26 17:04:48
1650
原创 【 JS 】什么是JavaScript事件冒泡、事件捕获和事件委托
前言在W3C事件模型中，一次事件的发生包含3个过程1.捕获： 先由文档的根节点document（window ）接收，然后逐级向下传播，直到具体的事件元素2.目标： 事件源，触发事件3.冒泡： 与捕获相反，逐级向上，直到文档根节点（1）可以简单理解为事件发生的顺序不同，（2）绑定事件方法addEventListener（“事件名”，事件function，true），第三个参数默认为fa...
2020-02-21 00:41:27
231
原创 【 vue 】vue项目打包成app按物理返回键直接退出、同时如果存在弹窗的解决方法
我们将vue项目打包成app后，当按下物理返回键时，会直接退出app。这当然是不可取的，正确应该是在大路由页面单击提示，双击退出。而在子页面按下返回键会回退上一页，如果存在弹窗会先关闭而不返回，再次点击时返回。解决方法如下。1.安装mui使用mui框架，mui框架将窗口关闭功能封装在mui.back方法中npm install vue-awesome-mui2.在main.js中引入i...
2020-02-20 16:31:39
2052
4
原创 【vue】vue/cli3项目没有config文件夹，怎么配置在手机上访问项目
最近用vue做一个手机端的项目，写完几个页面之后想着用手机测试，但是直接输入 ip+端口号是不可以的（192.168.xx.xx:8080）在之前2.x版本的时候 可以通过修改config文件夹下的config.js, ,但是3.x版本的没有这个文件夹。就需要自己来新建了。1.首先在项目根目录新建vue.config.js文件然后在vue.config.js输入module.expo...
2019-11-27 13:00:39
22729
原创 【微信小程序】 控制台报错 undefined Expecting 'STRING', got
@](这里写自定义目录标题)欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界...
2019-11-26 12:57:50
881
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人