yhr0322的博客

原创 el-dialog组件封装-El-Dialog---vue

废话不说了，直接上干货！（亲测好用）**1，封装Dialog.vue文件**<template> <div class="base-dialog"> <el-dialog :type="type" :width="width" :custom-class="customClass" :fullscreen="fullscreen" :tit

原创 案例】js 获取今天/昨天/近一周/一月/一年的日期，时间戳转日期，

【代码】案例】js 获取今天/昨天/近一周/一月/一年的日期，时间戳转日期，

原创 全屏vue组件--f11

直接注册 应用就可以。

原创 vue2封装摄像头拍照（输出流文件）

【代码】vue2封装摄像头拍照（输出流文件）

原创 Comments are not permitted in JSON.报错

Comments are not permitted in JSON.允许我水一下！ 这个的意思就是Json不允许备注！那你就别备注了呗，不听话呢咋

原创 web前端面试题

面试题整理1.css3新特性*flex 媒体查询 怪异盒子 transition transform animation box-shadow新增选择器nth-of-type last-of-type first-of-type nth-child nth-last-child2.html5新增特性语义化标签 nav header main section footerInput新增属性 search email url time本地存储CanvasAudio video 新增sou

原创 基于element-ui封装select下拉树形

1.ELEMENT实现下拉树组件调用<template> <!-- 行模式 --> <el-form inline> <el-form-item label="inline 默认："> <select-tree :options="options" v-model="selected" /> </el-form-item> <el-form-item label="inline 定

原创 js多线程----拾伍浅谈

为什么 JavaScript 是单线程 ？JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript 不能有多个线程呢 ？这样能提高效率啊。JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定Jav...

原创 js的内存泄露

1.背景介绍什么是内存泄漏内存泄漏是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在C++中，因为是手动管理内存，内存泄漏是经常出现的事情。而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄漏。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，因此会产生内存泄漏。2.知识剖析2.1、js的回收机制垃...

原创 什么是clone函数

**什么是值类型、引用类型?**很多新手可能会对 “值类型”、“引用类型”、“原始类型”、“基本类型”等等名称感到困惑. 这里就解释一下这些概念.一个事物是可以有多种区分形式的.比如,猫,我们可以说它是猫科动物,也可以说它是哺乳动物,也可以说它是食肉动物.在编程语言的世界里也是一样的.在JavaScript的世界里, 数据被定义为以下 7 种 数据类型 :6种 原始类型(又叫 基本...

原创 js数组去重方法

数组去重1.利用for嵌套for，然后splice去重（ES5中最常用）function unique(arr){ for(var i=0; i<arr.length; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二...

原创 微信小程序之WXS--拾伍浅谈

WXS**WXS（WeiXin Script）**是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。注意1.**WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。2.WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。3.WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 Java...

原创 微信小程序的五个生命周期函数

微信小程序的五个生命周期函数：onLoad(Object query)里面传入一个对象,页面加载的时候触发。onShow() 页面显示/切入前台的时候触发onReady()页面初次渲染的时候触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。onUnl...

原创 小程序组件传值--拾伍浅谈

父传子<!-- 父组件A wxml --><view> <componentB paramAtoB='{{paramAtoB}}'></componentB></view>//父组件Ajson （里面不能有注释）{ "navigationBarTitleText": "父子传值", "usingComponents...

原创 什么是前后端联调？

什么是前后端联调？？前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法需要前后端联调时的应用资源！1.css,js,图片等静态资源文件。2.ajax用来获取后端的数据。需要前后端联调时的应用场景！1.开发阶段2.调试阶段前后端分离的架构的应用可能也分为两种情况：1.前后端完全分离，前后端分别拥有自己的域名和服务器...

原创 移动端和pc端的区别

PC端与移动端的区别pc端与移动端从兼容性、事件处理、布局、动画处理上来说有五种区别1.从兼容方面来说，PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核。移动端：① 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小解决方案： 用2X图片来代替img标签，然后backgrou...

原创 Swiper动态渲染后轮播图划不动解决方案

一、问题描述在开发一个Jquery项目时，用到了Swiper插件，并且因为要求数据的动态性，所以swiper-wrapper里面的swiper-silde都是由Jquery动态渲染出来的DOM，结构如图所示二、问题分析在使用上图结构时，添加静态数据可以使用Swiper的所有功能，但在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能就...

原创 虚拟Dom--diff算法

diff算法diff算法小编拾伍自己认为包括三部分：1.虚拟DOM树的遍历、2.parent节点下的children的比较、3.diff完成之后对真实3.DOM的操作时机虚拟DOM的遍历：虚拟DOM说到底只是一颗树形结构，对于树的遍历我们知道有深度遍历和广度遍历一、指代不同1、深度优先遍历：是对每一个可能的分支路径深入到不能再深入为止，而且每个节点只能访问一次。2、广度优先遍历：...

原创 HTTP常见状态码（404、400、500）等错误

一些常见的状态码为：200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 （继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。2xx （成功）表...

原创 浅谈Vue的响应式原理

一、响应式的底层实现1、Vue与MVVMVue是一个 MVVM框架，其各层的对应关系如下View层：在Vue中是绑定dom对象的HTMLViewModel层：在Vue中是实例的vm对象Model层：在Vue中是data、computed、methods等中的数据在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新2、Vue的响应式原理Vue响应式底...

转载 vue-router实现原理

根据自己理解，来记录下。我们知道vue-router是vue的核心插件，而当前vue项目一般都是单页面应用，也就是说vue-router是应用在单页面应用中的。那么，什么是单页面应用呢？在单页面应用出现之前，多页面应用又是什么样子呢？标题单页面应用与多页面应用单页面即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件...

原创 vue----前端精选50道面试题---一个小白的孤芳自赏

1.vue的工作流程 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191031090220424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3locjAzMjI=,size_16,...

原创 axios如何执行同步----async

axios执行同步**axios:**是一种异步请求的方式 ，通过回调函数的方式在请求中做的更多的是可控的功能，简单介绍一下axios,有疑问的可以看我的博客里边有axios的详细介绍，以及一些个应用场景！！！axios从入门到精通精解https://blog.csdn.net/yhr0322/article/details/101977534axios同步之async-----a...

原创 axios跨域---vue

1.首先得知道跨域是什么？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请...

原创 loading加载齿轮旋转动画------css3源码

loading加载齿轮旋转动画css3源码最近项目中的动画效果有点low 所以恶补了一下css3决定自己手写一个当然了 要是对大家有帮助的话，记得关注点赞啊！！废话少说，开整html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3网页齿轮动画加...

转载 git提交代码

有一个新的patch操作总结:（完整版）（1）验证patch；在driver上打patch，build driver后，拷贝新生成的库到文件系统rootfs里，在板子上跑case，case跑成功，说明这个patch可用； 打patch：patch -p1 < 0001-IMX-1177-BUG-20608-CL180084-NXP-OpenVX-SoftISP-have-.patch//...

原创 js拖拽且无Bug---js原生代码

平民教程之js拖拽再编写代码中很多地方用到拖拽事件当然了现在网上也有很多的插件可以方便快捷的使用‘但是就小编拾伍自己而言，个人还是觉得用原生的好一点，原生js永远都是重中之重,只会用框架不懂底层原理永远达不到精通所以在此献上一篇原生js的拖拽<html> <head> <meta charset="UTF-8"> <title>...

转载 css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubibezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）...

原创 js添加购物车抛物线动画效果

电商必备—抛物线动画废话少说直接上代码！！！主要是通过event对象获取鼠标当前点击位置然后css3—》 transition: left 1s linear, top 1s ease-in;实现抛物线（小球移动时向右和向上的速度不一致 ，一个快一个慢，从而实现抛物线）关于这个文章中css3中的linear和 ease-in**在下一篇文章中小编拾伍会做详细介绍的，可以关注我的博客，浏...

原创 vue3.0和2.0的区别

1.1 Vue 3.0的新特性以及原理1.1.1 观察机制 简述：更完备、更精准、更高效，可以对响应式跟踪进行调试，新增了一个创建可观察对象（observable）的 API。 3.0 版本里将有一个基于 Proxy 的观察者，它会提供全语言覆盖的响应式跟踪。相比于 2.x 版本里基于 Object.defineProperty 的观察者，新的实现更加...

原创 v-show不作用

今天在编写项目是：用到了v-show来决定一个元素的显示隐藏，但是在确认业务逻辑没有问题的情况下，v-show还是不起作用，在**console.log()**控制台输出 也确实是发生了改变，就是页面不起作用，后来用typeof()检测了一下数据类型才知道，是字符串，他应该是boolean才对！原来是定义的时候搞错了 定义的时候：show:“true” 应该是：show:true...

原创 Error in v-on handler: "TypeError: Cannot read property 'findIndex' of undefined"

Error in v-on handler: “TypeError: Cannot read property ‘findIndex’ of undefined”报错“findindex‘ of undefined一般来说就是findindex前边的不是数组 要不就是单词拼写有错 或者是内部的条件错了大部分都是粗心导致的...

原创 ES6对比ES5新增的内容

关于ES6新增的东西查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 JavaScript ES6 的大部分功能一、变量和变量的作用域ES5：定义变量用 var=5；使用var来定义变量会使变量泄露到其他的代码块，并且使用...

原创 vue-思维导图

原创 Axios-精解-方式-拦截

Axios特性支持node端和浏览器端promise丰富的配置项transformRequesttransformResponsebaseURL拦截器…社区庞大安装 npm i axios使用npm// 哪个地方用得到就在哪个组件引入 import Axios from 'axios'CDN常用方法基本用法axios({ method: ...

原创 路由--vue

Vue-router两种模式hash（默认）history嵌套路由关键字：children// 一级路由{ path: '/about', name: 'about', component: About, children: [ // 二级路由 { path: '', name: ...

原创 Vue--生命周期

生命周期Vue2.0默认是8个生命周期方法名 状态 含义beforeCreate creating 状态 实例创建之前调用created creating 状态 实例创建成功，此时 data 中的数据显示出来了beforeMount mounting 状态 数据中的 data 在模版中先占一个位置mounted mounting 状态 模版中的 data 数据直接显示出来了befor...

原创 下载配置-vue目录--详解

1、 vue-cli 脚手架安装 环境 资源 测试 热启动 打包上线webpack 主流 前端三大自动化工具gulp gruntvue-cli 脚手架 安装1）测试是否有node 环境 并且 node 版本>=v 8.11.0 使用命令 node -v2）为了让下载包的速度快 安装 cnpm 测试有没有：cnpm -v 有 ok 没有：http://...

原创 Vue-动态组件-单向数据流-跨组件通信-Prop验证

为什么组件中的data必须是一个函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> // cons...

原创 组件传值Demo

自学Vue-组件传值-由上而下今天在网上看了几个Vue的传值，有点太官方了！对于我们这些小白有点困难，所以自己写了一个小demo.分享一下！！！友情提示（复制粘贴的时候，记得下载官方的VUE.js）在下方有链接这是链接Vue.js的官网(http://doc.vue-js.com/v2/guide/installation.html)废话少说，直接上代码！<!DOCTYPE h...