- 博客(93)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vconsole 移动端调试插件
一，npm 安装npm install -vconsole --save-dev二，初始化配置在入口文件main.js中加入以下代码 var vConsole = new VConsole(); console.log('Hello World');注意：VConsole只是vConsole的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中;未加载 vConsole 模块时，console.log()会直接打印到原生...
2021-11-13 13:13:24
462
原创 vue-router 路由模式
vue-router 路由模式有哪几种？有三种。1. Hash 模式： 使用URL 的 hash 值来作为路由，支持所有浏览器2. History 模式：以来HTML5 History API 和服务器配置，参考官网中HTML5 History 模式tract3. Abstract 模式：支持所有 javascript 运行模式，如果发现没有浏览器的API，路由会自动强制进入这个模式。vue-router 中默认使用的是 hash模式， 也是会出现如下的URL；URL带有#号我们..
2021-09-09 10:08:27
1439
原创 js 基础知识
一，数据类型基础数据类型：number,string,boolean,undefined,null 五类引用数据类型： Object， Array等var length = 7; // 数字var lastName = "Gates"; // 字符串var cars = ["Porsche", "Volvo", "BMW"]; // 数组var x = {firstName:
2021-09-02 14:43:29
165
原创 js 冒泡排序
一，思路1.比较相邻的两个元素，如果前一个比后一个大，则交换位置2.比较完第一轮的时候，最后一个元素是最大的元素3.这时候最后一个元素是最大的，所以最后一个元素就不需要参与比较大小。二，原生js 实现function bSort(arr) { var len = arr.length; for (var i = 0; i < len-1; i++) { for (var j = 0; j < len - 1 - i; j++) { // 相
2021-09-02 10:39:12
88
原创 vue 项目中常用富文本 vue-quill-editor
前言Quill官方中文文档地址：https://www.kancloud.cn/liuwave/quill/1434140
2021-08-29 10:22:03
1003
原创 js 原型链
一，概念每个对象都可以有一个原型 _proto_ , 这个原型还可以有它自己的原型，直到某个对象的原型为 Null 为止（也就是不再有原型指向），组成这条链的最后一环， 这种一级一级的链结构 就称为原型链（prototype chain）JavaScript 对象是动态属性“包”（指其自己的属性）。JavaScript 对象有一个指向一个原型对象的链，当试图访问一个对象的属性时，它不仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型
2021-08-24 15:00:33
94
原创 vue 路由懒加载
一、为什么要使用路由懒加载为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。二、定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。三、使用常用的懒加载方式有两种：即使用vue异步组件和ES中的import1、未用懒加载，vue中路由代码如下 import Vue from 'vue' i...
2021-08-23 13:50:01
211
原创 vue项目中如何使用sass
一，安装1) 使用淘宝镜像安装cnpm i [email protected] i [email protected]) 找到build文件夹，在文件夹里面的 webpack.base.conf.js 文件下修改配置：在module下的rules里天添加配置：3）.vue 文件中使用二，sass用法指南...
2021-08-23 13:27:19
4557
原创 响应式布局
前言响应式布局指的是同一页面在不同的屏幕尺寸下游不同的布局，传统的开发方式是PC端开发一套，手机端开发一套，而使用响应式开发布局只要开发一套代码就够了，缺点就是CSS 比较重。响应式布局表现：响应式布局优缺点：优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计方案， 多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混.
2021-08-20 11:08:44
2030
原创 CSS 盒子模型( Box Model)
所有HTML元素可以看做盒子，在CSS中， 'box model' 这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充 ，和实际内容
2021-08-15 10:56:00
121
原创 Vue注意规范 v-if 与v-for一起使用
前言Vue 官方文档告诉我们，不推荐v-if 与 v-for 一起使用，当一起使用的时候，v-for具有比v-if 更高的优先级，这就意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐v-if 与v-for 同时使用推荐使用方法：推荐使用替代方案：计算属性...
2021-08-14 10:33:33
458
原创 Vue 组件化与模块化的理解
一，前言什么是组件化：组件的出现，就是为了拆分Vue实例的代码量的， 能够让我们以不同的组件来划分不同的功能模块，将来我么需要什么样的功能， 就可以直接取调用对用的组件即可， UI组件组件化 与 模块化的不同模块化：是从代码逻辑的角度进行划分；方便代码进行分层开发，保证每个功能模块的职能单一组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的复用...
2021-08-14 09:23:59
695
原创 Vue 2.0 与Vue 3.0的区别
1.项目结构Vue-cli2.0与3.0在目录结构方面，有明显的不同，vue-cli3.0移除了配置文件目录config和build文件夹，同时移除了static静态文件夹。新增了public文件夹，打开层级目录还会发现，index.html移动到public中 2.配置项3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同，没了config文件，跨域需要配置域名时，从config/in...
2021-08-13 10:43:02
1463
转载 Vue 项目性能优化方案
前言Vue 框架通过数据双向绑定和虚拟DOM技术，帮我们处理了前端开发中最脏最累的DOM操作部分，我们不再需要去考虑如何操作DOM以及如何最高效的 操作DOM；但Vue项目中仍然存在项目首屏优化，Webpack编译配置优化等问题，主要从以下三个方面进行项目优：1）Vue 代码层面的优化2）webpack配置层面的优化3）基础的web 技术层面的优化一，代码层面的优化1.1 v-if 和 v-show区分使用场景v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的
2021-08-12 17:39:02
2258
原创 vue项目中如何使用websocket
一，前言websocket是一种在单个TCP连接上进行全双工通信的协议前端和后端的交互模式最常见的就是前端发送数据请求，从后端拿到数据后展示到页面中，如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷因此，一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向前端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等websockett...
2021-08-12 11:14:04
4026
原创 前端框架MVC 和 MVVM
一，前言1.1 MVC---Model-View-Controllerm:model 数据模型层 v:view 视图层 c:controller控制器原理：c层需要控制model层的数据在view层进行显示1.2 MVVM---Model-View-ViewModel在MVVM架构下，View和Model之间并没有直接的联系，而是通过viewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立..
2021-08-11 15:13:42
505
原创 浏览器兼容问题解决方案
一，前言不同的浏览器的内核也不尽相同，所以各个浏览器对网页的解析也存在这一些差异浏览为内核主要分为两种，一是渲染引擎，另一个是js引擎，内核更加倾向于渲染引擎常见浏览器内核：IE浏览器 : trident内核Chrome浏览器：Webkit,现在是BlinkFirefox 浏览器：GeckoSafari浏览器：WebkitOpera:最初是自己的Presto内核，后来加入谷歌大军，从webkit到Bink内核360浏览器，猎豹浏览器：IE + Chrome双...
2021-08-11 11:06:35
731
原创 vue 屏幕适配
前言项目基础配置使用vue-cli2 生成自适应方案核心：阿里可伸缩布局方案 lib-flexiblepx转rem: px2rem,它有webpack的loader px2rem开始先使用vue脚手架初始化一个webpack项目项目初始化好了之后，进入项目中安装 lib-flexible 和 px2rem-loader安装好了之后还需要在项目的入口文件 main.js里引入 lib-flexible接下来为了验证lib-flexible是否生效，可以将app...
2021-08-09 11:39:13
966
原创 TCP三次握手 （http）
简述TCP三次握手如图：第一次握手客户主动（active open）去connect服务器，并且发送SYN 假设序列号为J,服务器是被动打开(passive open)第二次握手服务器在收到SYN后，它会发送一个SYN以及一个ACK（应答）给客户，ACK的序列号是 J+1表示是给SYN J的应答，新发送的SYN K 序列号是K第三次握手客户在收到新SYN K, ACK J+1 后，也回应ACK K+1 以表示收到了，然后两边就可以开始数据发送数据了...
2021-08-05 18:30:18
163
原创 JS中的跨域问题
一，什么是跨域1.定义：跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域所谓同源是指，域名，协议，端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的
2021-08-05 16:55:23
1374
原创 Cookie,Session与Token的区别
Cookiecookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的，所以浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的cookie数量是有限的。Sessionsession 从字面上讲，就是会话。这个就类似于你
2021-08-05 16:34:24
719
原创 cookie前端写还是后端写
1.前端写cookie前端写cookie对前端理解整个项目的逻辑来说有很大的帮助，也更符合惯性思维，我想要获取用户的信息，那么就把用户的id提供给你。优势：前端逻辑清晰，容易理解缺点：不安全，cookie可能被篡改2.后端写cookie后端写cookie对前端来说就是个黑盒子，我只要向后端发送申请，就可以拿到当前用户的信息，尽管我不知道用户的id。操作简单，理解起来不太友好。优势：操作简单，安全性高 缺点：好像没啥缺点 3.两边都写cookie这应该就是2B程序猿..
2021-08-05 16:21:05
5093
1
原创 H5C3新特性
css3新特性1.颜色：新增RGBA，HSLA模式2. 文字阴影（text-shadow）3. 边框： 圆角（border-radius）边框阴影： box-shadow4. 盒子模型：box-sizing5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局6. 渐变：linear-gradient、radia...
2021-08-04 11:54:18
150
原创 css3 实现简单动画效果
1.简单loading效果<div class="mint-spinner-snake" style="border-top-color: rgb(38, 162, 255); border-left-color: rgb(38, 162, 255); border-bottom-color: rgb(38, 162, 255); height: 88px; width: 88px;"></div>CSS样式部分：.mint-spinner-snake{ an...
2021-08-04 11:41:02
437
原创 Vuex 简入
前言Vuex 是一个专为vue.js应用程序开发的状态管理模式+库，它采集集中式存储管理应用的所有组件的状态，并已相应的规则保证状态以一种可预测的方式发生改变。核心概念 1.1 State 1.2 Getter 有时候我们需要从store中的state种派生出一些状态，例如对列表进行过滤并计数。 1.3 Mutation 更改Vuex的store种的状态的唯一方法是提交mutation,vuex中的mutation非常类似于事件,必须同步操作 1.4 Action A...
2021-07-30 17:10:03
467
原创 ES6整理(常用方法)
一，数组方法1.filter()对数组的每一项都运行给定的函数，返回结果为true的项组成的数组（返回的是一个集合）2.map()对数组的每一项都运行给定的函数，返回每次函数调用的结果组成的新数组（返回的是一个集合）3.every()对数组的每一项都运行给定的函数，每一项都返回true，则返回true4.some()对数组的每一项都运行给定的函数，有一项返回则返回true二，ES6新增操作数组新方法1.find()传入一个回调函数，找到...
2021-07-30 09:41:43
1281
原创 Vue事件总线EventBus
前言Vue组件中父子组件通信，兄弟组件通信都很常见，而父子组件通信就很简单，父组件会通过props向下传递数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件，那么如果说两个页面没有任何引入与被引入的关系，改如何通信呢？如果咱们的应用程序不需要Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即EventBus来通信EventBus简介EventBus 又称为事件总线，在Vue中可以使用 EventBus来作为沟通桥梁的概念，就像是所有组件共用相
2021-07-27 14:23:15
390
原创 一次完整的HTTP请求
1.前言从我们在浏览器的地址看输入https://mp.csdn.net/mp_blog/creation/editor地址后回车，到我们看到页面，这中间经历了什么呢？简答的回答这个问题，大概是经历了：域名解析，TCP的三次握手，建立TCP连接后发起http请求，服务器响应http请求，浏览器解析html代码，同时请求HTML代码中的资源(如js,css,图片等），最后浏览器对页面进行渲染并呈现给用户1.域名解析以Chrome浏览器为例，Chrome会解析域名对应的IP地址。（1）C..
2021-07-27 09:51:00
82
原创 封装 线性进度条 （支持进度超过100%，支持自定义）
备注：此组件是参考element-ui process改动完成子组件myProcess：<template> <div class="el-progress" :class="[ 'el-progress--' + type, status ? 'is-' + status : '', { 'el-progress--without-text': !showText, 'el-prog...
2021-03-01 15:26:39
712
原创 vue 监听路由变化
watch监听： 监听一级路由：路由组件的渲染区域为router-view，作为顶层出口，它将匹配到的路由组件渲染在该区域中，路由组件渲染默认的方式是销毁 - 创建，因此$watch是监听不到一级路由的变化的。所以，要想使用$router监听一级路由，需要让组件成为复用组件，也就是使用keep-alive包裹router-view。 <keep-alive> <router-view /></keep-alive>watch: { $r
2020-11-03 16:45:31
806
原创 css 相关 为什么z-index不生效？ 如何让子元素不继承父元素的opacity
1.为什么z-index不生效？Z-index 仅能在定位元素上生效，所以给div的style加上z-index:-1的同时，要记得加上position:absolute;或者position:fixed;或者position:relative;，才能生效。对于默认的position:static不生效2.如何让子元素不继承父元素的opacity解决方案：把涉及到opacity的父元素的opcity的透明度写法换成background:rgba()形式写背景色3.input placeh..
2020-09-01 14:08:04
1588
原创 vue 打包的时候如何去除项目中所有console
在项目中的build/webpack.prod.conf.js文件中new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true },添加此配置就可以在打包之后去掉控制台的打印
2020-08-31 11:50:36
1056
原创 vue 中如何用 katex 解析用 latex 编写的数学公式
一,在index.html中引入官方自带的 CDN的简单配置.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script><script src="http...
2020-07-21 10:19:44
2401
2
原创 vue 项目如何实现无限滚动 分页加载数据
安装官网是：https://github.com/ElemeFE/vue-infinite-scrollnpm install vue-infinite-scroll --save管官方也推荐了几种载入方式，但“最vue”的方式肯定是在main.js中加入：import infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll)实现范例官方给的代码范例是假设你在根组件写代码，实际上我们肯定是在子组...
2020-06-03 15:28:00
3374
1
原创 vue 移动端常用ui框架
1.mint-uihttps://mint-ui.github.io/#!/zh-cn2.muse-uihttps://muse-ui.org/#/zh-CN/transitions3.vonic-uihttps://wangdahoo.github.io/vonic/docs/#/4.vux-uihttps://vux.li/demos/v2/#/demo5.vu...
2019-07-31 15:53:07
3165
原创 vue 环形进度条 组件封装
子组件circle：<template> <div :style="svgStyle"> <svg :style="svgStyle"> <!-- 内边框 --> <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :...
2019-07-31 15:39:51
3265
1
原创 同时保证 ios端 和安卓端input输入框调取的都是数字键盘
有关android及ios手机 中 input 调出数字键盘 只需要添加 type="number" pattern="[0-9]*" 属性。<label>输入框：</label> <input type="number" name="" pattern="[0-9]*" class="shuru">做h5页面的时候，<input t...
2019-07-30 18:35:00
1595
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人