- 博客(30)
- 收藏
- 关注
RSS订阅原创 面试题
一.this指向1.箭头函数中，this始终指向父级的上下文。2.谁调用this指向谁。3.构造函数中，this指向实例本身。4.当没有人调用时，this默认指向windows5.call，apply，bind强制改变二.事件模型：事件委托、代理？如何让事件先冒泡后捕获事件委托又称事件代理，利用事件冒泡，将子元素绑定到父元素上。 // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul
2021-05-20 21:37:55
123
原创 初实微信小程序
一.什么是微信小程序官方定义：是一种不需要下载安装即可使用的应用，它实现了应用触手可及，用户扫一扫或搜索一下即可打开应用。简单来说，小程序不用安装就可以使用，它的体积也非常小，每一个都不超过1M。二.小程序与普通网页开发的区别小程序的主要开发语言是JavaScript，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，
2021-05-06 21:28:34
262
原创 vue源码分析(四)
当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图自身实例化的时候往 dep 对象中添加自己function Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //n个相关的dep的容器 this.value
2021-05-06 00:00:38
148
原创 vue源码解析(三)
observer来监听自己的model的数据变化function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(
2021-05-06 00:00:30
192
原创 vue源码解析(二)
compile 的作用是解析模板，生成渲染模板的 render解析表达式：从文本节点中取出表达式从data中取出表达式对应的属性值将属性值设置为文本节点的textContent compileElement: function(el) { //初始化数据,保存所有子节点 保存this var childNodes = el.childNodes, me = this; //对所有子节点进行递归遍历 [
2021-05-06 00:00:19
76
原创 vue简版源码分析(一)
分析：Observer: 数据的观察者，让数据对象的读写操作都处于自己的监管之下Watcher: 数据的订阅者，数据的变化会通知到Watcher，然后由Watcher进行相应的操作，例如更新视图Dep: Observer与Watcher的纽带，当数据变化时，会被Observer观察到，然后由Dep通知到WatcherCompiler：解析每个元素中的指令/插值表达式，并替换成相应的数据MVVM：数据代理v-model 双向数据绑定 最直观表现形式Model 代表数据模型View 代表UI视
2021-05-06 00:00:05
192
原创 小米商城②
注册：注册调用接口将用户名，密码存入服务器中。验证用户名：验证用户名得时候，首先判断有没有value值，没有得话就显示请输入用户名，然后在判断正则，格式不正确得话显示字母开头,长度6-18之间,允许字母数字下划线，正确得话调用后台得查找用户名是否存在得那个接口完成用户名得正则验证。验证密码：和验证用户名得步骤差不多，也是判断有没有value值，没有得话就显示输入用户名，判断正则，格式不正确显示字母开头,长度6-18之间,允许字母数字下划线，正确的话，callback()回调。验证再次输入密码：
2021-05-05 23:17:24
155
转载 小米商城
项目架构：1.public用来存放一些静态资源2.src 这个目录下存放项目的源码，即开发者写的代码放在这里3.node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件4.vue.config.js 中存放项目的一些基本配置信息，最常用的就是端口转发5.package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖对于开发者来说，99.99%的工作都是在src中完成的，src中的目录文件如下：1.api 里边存放封装api接口
2021-05-05 21:43:25
201
原创 梦学谷②
这个项目中，我主要负责的就是商品管理这个模块。商品管理面包屑导航：使用element-ui的面包屑导航，然后进行了封装，直接引用即可页面布局快速使用element-ui，代码如下<el-form ref="form" :model="goodSearchForm" :inline="true"> <el-form-item prop="goodName"> <el-input v-model="goodSearchF
2021-05-05 21:33:41
75
原创 梦学谷
项目架构1.public用来存放一些静态资源2.src 这个目录下存放项目的源码，即开发者写的代码放在这里3.node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件4.package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖技术栈element-ui，axios，vue，项目所有模块登录首页会员管理供应商管理商品管理员工管理...
2021-05-05 21:20:25
216
原创 电商后台管理系统(各模块技术点)
登录：在登陆页面输入账号密码，讲数据发送给服务器服务器返回登录的结果，成功返回的数据中带有token在得到token后，将他进行保存，存储在本地存储中。登录成功之后，需要讲后台返回的token保存到本地存储中，操作完毕后，需要跳转到homelogin() { this.$refs.ruleForm.validate(async (v) => { if (v) { let res = await loginAPI.login(this.logi
2021-05-05 21:05:17
1676
原创 电商后台管理系统(项目架构/技术栈/项目所有模块)
项目架构：1.public用来存放一些静态资源2.src 这个目录下存放项目的源码，即开发者写的代码放在这里3.node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件4.vue.config.js 中存放项目的一些基本配置信息，最常用的就是端口转发5.package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖对于开发者来说，99.99%的工作都是在src中完成的，src中的目录文件如下：1.assets 目录用来存放资产文
2021-05-05 19:51:55
2036
1
原创 axios的封装
我们在和后台交互数据这块，通常使用axios。首先我们先安装axiosnpm install axios引入一般我会在项目的src目录中，新建一个utils文件夹，然后在里面新建一个request.js文件。用来封装我们的axios。import axios from 'axios';import router from '../router';const request = axios.create({ // baseURL: 'http://39.100.7.70:81/',
2021-05-05 19:13:20
536
原创 vuex的核心概念和运行机制
vuex有五个核心概念：1、state 所有的数据都存储在state中 state是一个对象2、mutations 可以直接操作state中的数据3、actions 只能调用mutations的方法4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作5、modules 将仓库分模块存储vuex是专门为vue.js应用程序开发的状态管理模式。运行机制：在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中
2021-05-05 19:04:01
124
原创 $nextTick
使用场景：this.$ nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$ nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$ nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数
2021-05-05 18:55:14
71
原创 修改数据页面不更新的原因和解决方案
1.动态给对象新增属性，或删除属性是不会触发视图更新得，vue检测不到如下：data(){ return { obj:{ a:123 } }}delete this.obj.a;this.obj.b=456;2.通过数组下标修改数组得元素或者手动修改数组的长度，vue识别不到data(){ return { obj:[{ a:123 }] }}this.obj[0]={ a:456};obj.length=2;解决方法：...
2021-05-05 18:42:10
693
原创 v-for中的key值的作用
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。 如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。...
2021-04-29 21:47:53
65
原创 v-if和v-for的优先级
1.永远不要把v-for和v-if放在同一个元素上2.当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。解决方案：1.ul和li搭配使用，或者是渲染父级标签下的子标签。<ul v-if = "show"> <li v-for = "(item,id) in list" :key="id"></li></ul>2.使用过
2021-04-29 21:12:32
81
原创 v-if和v-show的区别
相同点：v-show跟v-if都是做条件隐藏跟显示用的。不同点：v-if是通过删除或创建DOM节点来实现元素的显示和隐藏，v-show是通过css中的display属性控制显示和隐藏。<body> <div id="app"> <div v-if="isIf"><p>我被v-if控制</p></div> <div v-show="isShow"><p>我被v-show控
2021-04-29 20:59:21
95
原创 组件中data为什么是个函数
总结：1.vue中组件是用来复用，为了防止data复用，将它定义成一个函数。2.当我们将组件中的data写成一个函数，数据是以函数返回值形式定义的，这样每复用一次data，都会返回一份新的data，拥有自己的作用域。3.当我们组件中data写成一个对象的时候，对象是引用数据类型，它就会共用一个内存地址，造成数据污染。组件中的data：<!DOCTYPE html><html lang="en"><head> <meta charset="UT
2021-04-29 20:48:44
3401
原创 vue面试题
一.为何组件的data必须是一个函数如果是对象的话，他就共用了一个内存地址，会产生数据污染的情况，所以，组件中的data必须是一个函数，目的是为了防止多个组件实例对象直接公用一个data，产生数据污染。二.vue常用指令v-html 解析输出变量 能解析htmlv-text 解析输出变量v-bind 给标签绑定属性 可以简写为 :属性名=“变量”v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”v-pre 跨过当前的标签不解析 用法 ：<标签
2021-04-28 20:01:54
103
原创 vue组件传值
一.父子传参在父组件的子组件标签上绑定一个自定义属性，挂载它需要传输的变量<template> <div> <h1>父组件</h1> <Son :title="arr"></Son> </div></template><script>import Son from "./Son"export default { components:{
2021-04-25 07:38:44
261
原创 Vue Router 导航守卫
导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5+)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用 beforeRouteEnter 守卫中传给 n.
2021-04-20 20:01:25
238
原创 字符串方法用法大全
字符方法1.charAt（）字符串形式返回给定下标对应的字符2.charCodeAt（）字符串形式返回给定下标对应的字符的编码3.fromCharCode（）接受一个或多个字符编码，转成字符串字符串操作方法1.concat（）用于将一个或多个字符串拼接起来，返回拼接得到的新字符串三个基于字符串创建新字符串的方法1.slice（start，end）提取字符串中指定字符，负数反向截提取（从后往前数，从前往后找）没提取到返回“”2.substr（start，howmany）从字符串指定位置提取
2021-04-18 20:50:20
417
原创 ES6新特性
1.不一样的变量声明：const和letES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部）let表示声明变量，而const表示声明常量，两者都为块级作用域；const声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行2.模板字符串基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定； ES6反引号(``)直接搞定
2021-04-12 21:14:55
104
原创 JS中常用的事件类型/操作行为
JS中常用的事件类型/操作行为:clickmouseover(mouseenter)当鼠标指针位于元素上方时，会发生 mouseover 事件
2021-04-11 22:47:24
190
原创 for···in和for···of的区别
for···in和for···of的区别首先一句话：(for···in取key，for··of取value)1.从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}2.
2021-04-06 17:17:32
36
原创 JS数据类型和数据类型判断
JS数据类型有哪些基本数据类型： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）（大数）；引用数据类型: Object、Array、 function、Date、RegExp。javaScript数据类型的判断typeof 返回一个字符串，适用于判断函数对象和基本数据类型instanceofobj instanceof Object；instanceof用来判断左边对象的原型链上是否有右
2021-04-01 21:43:26
50
原创 JS堆栈
堆&栈堆是堆内存(heap)的简称，栈是栈内存(stack)的简称。javascript的基本数据类型都是按值存储在栈内存中，每种类型的数据占用的空间大小都是确定的。javascript的引用数据类型是存储在堆内存中，其实，说存储在堆内存中也不太准确，因为引用数据类型的内存地址是存储在栈内存中，当我们想要访问引用数据类型的值的时候，需要先从栈内存中获得对象的内存地址，然后在通过内存地址找到所需要的数据。栈中的基本数据类型基本数据类型的值保存在栈内存中。访问方式是按值访问...
2021-03-31 21:49:43
2221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人