- 博客(25)
- 收藏
- 关注
RSS订阅原创 解决ios上传图片被旋转的问题
利用exif.js插件解决ios手机上传竖拍照片旋转90度问题移动端手机拍照时，发现ios手机上传竖拍图片会逆时针旋转90度，横拍照片无此问题，部分安卓手机存在此问题。解决思路：获取到照片拍摄的方向角，对非横排的ios照片进行角度旋转修正。我们可以通过exif.js这个插件获取到它的拍照方向Orientation属性，然后把所有的旋转了的图片都给正过来。exif.js介绍：Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时
2021-07-26 15:57:46
2292
原创 前端面试题
一、this及this指向1. 普通函数的this指向函数的this指向遵循一个基本原则：谁调用的函数，函数的this就指向谁，否则指向全局window.name = 'yuguang';var getName = function(){ console.log(this.name);};getName(); // yuguang2. 箭头函数的this指向首先我们要知道，箭头函数本身是没有 this，箭头函数 this 是定义箭头函数时父级作用域的 this，也就是说使用箭
2021-05-21 00:05:00
246
原创 初识微信小程序
一、了解微信小程序一、微信小程序作为近几年“微服务”的杰出代表，应用十分广泛。小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。二、微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用
2021-05-07 07:59:38
843
翻译 Compile，Watcher，Observer，Mvvm
Compilevue 内置了一个编译器，主要的作用是将template 中的字符串转换为AST，将各标签中的元素以及属性等用特定的数据结构进行了描述，其内部通过pase对字符串进行解析。在vue中compiler并不是固定执行，而是通过createCompilerCreator 生成 createCompiler 再由 其生成{compile,compileToFunctions:createCompileToFunctionFn(compile)}而主要对template 进行解析的 pars
2021-05-06 00:08:27
888
原创 vue双向数据绑定原理
vue中的v-model可以实现双向绑定，其核心思想通过Object.definePropery来对Vue的数据进行数据劫持，主要分为三部分observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化指令解析器负责绑定数据和指令，绑定视图更新方法compile解析模板指令，将模板中的变量替换
2021-05-06 00:03:31
137
原创 axios的封装
在使用 axiso 的过程中，为保证 解耦，需要对 axios 进行封装，在封装后的类中使用，直接引用 request1 即可：//导入axios依赖包import axios from "axios";//2. 创建axios的实例化对象const Server = axios.create({ baseURL: '',//后期请求接口的基地址 timeout: 5000,//5s超时时间});//3. 设置请求拦截器配置Server.interceptors.requ
2021-05-05 20:09:51
110
翻译 vuex的核心概念和运行机制
Vuex是什么？官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。Vuex的核心概念State 单一状态树Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至
2021-05-05 20:06:20
121
原创 vue-router钩子函数和执行顺序
vue-router钩子函数全局路由钩子函数每次路由跳转，都会执行beforeEach和afterEachbeforeEach和afterEach是vue-router实例对象的属性router.beforeEach：router.beforeEach(function (to,from,next) { console.log(to);//到达的路由 console.log(next);//管道中，可以跳转到其他路由 console.log(from);//离开的路由 next
2021-05-05 19:48:59
593
原创 Vue中的$nextTick
官方定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新原理：Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。异步执行的运行机制是什么样的？（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack
2021-05-05 19:38:46
144
原创 修改数据页面不更新的原因和解决方案
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：1. 直接添加或删除属性原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。var vm = new Vue({ data:{ obj: { id: 001 } }, // 页面不会变化
2021-05-05 19:30:13
1718
转载 v-for中的key值的作用
使用Vue框架搭建项目时，会使用到很多的指令，进行数据渲染时，我们一般会用到v-for，那么我们发现在使用v-for时，经常会写一个key值，那么这个key值得作用是什么？vue中在进行列表渲染的时候，会默认遵守 就地复用策略就地复用策略：当在进行列表渲染的时候，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止Vue中为v-for提供了一个属性，key：key属性可以用来提升v-for渲染的效率！，vue不会去改变原
2021-05-05 19:01:32
193
原创 v-if和v-for的优先级
首先面对这个问题，尽量不要让v-for和v-if处于同一元素那么当v-for和v-if处于同一元素上时，在Vue 处理指令时，v-for的优先级会高于v-if这意味着 v-if将分别重复运行于每个 v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：<li v-for="item in list" v-if="!item.isComplete"> {{ item}}</li>上面的代码只传递了未完成的 todos。而如果你的目的是有条
2021-05-05 18:43:58
145
原创 v-if和v-show的区别
v-if和v-show的分析我们在写vue项目的时候，经常会需要控制"条件渲染",大多数时间我们会使用v-if和v-show来控制，那么二者之间有什么区别吗？相同点：都可以动态控制着dom元素的显示隐藏不同点：一： v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的...
2021-04-29 21:30:02
116
原创 为何组件中的data必须是一个函数
理解这个问题，我们先看一个报错警告说明：返回的data应该是一个函数在每一个组件实例中我们继续看：在vue实例上data定义的是一个对象，也可以是一个函数：var app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})但是在vue
2021-04-29 19:39:38
348
1
转载 Vue常用指令
vue常用指令：v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用： 及时对
2021-04-28 21:26:53
90
原创 常见组件传参方式
VUE中的几种组件传参方式对于vue来说常见的就是兄弟传值，父子传值1.父传子在父组件中定义数据，子组件通过props接收父组件传递的数据加以使用父组件中 <div class="box"> <p>这是父组件</p> <son :list="list"></son> </div>子组件中 props:['list'], //接收到父组件数据
2021-04-25 08:36:15
5028
1
原创 理解MVVM
MVVM是什么MVVM模式，顾名思义即Model-View-ViewModel模式。它萌芽于2005年微软推出的基于Windows的用户界面框架WPF，前端最早的MVVM框架Knockout在2010年发布。Model层：对应数据层的域模型，它主要做域模型的同步。通过Ajax/fetch等API完成客户端和服务端业务Model的同步。在层间关系里，它主要用于抽象出ViewModel中视图的Model。View层：作为视图模板存在，在MVVM里，整个View是一个动态模板。除了定义结构、布局外，它展示
2021-04-21 20:50:25
177
原创 JS里的变量提升
JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升(hoisiting)。console.log(a); //undefinedvar a = 1;function b() { console.log(a)}b(); // 1我们看一下上面代码的运行顺序第一步：引擎将 var a = 1 拆解为 var a = undefined 和 a=1，并将 var a
2021-04-18 20:44:40
97
原创 HTTP
HTTP概念HTTP协议是Hyper Text Transfer Protocol (超文本传输协议)的缩写，是用于从万维网(WWW：World Wide Web )服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据(HTML文件，图片文件，查询结果等)HTTP协议工作于客户端服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务请求端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。client发出请求–>serv
2021-04-12 20:37:10
171
原创 常见的js事件
简单罗列一些常见的js事件onclick：元素上发生鼠标点击时触发。ondblclick： 元素上发生鼠标双击时触发。onmouseenter：当鼠标移动到连接了侦听器的元素上时，会触发该事件。onmouseover： 当鼠标移动到附加了侦听器的元素或其子项之一上时，会触发该事件。mouseleave：当鼠标移出连接有侦听器的元素时，会触发该事件。onmousedown：当元素上按下鼠标按钮时触发。onmousemove：当鼠标指针移动到元素上时触发。onm
2021-04-11 19:50:53
104
原创 原生Ajax的创建过程
1、创建xhr核心对象var xhr = new XMLHttpRequest();2、调用open准备发送参数一：请求方式参数二：请求地址参数三：true同步，false异步xhr.open('post','http://www.baidu.com',true)3、调用send 发送请求 （如果不需要参数，就写null）...
2021-04-06 22:00:36
69
原创 vue中借助过滤器格式化时间
// 全局过滤器Vue.filter('dataForm', function (v) { // 把时间戳转换为时间格式 const dt = new Date(v) const y = dt.getFullYear() //年份 // padStart在指定字符前面加 '0' const m = (dt.getMonth() + 1 + "").padStart(2, '0') //月份 const d = (dt.getDate() + "").padStart(2, '0
2021-04-01 21:01:17
52
原创 vue中面包屑的封装
面包屑是一种常见的导航工具，通常出现在网页内容的上方。面包屑小巧，简单，网站面包屑作为一种辅助导航工具，作用是告诉访问者他们目前在网站中的位置以及如何返回，提高用户的体验。面包屑的作用作为一种辅助导航工具，面包屑为用户呈现出网页的结构层次，让用户知道自己目前所处的位置以及自己还能到哪里去。面包屑鼓励用户浏览更多的内容，提升了整个网站的可访问性，降低网站的跳出率。利于搜索引擎蜘蛛对网站的抓取，实现网页SEO优化。面包屑的类型基于位置的面包屑：基于位置的面包屑能很好的反映网站的结构特征，能将
2021-04-01 19:22:32
966
原创 js数据类型及其判断
js中的数据类型基本数据类型：Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和BigInt（es10新增）引用数据类型:Object。包含Object、Array、 function、Date、RegExp(正则)。备注：基本数据类型，又称值类型。js数据类型判断有以下几种判断方法：typeof、instanceof、constructor、Object.prototype.toString.call()...
2021-03-31 19:38:01
84
原创 字体溢出隐藏
字体溢出隐藏（…）我们在浏览文章的时候会发现一段很长的文字会被缩为一段比较短的话，结尾会变成一个省略号一样的…，他的实现方式其实很简单就是三行代码。 overflow:hidden; text-overflow:ellipsis; white-space: nowrap;下边是一个简单的展示代码<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
2021-03-30 21:59:12
201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人