- 博客(37)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 JavaScript必看十道面试题
1.this指向1.谁调用指向谁例： function foo(){ console.log("this",this); }new foo();2.全局指向window例： function foo(){ console.log("this",this); } foo(); 3.构造函数的this指向构造函数实例4.call/apply/bind 强制改变this指向5.箭头函数的this始终指向父级上下文2.事件模型：
2021-05-20 21:48:34
3759
22
原创 前端vue精简版面试题(个人理解篇）
1.vue组件中为什么data必须是一个函数如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象2.vue常用的指令v-model：用来实现双向绑定v-for：用于数据循环v-show：显示内容（dom元素的display=block/none来控制元素的显示隐藏）v-hide：
2021-04-29 07:34:34
316
5
原创 如何解决跨域以及为什么会产生跨域？
出现浏览器跨域的原因浏览器的同源策略指的就是协议，域名，端口，三者都相同，如果其中有一个不同就属于跨域跨域可能造成的报错ajax在不同域名下的请求无法实现常用的解决跨域的方法1. JSONP跨域JSONP(JSON with Padding: 填充式JSON)JSONP应用的技巧：在HTML标签里，一些标签比如link、href、img这样的标签是没有跨域限制的。jsonp如何使用<body> <script type="text/javascript">
2021-04-08 11:46:23
2174
14
原创 打包vue文件后页面空白，出现报错
报错如下：Refused to apply style from 'http://127.0.0.1:5500/css/chunk-43aa77e1.33bcbef1.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Failed to load resource: the server responded with
2021-03-31 19:14:47
3425
7
原创 vue中的$nextTick
在下次DO更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM，vue在更新DOM时是异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新使用场景：修改数据之后，可以立即获取修改后的数据，主要体现在beforeCreat和update两个生命周期中...
2021-05-09 19:19:17
176
原创 keep-alive
keep-alive是动态组件，他是vue的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM，作用是缓存组件内部状态。避免重新渲染，不会出现在父组件中
2021-05-09 19:01:50
130
1
原创 Vue中双向数据绑定是如何实现的
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。主要分为三部分：observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法Compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数watcher负责数据监听，当数据发生改变通知订阅者，调用视图更新函数更新视图...
2021-05-08 16:03:40
171
原创 路由守卫钩子函数和执行顺序
什么是导航守卫：概念：导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作一、全局守卫router.beforeEach（全局前置守卫）router.afterEach（全局后置守卫）二、路由独享守卫beforeEnter(给单独的路由加)三、组件内守卫beforeRouteEnter(进入该路由时执行)beforeRouteUpdate（该路由参数更新时执行）beforeRouteLeave(离开该路由时执行)执行顺序：1.导航被触发2.在失活的组件
2021-05-07 21:22:38
1278
1
原创 vue生命周期共有几个？分别在什么时候使用？
1.创建beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用created() 最早开始使用 data和methods中数据的钩子2.挂载beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地mounted()dom已经渲染完毕 页面和内存的数据已经同步3.更新beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的updated() 数据更新完成以后触发的方法，DOM节点已经
2021-05-07 21:21:19
875
1
原创 vue常用的指令
v-model：用来实现双向绑定v-for：用于数据循环v-show：显示内容（dom元素的display=block/none来控制元素的显示隐藏）v-hide：显示隐藏v-if：显示隐藏（dom元素的删除、添加）v-bind：动态绑定v-on：给元素绑定事件v-text：解析文本v-html：解析html元素v-cloak 防止闪烁v-once 进入页面时 只渲染一次...
2021-05-07 21:19:48
98
原创 vue组件中为什么data必须是一个函数
如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象...
2021-05-07 21:17:43
137
原创 微信小程序与普通网页开发的区别（简易版）
1.开发语言的区别小程序的开发语言是javascript普通网页的开发语言是：HTML+CSS+JavaScript/Jquery2.开发者面对的运行环境的区别小程序开发中需要面对两大操作系统：iOS和Android的微信客户端，以及用于辅助开发的小程序开发者工具网页开发中需要面对各种各样的浏览器3.逻辑层和渲染层的区别小程序的逻辑层和渲染层是分开的，分别运行在不同线程，逻辑层是运行在JSCore中，没有完整的浏览器对象，所以缺少相关的DOM API和BOM API普通网页开发渲染线程和脚
2021-05-07 07:38:17
2606
原创 小程序的生命周期
1.全局生命周期 (App)onLaunch(options){//小程序的初始化}，onShow(options){//监听小程序启动或切换前台}，onHide(){//监听小程序切换后台}，onError(msg){//错误监听函数}，onPageNotFound(res){//小程序要打开的页面不存在时触发的}2.单独页面生命周期onLoad: function(options){//监听页面加载,一个页面只会调用一次，可以在onLoad中获取当前页面从上一级页面带
2021-05-07 07:37:59
158
原创 闭包（个人理解篇）
闭包的概念：当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包.闭包的产生情况：函数作为参数被传递function print(fn){let a=200;fn();}let a=100;function fn(){console.log(a)}print(fn)函数作为返回值被返回function create(){let a=100;return function(){console.log(a)
2021-05-07 07:37:17
142
原创 vue源码分析（watcher篇）
function Watcher(vm, exp, cb) {//在watcher的实例上保存回调函数this.cb = cb; //用于更新界面的回调函数this.vm = vm; //MVVM的实例vmthis.exp = exp; //对应的表达式this.depIds = {}; //n个相关的dep的容器this.value = this.get(); //初始化获取当前表达式对应的value}Watcher.prototype = {update: function() {t
2021-05-06 08:50:05
313
原创 vue源码分析（observe篇）
function Observer(data) {//在Observer实例上暂存datathis.data = data;this.walk(data);}Observer.prototype = {walk: function(data) {var me = this;//对data里所有的属性名进行遍历Object.keys(data).forEach(function(key) {me.convert(key, data[key]);});},convert: functi
2021-05-06 08:49:39
285
1
原创 vue源码分析（MVVM篇）
function MVVM(options) { //给实例新增$options属性,且把传递过来的参数进行暂存 this.$options = options; //在实例上新增_data 保存传递过来的data数据 var data = this._data = this.$options.data; //暂存this var me = this; //通过Object.keys取出data中每一项数据的属性名,然后遍历 O
2021-05-05 21:49:38
181
原创 vue源码分析（compile篇）
function Compile(el, vm) { this.$vm = vm;//vm 是MVVM的实例 // el == "#app" 判断当前用户传递的el是元素节点还是选择器,如果是元素节点则直接保存到$el中，如果不是 则根据选择器 去查找对应的元素 然后保存 this.$el = this.isElementNode(el) ? el : document.querySelector(el);//确定元素是否真正存在 if (this.$el) {//#
2021-05-05 21:45:31
197
原创 小米商城项目分析总结（一）
项目概述：一款购物商城，是一个标准的vue框架实现项目，包含vue框架中的很多功能项目所用时间：一周半项目难点分析以及解决方式描述：商品分类先获取分类的标题数据，获取到的标题里没有全部，自己写个全部放进去，点击不同的标题调用不同接口弹框控制点击详情页的喜欢或者加入购物车，进行鉴权，判断用户是否登录，如果没有登录，就弹出登录的弹框让用户登录后再进行相应的操作购物车需要用到计算属性，用来计算商品的数量和总价，通过监听用户添加数量来直接改变商品的数量和价格路由鉴权在router/index.
2021-05-05 21:19:16
3388
原创 电商后台管理系统项目总结（二）
所用技术栈：axios的封装、API的封装、vue-router、element-ui、echarts整体项目技术难点：商品管理、权限、分类参数、面包屑的封装axios的封装//1. 导入axios对象import axios from "axios";//2. 创建对象实例，create方法const Server = axios.create({ //请求接口的基础地址 baseURL: 'https://www.liulongbin.top:8888/api/priva
2021-05-05 19:50:14
1498
3
原创 电商后台管理系统项目总结（一）
项目模块分析：用户管理模块、权限管理模块、商品管理模块、订单管理模块、数据统计模块各模块技术点：用户管理模块登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换权限管理模块添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换商品管理模块添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类订单管理模块数据渲染、分页数据统计模块echarts图表、数据渲染用户管理模块展示：权限管理模块展示：商品管理模块展示：订单管理模块展示：数据统计模块效果
2021-05-05 19:07:29
5676
2
原创 利用文档碎片，改变dom元素的值
代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul
2021-04-27 14:21:56
164
4
原创 vue最全组件传值
1. 父传子父组件是通过props属性给子组件通信的父组件代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :msg="msg"></son> </div> </template> <script> import son from './son' //引入子组件 export defa
2021-04-23 21:41:03
368
5
原创 在js中获取一行注释用到兄弟节点为何会报错
报错如下：错误代码如下：报错原因为：getElementsByClassName获取的是一个集合，如果想要获取input框，就必须用inp[0]，找到集合中的第一项再进行操作，或者可以定义一个id，用getElementByID，获取的就是一个单独的元素正确代码如下：input框的下一个兄弟节点就是注释，如果input框之后换了行，就表示input的下一个兄弟的兄弟，然后需要加两个nextSibling，才能获取到注释信息...
2021-04-22 11:50:12
186
1
原创 vue中的路由守卫
什么是导航守卫：概念：导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调到登录页面，已登录就让用户正常进入。分为三种：一、全局守卫 分为三种：router.beforeEach（全局前置守卫）router.beforeResolve（全局解析守卫）router.afterEach（全局后置守卫）例：二、路由独享守卫beforeEnter(给单独的路由加
2021-04-21 19:10:31
296
1
原创 在vue中怎么在断网情况下，显示报错页面(此文章只讲述状态码为500时)
1.首先创建一个error页面，挂载error页面的路由，代码如下2.然后找到配置axios时写的响应拦截器，写入报错时，跳转至报错页面，代码如下3.效果展示
2021-04-20 15:47:28
622
2
原创 Js中当字符串特别长时，如何简单判断字符串里有数字
简单方法let str='errrtgrtgts234'; for(var i=0;i<str.length;i++){ let number=Number(str[i]) if(!number){ continue console.log('没有数字'); }else{ console.log('有数字') }} /* 简单正则判断法 */let str='errrt567grtgt'; fu
2021-04-19 08:43:07
332
1
原创 Vue全局组件
1.写一个组件，然后在export default中给当前组件起一个名字2.在main.js中写入以下代码3.在别的组件中，直接使用
2021-04-16 10:09:51
112
1
原创 Vue项目中如何封装axios以及API(详细步骤）
首先需要封装axios1.在src路径下创建utils文件夹，然后创建require.js2.require.js代码如下,（按需求更改）//1. 导入axios对象import axios from "axios";//2. 创建对象实例，create方法const Server = axios.create({ //请求接口的基础地址 baseURL: 'http://39.100.7.70:81/', //设置超时时间 timeout: 4000 })
2021-04-14 09:07:32
2659
3
原创 vue走马灯/轮播图
<div class="banner"> <el-carousel height="460px" :interval="5000" arrow="always"> <el-carousel-item v-for="(item,index) in banner" :key="index"> <img :src="'http://106.15.179.105:3000/'+item.imgPath" alt="">.
2021-04-12 22:07:58
315
1
原创 原生js常用的事件触发方法
鼠标事件onclick：单击鼠标时触发ondblclick：当用户双击主鼠标按钮时触发；onmousedown：当用户按下鼠标还未弹起时触发；onmouseup：当用户释放鼠标按钮时触发；mouseover：当鼠标移到某个元素上方时触发；mouseout：当鼠标移出某个元素上方时触发；mousemove：当鼠标指针在元素上移动时触发；mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；mouseleave：鼠标移出；html事件键盘事件...
2021-04-09 11:37:14
2119
5
原创 js中常用的字符串方法
js字符串常用方法1 charAt/charCodeAtcharAt根据索引获取指定位置的字符charCodeAt不仅仅获取字符，它获取的是字符对应的Unicode编码值（ASC ll码值）10进制参数：索引返回：字符或者对应的编码2 indexOf / lastIndexOf可以获取字符串在字符串中第一次或者最后一次出现位置的索引,若有这个字符返回值大于等于0，不存在为-1indexOf：返回 ：String 对象内第一次出现子字符串的字符位置。参数 strObj 必选项。Strin
2021-04-06 17:18:51
412
2
原创 vue打包的优化
打包根目录创建vue.config.js文件module.exports = { publicPath:'./'}cmdvue ui进入可视化工具先启动项目启动App停止运行 ，再运行build最后去dist 里index.html打开预览优化console.log强制隐藏console.log（在index.html里面写入） <script> console.log() = function(){
2021-04-01 21:54:13
226
3
原创 简易模糊搜索
用于搜索商品名<template> <div> <input type="text" placeholder="商品名称" v-model="shop_name" /> <table cellspacing="0"> <tr class="tableHead"> <th>编号</th> <th>名称</th> <t
2021-03-31 20:53:06
512
3
原创 常用js数组方法
常用js数组方法push、poppush(): 把里面的内容添加到数组末尾，并返回修改后的长度。pop()：移除数组最后一项，返回移除的那个值，减少数组的length。书写格式：arr.push(" ")，括号里面写内容("字符串要加引0号"),arr.pop( )Shift、unshiftshift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。unshift:将参数添加到原数组开头，并返回数组的长度 。书写...
2021-03-30 21:46:45
206
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人