- 博客(29)
- 收藏
- 关注
RSS订阅原创 js 延迟加载的方式
js 延迟加载的方式有哪些?1.defer 和 async(异步加载)当浏览器碰到 script 脚本的时候:<script src="script.js"></script>没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即” 指的是在渲染该 script标签之下的文档元素之前，也就是说不等待后续 载入的文档元素，读到就加载并执行。...
2020-04-30 23:51:33
88
原创 javascript 的 typeof 返回哪些数据类型
javascript 的 typeof 返回哪些数据类型typeof 一般判断基本数据类型。是一个操作符而不是函数，圆括号可有可无。typeof 返回值有:string，number，boolean，undefined，object ，function，基本数据类型:Boolean、Number、String、Undefined、Null基本数据类型中数字，字符串，布尔类型返回其对类型u...
2020-04-30 23:45:10
1386
原创 JavaScript 中的作用域、预解析与变量声明提升的理解
作用域:就是变量的有效范围。如何检测一个变量的作用域:在指定的区域内使用这个变量，如果不报错，说明这个变 量的作用域包含此区域。函数作用域:只有函数能够划分变量的作用域，这种作用域的规则就叫函数作用域。 如果在函数内访问一个变量，优先找局部变量和形参,如果没有找到，去定义该函数的环境 中查找，直到全局为止。在 ES6 之前，只有函数可以划分变量的作用域，所以在函数的外面无法访问函数内的 变量...
2020-04-30 23:41:23
312
原创 js 中 节流 与防抖的使用
js 中 节流 与防抖的使用防抖：在任务高频率触发时，只有触发间隔超过制定间隔的任务才会执行。即一个动作连续触发则只执行最后一次。防抖的原理则是不管你在一段时间内如何不停的触发事件，只要设置了防抖，则只在触发n秒后才执行。如果我们在一个事件触发的n秒内又触发了相同的事件，那我们便以新的事件时间为标准，n秒之后再执行。// 定义防抖函数方法let timer = flase;document...
2020-04-30 22:55:24
385
原创 vue组件中 data 为什么是一个函数
为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？// datadata() { return { message: "子组件", childName:this.name }}// new Vuenew Vue({ el: '#app', router, template: '<...
2020-04-30 22:43:26
154
原创 v-show 与 v-if 有什么区别？
v-show 与 v-if 有什么区别？v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。所以，v-if 适用于在...
2020-04-30 22:39:46
82
原创 前端项目中处理图片过多问题
几种文件格式的选用依据颜色丰富的照片，JPG是通用的选择如果需要较通用的动画，GIF是唯一可用的选择如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式如果需要清晰的显示颜色丰富的图片，PNG比较好前端的图片优化方案1.使用base64编码代替图片场景：适用于图片大小小于2KB，页面上引用图片总数不多的情况 。原理：将图片转换为base64编码字...
2020-04-30 22:37:35
1740
原创 vuex怎么使用？哪种功能场景使用它？
vuex是什么？怎么使用？哪种功能场景使用它？只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。在main.js引入store，注入。新建了一个目录store，… export 。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车state：Vuex 使用单一状态树,即每个应用将仅仅包含一...
2020-04-30 22:21:35
919
原创 Vue的路由实现：hash模式 和 history模式
Vue的路由实现：hash模式 和 history模式hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。history模式：history采用HTML5的新特性；且提供了两个新方法： pushState(...
2020-04-30 22:14:55
227
原创 Vue组件间的参数传递
Vue组件间的参数传递1、父组件与子组件传值父组件传给子组件：子组件通过props方法接受数据；子组件传给父组件： $emit 方法传递参数2、非父子组件间的数据传递，兄弟组件传值eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道）。...
2020-04-30 22:11:57
677
原创 Vue实现数据双向绑定 v-model的原理
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 ge...
2020-04-30 22:10:33
821
原创 axios配置代理服务器 解决跨域问题
什么是跨域？在浏览器里面域名、端口、ip地址、协议，有任何一项不同，则跨域A网站：http://localhost:8080/#/B网站：http://localhost:3000/#/处理跨域的方式？JsonP（只能处理get请求）、cors（后端开启）、代理服务器module.exports = { devServer: { host: 'localhost', ...
2020-04-30 20:52:25
658
原创 Promise的使用
利用Promise处理异步解决回调地狱的问题Promise的all的方法Promise的race的方法现在有三个接口地址，需要三个接口地址请求完事之后进行下一步的逻辑处理(不一定按顺序请求完成)// .then回调axios.get('http://xxx').then(res=>{ console.log(res) axios.get('http://xxx').th...
2020-04-30 20:49:45
75
原创 js中 call和apply和bind的 区别
call和apply和bindcall的使用，可以改变this指向，第一个参数为宿主对象，也就是要改变的this指向，后面的参数全部为当前函数的实参const fn = function(sex,like) { this.sex = sex this.like = like console.log(this) } var obj = { name...
2020-04-30 01:47:07
87
原创 vue 中 动画的使用
vue动画文档利用类名添加动画在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to:...
2020-04-30 01:43:50
143
原创 路由钩子函数的使用
路由钩子全局钩子：都会对所有的路由进行拦截beforeEach：进入之前afterEach：已经进入了路由独享钩子：可以针对某一个路由进行拦截，这个需要写在路由规则里 { path: '/', name: 'home', beforeEnter: (to,from,next)=>{ console.log('即将进入home') }, ...
2020-04-30 01:40:38
657
原创 在vue中路由传参
在vue中路由传参params传参在跳转的时候可以通过/home/10路由规则：new VueRouter({ routes: [ { path: '/home/:id', component: Home } ]})组件内部怎么来接收参数this.$route.params.idque...
2020-04-30 01:38:47
95
原创 axios拦截器的使用
axios拦截器请求拦截axios.interceptors.request.use响应拦截axios.interceptors.response.use
2020-04-30 01:35:43
91
原创 vue 生命周期函数
生命周期函数生命周期：是指一个对象从创建到运行到销毁的整个过程，被称为生命周期生命周函数：在不同的生命周期阶段会自动执行对应的函数，而这些函数则被成为生命周期函数// 创建阶段 beforeCreate() { // 这个生命周函数，代表开始创建实例了 console.log('beforeCreate',this.num) }, ...
2020-04-30 01:33:43
82
原创 解决移动端点击300ms延迟的问题
npm 安装fastclicknpm install fastclick -S``在入口文件main.js引入 和调用import fastClick from 'fastclick'fastClick.attach(document.body)这样就能解决300ms延迟了
2020-04-29 08:45:19
631
原创 cookie session token jwt 的区别
登录状态保存HTTP请求是无状态的cooikie+ 举例：例如满10+1 给你卡片，卡片上有商家标识保存在客户端数据量小(很多站点对cookie的大小和数量都进行了限制)不安全(别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，也可能被拦截)session 举例例如卡片：获取你的信息保存到商家服务器端安全session可以依赖cookie访问量增多，占用...
2020-04-26 22:30:49
212
原创 解决uniapp 的顶部 navbar scroll-view的滑块跟随问题和 下方包含内容的swiper 滑块不同步的问题
Scroll-view 中有一个属性 scroll-into-view注意：scroll-into-view值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素注意要在scroll-view的子元素中加入属性绑定一个id:id=“’top’+index” index 为v-for 循环 数据的下标值所以在 scoll-view 上加入这个属性:...
2020-04-24 16:31:20
1912
原创 uniapp中 解决swiper 包裹元素 显示不完的问题
Swiper 在包含内容时是有一个默认高度height：150px；的此时我们要展现出来的内容区域就会被缩减掉所以我在需要swiper 包裹元素时需要重新获取。内容高度的我们将要展示的内容有一个view包裹起来 随便给view一个class名 如 home-data使用uniapp的api获取home-data的所有的消息。api 文档 界面>节点消息在data中定义一个存放 高度...
2020-04-24 16:25:44
2507
3
原创 解决小程序图片在开发者工具能显示，真机不显示
最近在学习uniapp开发，刚写完一个测试页面拿起手机体验的时候bug就出现了，心里苦~ 出现个很奇怪的问题，页面的图片在开发者工具中明明是可以显示的，但到了真机中却不见了，检查过图片src路径，貌似也没写错吖。于是开始去网上找各种博客、帖子。大致的解决方法无非是以下几种：图片路径不能带有中文图片名称去除空格将图片前缀http改成https域名需备案本地图片src用绝对路径（'/i...
2020-04-23 22:31:38
2144
原创 html强制两行显示文字 溢出隐藏 显示省略号
.goods-title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break: break-all; }
2020-04-23 21:34:44
491
原创 vue.nextTick()方法的使用
什么是Vue.nextTick()？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中...
2020-04-20 17:01:22
99
原创 vue代理服务器proxy配置解决跨域问题
如果没有vue脚手架需先在终端中运行安装脚手架npm i @vue/cli -g使用vue脚手架创建项目vue created vue_dome(项目名)手动在项目根目录创建vue.config.js文件# vue.config.jsmodule.exports = { devServer: { host: 'localhost', port: 8080,...
2020-04-20 01:52:16
2773
原创 keep-alive的作用以及使用方法
keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现我这里利用脚手架创建项目后会生成home和about两个组件，并且通过路由进行切换home组件<template> <div ...
2020-04-20 01:43:43
14298
5
原创 prettier格式化配置
prettier格式化配置{ /* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab，使用空格 "prettier.semi": true, // 句尾添...
2020-04-20 01:22:36
3627
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人