- 博客(26)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue项目中使用神策进行数据埋点
前言： 在vue种使用神策进行数据埋点一、数据埋点的意义：所谓埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计（track this virtual page view），统计操作行为（track this button by...
2020-12-31 16:53:11
9235
14
原创 vue3.0笔记二：vue3.0中props父子传值的改动
前言： 对vue3.0的学习以及对技术更新升级内容的整理与使用，这里分析下他的props父子传值的改动。vue官方入口一、vue2.0中props的用法1、父组件中 a.vue中template: <b :list='mmm'><b>import b from './b.vue'components: { b },data() { return { mmm: { ...
2020-12-25 15:20:02
24926
10
原创 vue3.0笔记一：vue3.0生命周期以及Setup
前言： 对vue3.0的学习以及对技术更新升级内容的整理与使用，这里分析下他的生命周期。vue官方入口目录：一、图示vue2.0到vue3.0改变二、解析图示的改变三、官方对生命周期钩子的解释四、官方对Setup 的详细介绍参数#Props#Context#访问组件的 property#结合模板使用#使用渲染函数#使用this一、图示vue2.0到vue3.0改变二、解析图示的改变1、去掉了vue2.0中的 beforeCr...
2020-12-24 17:09:09
19611
5
原创 vue-aplayer的api详细讲解
前言： vue-aplayer的api介绍来源：入口目录：一、安装使用 npm使用 yarn推荐二、快速开始传统方式vue中使用：点我进入详细步骤三、具体配置参数fixed可选mini可选autoplay可选theme可选loop可选order可选preload可选volume可选audio必填#customAudioType可选mutex可选lrcType可选listFolded...
2020-12-24 14:04:16
9430
10
原创 vue-aplayer在手机移动端的时候默认没有总时长，点击播放才显示总时长问题
前言： 在移动段使用vue-aplayer这款音频播放组件的时候，发现他默认的时候看不到总时长，只有点击播放才能看到，我的数据是从后台直接拿来的，观察官网没有这个问题，既然出现问题就得解决问题，这里分享下我的解决办法：解决办法一：（尝试过但是不建议使用的）：1、后台数据需要传一个默认总时长过来：props: { /** * 音频配置 * */ songInfo: { type: Object, default: ()...
2020-12-24 13:48:42
849
原创 vue3.0创建项目报错：Cannot find module ‘vue-loader-v16/package.json‘
前言： 在尝试创建vue3.0的项目时候报错的这个，在网上找了好多办法，各种各样的都有，在这里记录下我的解决bug路程报错截图：解决办法： 刚开始我按照vue2.0的解决办法，删包重装，可是试了好多次，npm/cnpm都试过了，还是不行，最后网上找到了办法，使用命令cnpm -- install代替 cnpm install来执行更奇怪的是，第一次装还是报错这个，然后再输入一次命令，他就可以了更多资料：https://blog.csdn.net...
2020-12-21 17:37:01
753
1
原创 vue获取浏览器的指纹码
前言： 获取浏览器的指纹码操作步骤：1.vue安装插件（1）使用CDN在线获取：https://cdnjs.com/libraries/fingerprintjs2（2）使用bowerinstall命令进行安装：bowerinstall fingerprintjs2（3）npm 下载：cnpm install --save fingerprintjs22.vue需要用到的地方引入import Fingerprint2 from 'fingerpr...
2020-12-21 17:17:32
2272
原创 vue组件中修改meta.title
前言： vue中动态修改meta.title的三种方法，我们一般第二种用的比较多方法:1.通过自定义指令去修改（单个修改比较好）//1.在main.js 页面里添加自定义指令Vue.directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title }})//2.在需要修改的页面里添加v-title 指令<div v-titl...
2020-12-21 10:03:00
6120
1
原创 vue组件内动态改meta.title浏览器头部提示信息
前言： vue中我们经常见的是随着切换不同的页面可以修改页面上的meta.title,但是还有另一种情况是我们要在组件内部改动他的提示信息，比如：我们封装了一个详情组件，然后需要每次进来的时候获取后台数据，然后根据数据来修改我们页面上的标题信息实现方法：1 核心代码：修改+刷新 // 动态改title this.$route.meta.title = datas.name //刷新 let ...
2020-12-21 09:56:02
1479
原创 js数组的常用方法：在头部插入，删除，尾部插入，删除等等
前言： 数组常用方法整理1、在数组末尾插入元素 arr.push(value)，在数组的末尾添加一个或多个元素，并返回数组的新长度。例如：let arr=[1,2,3,4,5]var longth=arr.push(6,7);console.log(arr, longth);数组的arr的值变为arr[1,2,3,4,5,6,7];length接收返回的是修改后数组的长度7;2、删除数组末尾的元素 arr.pop()删除索引值...
2020-12-20 11:01:34
45347
6
原创 在线测压网站
网站压力测试就是测试网站能够承受多大的访问量，以及在大访问量的情况下网站的性能。这些指标会直接影响用户的体验，因此在网站上线前一般都要做压力测试。压力测试也是考察网站使用的相关web服务器和框架的一个重要手段。因为和真实的环境不同，压力测试通过模拟得到的结果不会和实际的负载完全相同，但它仍是一个很好的基准比较。做压力测试时也会尽可能地模拟实际的情况。网上大家推荐的较为常见的网站压力测试工具有ab、webbench、http_load、siege、curl-loader、multi-mechan.
2020-12-20 10:54:57
10848
9
原创 vue报错Cannot read property ‘_wrapper‘ of undefined
网上参考的案例：为什么报错不明确？不管你是 npm 包引入还是<script src="..."></script>引入vuejs，看看是不是引入的是压缩后的代码版本，类似vue.min.js。 改成引入未压缩的vuejs的包。实际错误？实际错误是@click="..."其中的方法没有在methods中定义。我自己的问题：在template中： @touchstart="touchstart_home($event)" ...
2020-12-18 09:37:59
2758
原创 vue移动端的一款音频插件vue-aplayer
前言： 之前在移动端使用audio的时候老是有各种问题，尤其是总时长一到移动端就拿不到，这里推荐自己使用的一款移动端音频组件vue-aplayer官网入口：https://gitee.com/dreamteam_322/vue-aplayer目录：实现效果（我这里是在样式里面把功能注释了）：实现步骤：1、安装：2、封装组件 aPlayer.vue ：3、调用template:js部分：官方api文档：安装NodeCDN运行时要求使用...
2020-12-14 20:48:51
9449
20
原创 WebStorm修改Tab缩进为2，vue文件也生效，还可以修改webstrom中vue文件回车的4格缩进为2格，亲测可用
前言： 为了遵循ESLint语法规范，我们需要使用两个空格的tab缩进，使用方法：1、打开设置，找到Code Style2、找到JavaScript和其他类型（为了vue类型的文件），把数字都改成2、3、点击Code Style把勾选的去掉4、重启...
2020-12-08 14:57:20
2714
转载 git 获取不到gitLab创建的新分支
当我们在日常开发功能的时候，肯定会涉及到新建分支的问题，这时候我们本地的IDE就无法去切换新创建好的分支，因为切换的时候根本找不到那个新建的分支，此时可以可以去通过刷新分支达到发现新分支的目的。找到项目的路径并打开GitBash Here然后去执行如下一条命令即可git fetch 刷新分支git branch -a 查看分支这时候IDE切换分支就可以了，小乌龟里也可以找到要切换的新分支。...
2020-12-08 10:31:38
1014
原创 webstorm中本地eslint的配置和使用,线上找不到eslint（2018版）
前言： 在webstorm中配置vue的eslint检查注意： 如果： webstrom 搜不到eslint插件***********************************************************************************（START）*******************************************************************************************...
2020-12-07 15:47:42
2067
2
转载 Vue.directive指令(自定义指令)
定义方式html页面定义Vue.directive("hello",function(el,binding,vnode){ el.style["color"]= binding.value; })全局定义Vue.directive('hello', { inserted(el) { console.log(el); }})局部定义var app = new Vue({ el: '#app', ...
2020-12-07 14:34:51
528
1
转载 使用require.context实现前端工程自动化
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使用require.context替换index.jsmodules在Vue写的项目中,我把路
2020-12-07 14:19:15
236
转载 css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）
什么是sassSass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时【特点】完全兼容 CSS3 在 CSS 语言的基础上增加变量(variables)、嵌套 (nesting)、混合 (mixins) 等功能 通过函数进行颜色值与属性值的运算 提供控制指令等高级功能
2020-12-07 14:05:39
3341
2
转载 scss基本使用及操作函数
操作函数1、for循环@for … from … through @for $var from <start> through <end> // 范围包括<start>和<end>的值1@for … from … to@for $var from <start> to <end> // 范围包括<start>,不包括<end>的值1获取数组中第i项的值nth($arr, $i) 获.
2020-12-07 13:54:03
13281
原创 vue中的keep-alive
前言： 在我们项目中很多地方是需要使用缓存而不是直接重新加载的，比如说：我从首页进入，列表页面，列表页面再进入详情页面，在这个过程中，详情页面返回列表页面的时候我是希望可以看到我刚刚进来详情前的页面，而不是重新刷新，这样用户体验不好，在这里就需要keep-alive了，但是keep-alive的缓存的缓存的话是一直有缓存，在我从列表回到首页后。重新进入列表，我希望的是刷新的列表，而不是缓存的列表。这就是我这里的完整逻辑。vue的keep-alive介绍：有时候我们不希望组件被重新渲染影...
2020-12-04 20:32:01
456
转载 vue中keep-alive的使用及详解
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时
2020-12-04 15:51:24
4356
原创 es6去掉两个数组中的id为一致的对象
前言： es6的方法，分别去除两个数组中id值为一致的对象。生成两个新数组。实现步骤： let arr1=[{id:1,name:"张三"},{id:2,name:"李四"}] let arr2=[{id:1,name:"张三"},{id:3,name:"王五"},{id:44,name:"王柳"},{id:45,name:"王琦"},] let add=arr1.filter(item=>!arr2.some(ele=>...
2020-12-01 10:09:47
2213
原创 es6判断两个数组中的值是否相同
前言： es6判断两个数组的值是否完全相同，不管数组顺序如何。实现代码：将两个数组换成你本身的数组 let listA = val;//当前选中 let listB = this.plainOptions;//数据 let result = listA.length === listB.length && listA.every(a => listB.some(b => a === b)) &am...
2020-12-01 09:59:26
11108
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人