- 博客(31)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 JS面试题汇总（一）
1. this关键字的指向在全局作用域中的函数中this指向全局对象 windowvar x = 1; // var声明的变量会与 window 相映射，相当于 window.x === 1function test(){ console.log(this.x);}test(); // 1多数情况下，this 指向调用它所在方法的那个对象（this 的指向是在调用时决定的，而不是在书写时决定的。这点和闭包恰恰相反）// 声明位置var me = { name: 'xi
2021-05-21 07:35:45
129
原创 两数之和（返回对应值）
来源：某公司面试真题给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 的那 两个 整数，并返回它们。示例 1：输入：nums = [2,7,11,15], target = 9输出：[2,7]示例 2：输入：nums = [3,2,4], target = 6输出：[2,4]思路声明一个名为 result 的数组，用于存放结果，再声明一个名为 temp 的临时数组，用于存储 nums 的 item，遍历 nums ，在临时数组 temp
2021-05-09 20:02:50
427
原创 两数之和（返回索引）
两数之和（返回索引）来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/two-sum给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0
2021-05-09 19:24:15
285
1
原创 v-for中的key值的作用
首先我们来看一段代码：<body> <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="item in li
2021-05-06 00:43:36
153
原创 梦学谷管理系统（下）
整体项目中的难点mock.js的使用在这里我举的例子是在vue项目中如何使用mock.js。安装mockjsnpm install mockjs --save-dev在项目中创建mock.js，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例。//引入mockjsimport Mock from 'mockjs'//使用mockjs模拟数据Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', { "
2021-05-06 00:40:14
160
原创 梦学谷管理系统（上）
项目技术栈前端技术栈: Vue,Vue-Router,Element-UI,Axios后端技术栈： Node.js,Express,mock.js项目所有模块各模块技术点登录登录的页面布局和样式element-UI中的表单验证发送登录axios请求会员管理发送axios请求数据利用element-UI渲染数据利用element-UI实现分页供应商管理发送axios请求数据利用element-UI渲染数据利用element-UI实现分页员工管理发送a
2021-05-06 00:39:32
117
原创 电商后台管理系统（下）
整体项目中的难点1. 利用递归完成分配权限的渲染// 通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中 getLeafKeys (node, arr) { // 如果当前 node 节点不包含 children 属性，则是三级节点 if (!node.children) { return arr.push(node.id) } node.children.forEach(item => {
2021-05-06 00:36:00
79
原创 仿小米商城（上）
项目技术栈前端技术栈: Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈： Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)项目所有模块各模块技术点
2021-05-06 00:33:56
398
1
原创 电商后台管理系统（上）
项目技术栈前端技术栈: Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈： Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)项目所有模块各模块技术点登录登录的页面布局和样式element-UI中的表单验证发送登录axios请求axios请求拦截器，在请求头挂载Authorization属性用户管理发送axios请求数据利用element-UI渲染数据利用element
2021-05-05 20:16:23
133
原创 修改数据页面不更新的原因和解决方案
在项目中，我们有时会遇到我们修改了一个数据，但是视图并不会更新的情况，比如我们在做一个简单的购物车，请求过来的数据没有数量这个属性，于是我们像给这个对象添加一个count属性来表示数量：goods.count = 1;然后我们用计步器增加或减少这个数量时，发现视图并不会发生改变，但是我们console.log(count)却发现count时变化的，没有问题，这是为什么呢？这里要vue的一些底层原理，vue之所以能够做到双向数据绑定，靠的是Object.defineProperty()方法，vue使用
2021-05-05 00:35:13
490
原创 axios的封装
首先，在src中创建一个http文件夹，文件夹中创建一个index.js文件，在这个文件中配置一个网络请求的默认配置和拦截器的配置import axios from "axios";import router from '../router'axios.defaults.timeout = 10000// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config;}
2021-05-05 00:34:42
82
原创 vuex的核心概念和运行机制
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据Vuex的核心概念及其作用：state 所有的数据都存储在state中 state是一个对象mutations 可以直接操作state中的数据actions 只能调用mutations的方法getters 类似计算属性，实现对state中的数据做一些逻辑性的操作modules 将仓库分模块存储Vuex运行机制：在组件中通过dispatch来调用actions中的方
2021-05-05 00:34:07
62
原创 vue-router钩子函数
vue-router钩子函数有三个类型，分别是全局路由守卫，单个路由守卫和组件独享守卫。const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes,});//全局前置守卫router.beforeEach((to, from, next) => {});// 全局后置钩子router.afterEach((to, from) => {}); { pa
2021-05-05 00:33:10
339
原创 $nextTick
什么是nextTick？Vue官网是这样定义的：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。我们来看下面的代码：<body> <div id="app"> <h1 ref="h1">{{msg}}</h1> <button @click="next">next</button> </div> <script s
2021-05-05 00:32:43
72
原创 v-if和v-for的优先级
v-if和v-for同时使用时，v-for优先级更高在Vue的官网中，不推荐v-if和v-for同时使用这种写法是不推荐的：<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li></ul>Vue更推荐这种写法：<ul v-if="user.isActive"> .
2021-05-05 00:30:22
70
原创 v-if和v-show的区别
区别：当条件为真的时候没有区别；当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中display属性来控制使用场景：v-if更适合数据的筛选和初始渲染，v-if还可以结合v-else、v-else-if一起使用，v-show更适合元素的切换...
2021-05-05 00:29:48
58
原创 组件中data为什么是个函数
当我们只有一个根组件时，data可以为一个对象，但是我们做项目时，往往要进行组件的复用，这里有一个例子：<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter></div>在这里如果我们将data
2021-05-05 00:29:20
106
原创 vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。主要分为一下几个模块：Vue：把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setterObserver：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 DepCompiler：解析每个元素中的指令/插值表达式，并替换成相应的数据De
2021-05-05 00:27:16
80
原创 实现一个简易Vue（四）Dep 与 Watcher
4. Dep功能收集依赖，添加观察者(watcher)通知所有观察者代码class Dep { constructor() { // 存储所有的观察者 this.subs = [] } // 添加观察者 addSub(sub) { if (sub && sub.update) { this.subs.push(sub) } } // 发送通知 notify() { // 遍历 subs
2021-05-04 00:03:40
288
1
原创 实现一个简易Vue（三）Compiler
3. Compiler功能负责编译模板，解析指令/插值表达式负责页面的首次渲染当数据变化后重新渲染视图代码class Compiler { constructor(vm) { this.el = vm.$el this.vm = vm this.compile(this.el) } // 编译模板，处理文本节点和元素节点 compile(el) { let childNodes = el.childNodes // 获取所有子节点
2021-05-04 00:02:51
298
原创 实现一个简易Vue（二）Observer
2. Observer功能负责把 data 选项中的属性转换成响应式数据data 中的某个属性也是对象，把该属性转换成响应式数据数据变化发送通知代码class Observer { constructor(data) { this.walk(data) } // 遍历 data 对象的所有属性 walk(data) { // 1. 判断 data 是否是对象 if (!data || typeof data !== 'object') {
2021-05-04 00:00:57
143
原创 实现一个简易Vue（一）
整体分析Vue把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setterObserver能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 DepCompiler解析每个元素中的指令/插值表达式，并替换成相应的数据Dep添加观察者(watcher)，当数据变化通知所有观察者Watcher数据变化更新视图1. Vue功能负责接收初始化的参数(选项)负责把 data 中的属性注入到 Vue 实
2021-05-04 00:00:13
87
原创 手写一个简单的MVVM框架的Compile（带注释）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-05-03 00:54:24
159
原创 Vue面试题总结
1、简述MVVM和MVCMVC:Model（模型）View（视图）Controller（控制器）简单的理解：视图请求数据，将请求发送至控制器，控制器再将请求发送给模型，模型去查找数据，找到之后传给控制器，控制器再传给视图进行渲染。MVVMModel 代表数据模型View 代表UI视图ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器)简单理解：视图请求数据，将请求发送至VModel，在Vmodel的两端具有监听机制，直接调用模型的数
2021-04-28 21:25:24
191
原创 vue中的组件通信
1.父传子 prop在父组件的子组件标签上绑定一个属性，挂载要传输的变量<template> <div class="father"> <h1>父组件</h1> <Son :toSon="msg"></Son> </div></template><script>import Son from "./Son";export default { component
2021-04-25 00:27:53
129
1
原创 AJAX的核心步骤
创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();设置请求信息xhr.open(method, url, isAsync);// 设置请求头xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');发送响应xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用接收响应// 监听 readys.
2021-04-13 00:05:37
118
原创 JS数据类型的判断
JS中常用的数据类型判断的方法有4中，分别是：typeof：主要用来判断 基本数据类型 ，引用数据类型不可以用 typeof 检测若遇到 null 或 引用数据 类型，则返回object（function除外）typeof null, //"object"typeof [1,2,3], //"object" typeof {a:1,b:2,c:3}, //"object" typeof function(){console.log('aaa');}, //"function"用 ty
2021-04-05 21:00:34
132
原创 深拷贝
在上节我们说到引用数据类型，由于他的存储机制比较特殊，不能够直接赋值，所以我们需要实现拷贝，就要创建一个新的对象，然后遍历原对象，将原对象的键名与键值赋给新对象，代码如下：function clone(obj) { let result if (result instanceof Array) { result = [] } else { result = {} } for (let key in obj) { if
2021-04-05 20:44:33
101
1
原创 Javascript 的数据类型
Javascript 的数据类型基本数据类型：又称值类型，分别是 Number、String、Boolean、Undefined、Null、Symbol（es6新增） 和 BigInt（es10新增）引用数据类型：又称复杂数据类型，分别包含 Object、Array、 function、Date、RegExp区别：堆栈存储：基本数据类型主要存储在栈存储（主要针对 Number、String、Boolean） // 基本数据类型 let a = 100 let b =
2021-03-31 20:06:08
81
原创 promise的自定义封装
Promise 自定义封装1. 初始结构搭建<script> // 实例化对象 let p = new Promise((resolve, reject) => { resolve('OK') }) p.then(value => { console.log(value); }, reason => { console.w
2021-03-31 00:15:28
111
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人