- 博客(81)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 让别人可以看到我本地运行的代码
1、需要在配置文件里面修改2、http://192.168.0.42:8083/#/login （本地ip加上项目路由） hot:true, host: '0.0.0.0', port: 8083, open: true,
2022-04-21 09:58:48
500
原创 uniAPP开发 全教程
**uniAPP开发 全教程1、uni-app教程一（项目创建、tabbar配置、运行）2、uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）3、uni-app教程三（全局模块util.js、全局变量、vuex）4、uni-app教程四（uni.requet()、网络模块封装）5、uni-app教程五（页面跳转、本地数据缓存）6、uni-app教程六（常用事件、生命周期）7、uni-app教程七（下拉刷新、上拉加载）8、uniapp 小程序打包发布...
2021-08-13 11:57:43
13639
1
原创 路由传参两种形式
路由传参两种形式1、name可以和params、query都可以一起使用；2、path只能和query使用；3、使用params传参 刷新后不会保存，使用query刷新后可以保存；4、params不会在地址栏显示，query会在地址栏显示；5、params能和动态路由一起使用，而query不能...
2020-10-27 09:11:50
1026
原创 vuex
vuex一、vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式二、Vuex核心statestate是专门用来存放数据的Gettersgetters就是计算属性，比如说 ，购物车里面的总价需要计算，就可以放在getters里面进行计算Mutationsmotations是同步操作，vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutationactionaction是异步操作 ，用来解决异步流程来改变state数据
2020-10-26 20:07:42
189
原创 Vue组件通信(父传子、子传父、兄弟通信)
Vue组件通信(父传子、子传父、兄弟通信)一、父传子在父组件中，给子组件绑定一个属性，这个属性上需要挂载传递的值 ， 然后在子组件中用prop来接收数据二、子传父在父组件中给子组件绑定一个自定义事件 ，给这个事件上挂载需要调用的方法 ，然后再子组件中用$.emit来调用这个方法，并传参。三、兄弟通信先创建一个空的vue实例通过$.emit传入数据到空的vue实例中再用$.on 来接受数据...
2020-10-26 11:39:02
167
原创 Vue Virtual Dom 和 Diff原理(极简版)
Vue Virtual Dom 和 Diff原理(极简版)先来说说什么是Dom吧Dom就是一个js对象，专门为复杂的文档提供一种方便的工具，从而最小化进行Dom操作Diff算法diff算法就是用 JavaScript 对象结构表示 DOM 树的结构，一个新的dom树和一个旧的dom树 ，然后这两个dom树做对比 ，把它们的不同记录下来 ，然后再放到一个真正的dom树上...
2020-10-26 11:28:28
112
原创 Vue生命周期的执行过程（极简版）
beforeCreated$elcreatedbeforeMountmountedbeforeUpdateupdateddestroydestroyed
2020-10-26 10:59:40
114
原创 v-if与v-show的区别
v-if与v-show的区别一、相同点都可以控制DOM元素的显示或隐藏二、区别v-if : 判断dom元素是否显示或隐藏domv-show ：判断dom是否显示或隐藏三、性能对比v-if : 有更高的切换消耗v-show ：有更高的渲染消耗四、使用场景v-if : 适合运营条件不大可能改变的场景下v-show : 适合频繁切换v-if 用在 比如说在详情页面购物车按钮那 ， 会显示数量 ，如果购物车里面有数据，那么他会很正常的显示出来 ，但如果购物车没有数据
2020-10-26 10:52:58
119
原创 vue常用的指令
vue常用的指令v-model ： 双向数据绑定v-for ： 循环v-show ： 显示内容v-hide ： 隐藏内容v-if ： 显示与隐藏v-bind ：动态绑定，可以缩写为：v-text ：解析文本v-html ： 解析html标签v-on:click ： 给标签绑定函数，可以缩写为@...
2020-10-26 10:29:30
125
原创 为何组件的data必须是一个函数
为何组件的data必须是一个函数首先定义的 xx.vue文件在编译之后是一个类，每个地方使用这个组件的时候，相当于对这个类实例化，在实例化的时候执行data，如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了简单来说就是：因为vue是可复用组件，如果data不是一个函数，那么在一个组件中修改数据会造成所有组件中数据都会改变，很容易造成
2020-10-26 10:07:16
109
原创 原型&原型链
原型&原型链一、原型在javaScript每个函数都有一个prototype属性，这个属性就叫原型二、原型链当一个对象调用自身不存在的属性/方法时，那么它会去它的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。...
2020-10-23 10:39:47
117
原创 HTML5和css3新特性
HTML5和css3新特性css新特新：属性选择器属性选择器分为三种:1、基本选择器 2、伪类选择器3、伪元素选择器边框背景边框:1、border-radius 圆角2、border-image 边框背景背景：1、background-size 背景图片大小2、background-color 背景颜色文本效果text-shadow 向文本添加阴影text-justify 规定当 text-align 设置为 “justif
2020-10-23 10:14:58
199
原创 前端常见的浏览器兼容性问题及解决方案
常见的浏览器内核：常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器 Trident内核，也成为IE内核Chrome浏览器 Webkit内核，现在是Blink内核Firefox浏览器 Gecko内核，俗称Firefox内核Safari浏览器 Webkit内核Opera浏览器 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；常见的兼容性问题：不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不
2020-10-22 15:34:18
618
3
原创 link与@import区别
link与@import区别区别：link属于html标签。@import在css中使用表示导入外部样式表；页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别，而link是HTML标签，无兼容问题;link方式的样式的权重 高于@import的权重；link 支持使用javascript改变样式 （document.styleSheets），后者不可...
2020-10-20 19:43:45
113
原创 简述一下src与href的区别
简述一下src与href的区别scr : 指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置href ：指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。...
2020-10-20 19:37:11
229
原创 常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）
常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）1. 两栏布局左边左浮动 ， 右边设置为overflow:hidden 变成BFC清除左侧浮动元素的影响2.圣杯布局两侧固定宽度，中间自定义比如一个大盒子里面嵌套了三个小盒子，分别为左边右边和中间先给大盒子一个paddind：0 200px左/右边分别为200px中间100%宽度里面的小盒子都浮动 （这个时候中间的盒子撑满了一行，把两个小盒子撑到下面）给左边小盒子 margin-left : -100% (这个时候左边小
2020-10-20 12:09:50
279
原创 清除浮动4种方式
清除浮动4种方式1、加一个额外的标签 （不推荐使用）2、父级添加overflow方法3、使用after伪元素清除浮动4、使用after和before伪元素清除浮动 （比较常用）
2020-10-20 11:46:50
159
原创 盒模型
盒模型1、什么是盒模型在html中，每个div都是一个盒子。盒模型是由 内容区域 + 内边距 + 边框 + 外边距组成的2、盒模型分为那两种标准盒模型 （width+ border + padding + margin）怪异盒模型 (width + margin)3、标准、怪异盒模型的转换box-sizing：content-box (采用标准盒模型)box-sizing：border-box (采用怪异盒模型)4、获取box的高度/宽度window.g
2020-10-20 11:40:20
99
原创 BFC
BFC1、什么是BFC？BFC是块级格式化上下文，也是一块独立的布局环境。内部元素不影响外部，外部也不影响内部。2、什么情况下会产生BFCoverflow:auto/hiddenposition:absolute/flxedfloat:left/rightdisplay:flex3、BFC应用于什么地方自适应布局清除浮动解决垂直边距重叠...
2020-10-20 11:27:25
98
原创 vue-cli4打包优化（webapck优化）
vue-cli4打包优化（webapck优化）一、去除生产环境sourceMapsourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}12345678二、对资源文件进行压缩需要下载 compression-
2020-10-16 08:37:27
263
原创 项目上线前的优化
项目上线前的优化根目录下新建vue.config.js，配置开发模式和发布模式的打包入口文件。src文件夹下新建main-prod.js和main-dev.js。复制main.js到这2个文件中。删除main.js。在vue.config.js中添加externals， 删除main-prod.js（发布阶段）中对应的css样式表，在index.html中添加相应的css连接和js连接（cnd资源），来减少打包时的体积。module.exports = { chainWebpack: conf
2020-09-24 21:19:06
127
原创 vuejs中虚拟DOM及diff算法
vuejs中虚拟DOM及diff算法虚拟DOM及diff算法虚拟DOM（virtual dom）用一个简单的对象去代替复杂的dom对象，存储了对应dom的一些重要参数，在改变don之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上Diff算法（差异算法）Diff算法（差异算法）：可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把它们应用在真正的DOM树上，页面就变更了，这样就可以做到：视图的结构确实是
2020-09-21 08:41:03
116
原创 vue自定义过滤器filter
vue之filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })12
2020-09-21 07:59:31
292
原创 Vue Virtual Dom 和 Diff原理(极简版)
vue的虚拟DOM和diff算法，是Vue面试的最后一招，当然也是极其简单了，先说Virtual Dom，来一句概念：用js来模拟DOM中的节点。传说中的虚拟DOM。再来一张图： 是不是一下子秒懂 没懂再来一张 Virtual Dom就先这样，理解了就OK，下面我们了解一下Diff，老规矩先来一句概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句人话diff的过程就是调用名为patch的
2020-09-21 07:56:56
174
1
原创 vue中如何自定义指令directive
vue中如何自定义指令directive背景除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。如何自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: {
2020-09-21 07:54:22
278
原创 vue自定义指令的应用场景
使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&
2020-09-21 07:49:43
183
原创 vue组件封装
你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.
2020-09-17 22:19:06
173
原创 vue中事件修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件
2020-09-17 22:14:14
1634
2
原创 Vue双向数据原理
双向数据原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调双向数据流程1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的
2020-09-17 07:48:00
369
原创 vue的常用指令
vue的常用指令v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。v-html指令：绑定一些包含html代码的数据在视图上，例如Daisy,这个字符包含了标签，要想不被当做普通的字符串渲染出来，发挥应有的效果，我们就得使用v-html指令 。例如下面的写法，name里面的Daisy外层套上**，用v-html指令后**的功能效果就会正常被渲染出来，从而不会当做字符串被解析出来。********v-show指令：指令的取值为true/false，分别对应着显示/隐
2020-09-16 21:55:55
146
原创 Vue生命周期的执行过程（极简版）
Vue生命周期的执行过程（极简版）简单粗暴的答案直接走起：1、创建vue实例，new Vue();2、在创建Vue实例的时候，执行了init()，在init(初始化)过程中首先调用了beforeCreate钩子函数；3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算；4、以上都干完了，调用Created钩子函数(一般axios请求会在这个周期内进行)；5、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况：1）实例内部有template属性
2020-09-15 21:20:58
97
原创 v-if与v-show的区别
v-if与v-show的区别一、相同点都可以动态控制着dom元素的显示隐藏一、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数
2020-09-15 21:19:49
110
原创 axios封装与api接口管理
axios封装与api接口管理一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库二、axios封装步骤安装axios
2020-09-15 08:17:21
147
原创 事件模型
事件模型：1、DOM 0 级模型DOM 0 级模型叫原始事件模型，在这个模型中，事件不会传播，即没有事件流的概念；一、 HTML 代码中直接绑定：<input type='button' onclock='fun()'>1二、 通过js代码指定的属性var btn = document.getElementById('.btn')btn.onClick= fun12移除监听函数btn.onClick = null1IE 事件模型：IE事件模型有两
2020-09-13 22:01:11
132
原创 事件监听
事件监听 和 事件模型一、事件监听1、行内绑定行内绑定：在ＨＴＭＬ 的标签中通过onclick属性进行绑定，绑定方式为：on＋ 事件名称， 在将所触发你事件赋值给该属性<button onclick='onClick()'></button>2、 使用元素进行事件绑定使用element.onclick 进行 事件绑定，通过操作DOM元素，为DOM绑定事件【使用形式同行内绑定】window.onload = function (){ let btn = doc
2020-09-13 21:56:58
153
原创 垃圾回收 及 内存泄漏
垃圾回收 及 内存泄漏1、垃圾回收的策略通常有两中——标记清除 和 引用计数2、js中最常用的垃圾收集方式是标记清除。但是COM对象（BOM和DOM对象就是使用C++以COM对象的形式实现的）垃圾收集机制采用的就是引用计数策略。使用标记清除的方式，不会引起内存泄漏的问题（哪怕对象相互引用也没有关系）。因为变量离开执行环境就会被回收。现在的浏览器基本不用引用计数，只有早期的ie中com对象是使用引用计数的，现在应该都是使用标记清除，所以不要考虑内存泄漏的问题。3、使用引用计数策略， 在函数
2020-09-13 21:26:57
131
原创 javaScript的设计模式
javaScript的设计模式一、什么是设计模式？是一套被反复使用，多数人知晓的，经过分类的，代码设计经验的总结。换言之，就是用 “套路” 做事情。二、什么是模式？模式是一种可以复用的解决方案。模式是指从生产和生活经验中经过抽象和升华提炼出来的核心知识体系。设计模式三大好处模式是已经验证的解决方案模式很容易被复用模式富有表达力三、设计模式分类创建型设计模式说明：专注于处理对象创建的机制，以合适的方式创建对象，以此来降低创建对象过程的复杂性。包含：Constru
2020-09-13 21:02:17
67
原创 js中事件委托
**js中事件委托****概念事件的委托是指利用冒泡的原理，把事件加到父级上，触发执行效果。好处:提高性能案例首先看不使用事件委托时的代码 如下：<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { list-style: none;
2020-09-10 22:02:42
513
v-model 这样绑定为什么会报错呢
2022-08-17
这种进度条echarts怎么做呀 有大神教一下嘛
2021-03-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人