@柠稔-CSDN博客

原创总结面试题

css和html常见的块级元素,行内元素和空元素HTML5和css3新增特性src与href的区别、link与@import区别常见的块级元素,行内元素和空元素两栏布局和三栏布局（圣杯双翼飞）display布局元素居中的方法postiton定位html中的盒模型,BFC,以及清除浮动gitGit介绍git远程仓库的推送和拉取操作项目跨域vue配置多环境变量rem和vw,vh的介绍封装axios请求和接口管理SVN是什么配置 alias 别名返回顶部组件的实现项目搭建

2022-01-12 11:23:28 604 3

原创微信小程序双向数据绑定,父子传参

单向绑定语法1.普通的属性的绑定是单向的。例如：<input value="{{value}}" />解析：如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为leaf；但如果用户修改了输入框里的值，却不会改变 this.data.value。双向绑定语法对应属性前加入model:前缀：<input model:value="{{value}}" />

2022-03-01 15:28:14 551 1

原创 async和await

特点asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的async/await的优点1.方便级联调用，即调用依次发生的场景；2.同步代码编写方式，更符合代码编写习惯；3.多个参数传递， Promise的then函数只能传递一个参数，async/await没有这个限制，可以定义块级变量传递数据4

2022-02-28 10:50:09 188

原创 Promise的详细讲解

文章目录前言一、Promise是什么？二、Promise有两个特点三、使用 new 来创建一个promise对象四、Promise的API前言一、Promise是什么？Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。这个时候可以..

2022-02-23 21:27:54 1208

原创 vue2和vue3的区别

文章目录前言一、vue2和vue3双向数据绑定原理的区别？二、生命周期的变化三、diff不同前言一、vue2和vue3双向数据绑定原理的区别？vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的vue3发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：可直接监听数组类型的数据变化性能的提升监听的目标为对象本身，不需要像Object.definePr..

2022-02-21 20:11:13 14538

原创登录的流程

<template> <div class="login_container"> <div class="box">  <div class="box-img"> <img src="~assets/logo.png" alt="" /> </div>  <el-form

2022-02-20 20:25:41 1356

原创 vue的prop验证

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样是为了防止子组件意外修改父组件的值，从而造成文档数据流混乱。在组件中修改 prop 传递过来的数据 Vue 会发出警告，所以有两种常见的用法去修改 prop 传递过来的值export default { props:["msg"], data() { return { // 本地data中定义属性，并将 prop 作

2022-02-18 21:23:47 330

原创 sot插槽

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用slot标签表示。插槽的分类：默认插槽，具名插槽，作用域插槽1. 默认插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据子组件：<div> <slot></slot></div>父组件：<heads>你好</heads>2.

2022-02-17 21:27:58 128

原创 V-for中为什么要使用key

1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改

2022-02-17 21:21:24 735

原创 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染三、解决方案Vue 不允许在已经创建的实例上动态添加新的响应式属性若想实现数据与视图同步更新，可采取下面三种解决方案：1.Vue.set()Vue.set( target, propertyName/index, value )参数：target：要修改的对象或数组propertyName/index：属性或下标value：修改后的value值this.$set(this.item, "newProperty", "新值");

2022-02-17 19:44:39 1042

原创后台管理图片上传

文章目录前言一，图片上传前言一，图片上传1、<template> <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :headers="headerObj" ..

2022-02-17 19:17:26 758

原创对Vue中的$nextTick()理解

文章目录前言一、NextTick是什么？二，为什么要有nexttick三，使用场景前言一、NextTick是什么？在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，举例一下Html结构<div id="app"> {{ message }} </div>const vm..

2022-02-17 19:14:14 938

原创 vue后台管理系统打包过程

1. 添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogresscnpm i nprogress --save在main.js中引入/导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'.....//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息axios.interceptors.request.use(config =>

2022-02-17 15:45:21 1023

原创 echarts的使用步骤（案例）

1.安装npm install echarts --save<template> <div class="reports">  <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> &

2022-02-16 20:12:33 320

原创 Vue中的keep-alive

前言一、keep-alive是什么？是用来包裹动态组件的,包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中作为标签使用包裹在需要缓存的组件外二、作用在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性二、原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode 的 name 符合缓存条

2022-02-15 18:51:58 252

原创 vue-router

前言一、Vue路由基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWor..

2022-02-14 18:51:45 137

原创 Vue中的过滤器filter

前言一、filter过滤器是什么？过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。二、过滤器分为什么?过滤器分为全局过滤器和局部过滤器1.全局过滤器全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(v..

2022-02-14 16:44:00 11926

原创 Vue的自定义指令以及Vue自定义指令的应用场景

前言一、Vue的自定义指令分为？vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令分为全局自定义指令和局部的自定义指令全局自定义指令是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象，这个对象上有钩子函数})下边举例说明: Vue.directive('focus', { // el：指令所绑定的元素，可以用来直接操作 DOM。 //binding：一个对象..

2022-02-13 18:56:38 3478

原创 Vue的组件开发（总结）

一，组件开发的思想我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目

2022-02-11 15:36:43 976

原创 Vue中常用的修饰符

一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.pre

2022-02-11 15:16:41 23657

原创 mvvm和mvc

文章目录前言一、mvvm？view ,model,viewModel 三者的关系：一、mvc？前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、mvvm？MVVM是Model-View-ViewModel的简写，即数据-视图-视图模型。Model：模型,应用中的数据模型,指的是后端传递的数据。View：视图，指的是所看到的..

2022-02-11 15:07:49 609

原创 Vue中computed、methods、watch区别

computed、methods、watch区别computed 和 methods区别在官方文档中，强调了computed区别于method最重要的两点:1 . computed是属性调用，而methods是函数调用2 .computed带有缓存功能，而methods不会被缓存如图所示:1 . computed属性的结果会被缓存，只有当依赖值发生改变才会重新计算，一般处理复杂的逻辑的时候使用，擅长处理一个数据受多个数据影响(购物车商品结算)；2 . methods 方法表示一个具体的操

2022-02-11 10:55:18 470

原创 Watch深度监听

watch是什么？watch可以让我们监控一个值的变化，从而做出相应的反应。它有两种写法,一种是函数形式,一种是对象的形式,函数的话只能用基本数据类型,对象可以用引用数据类型。当它如果是对象的话，函数形式的话,监听不到对象中属性的变化,因此我们需要开启深度监听的模式 <div id="app"> 用户名：<input type="text" v-model='person.name'> <button @click='p..

2022-02-11 10:44:23 584

原创 Vue的组件通讯

文章目录前言一、Vue的组件通讯包括哪几个？1.父传子2.子传父3.非父子传参前言一、Vue的组件通讯包括哪几个？三个。分别是父传子,子传父和兄弟组件传值1.父传子在父组件的子组件是标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受父组件传过来的数据，props可以是数组也可以对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}1 . 父组件parent.vue代码如下： <template> <div..

2022-02-09 16:09:14 619

原创什么是回流，什么是重绘，它们的区别

什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变优化项目，提高性能应用场

2022-02-07 21:00:19 611

原创 Vue的虚拟dom和diff算法

一、什么是虚拟DOM虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DO/M结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构，来达到更新视图的目的。为什么要用虚拟DOM来描述真实的DOM呢？创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一

2022-02-07 13:55:38 772

原创 Vue的数据的双向绑定

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档一、什么是Vue的双向绑定vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。二、步骤步骤一:需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了

2022-02-07 08:30:31 171

原创 Vue常用的指令，v-if和v-show的区别，Vue的生命周期

文章目录前言一、vue常用的指令？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、vue常用的指令？v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过..

2022-01-27 15:08:57 623

原创为什么Vue中的data必须是一个函数

为什么data必须是一个函数?如下有一个例子:const MyCom=function(){}MyCom:prototy.data={a:1,b:2}const obj1=new MyCom();const obj2=new MyCom();//只改变obj1.data.bobj1.data.b=10console.log(obj1.data.b) //10console.log(obj2.data.b) //10从上边的例子可以得出如下结论:object是引用类型的,每个对

2022-01-27 13:42:33 1568

原创 Vue的基础知识（开始）

文章目录前言一、Vue.js是什么？前言一、Vue.js是什么？vue是一套用于构建用户界面的渐进式框架。(渐进式:想用什么就用什么不必全都用)下面举例说明:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})如果想知道更多的vue的知识也可以点这个链接进去vue更多基础知识...

2022-01-27 12:49:20 848 2

原创 day01初始化项目和登陆的过程

文章目录前言一，电商业务的概述二，开发模式三，用到的技术栈四，初始化项目的步骤1.创建项目2.下载依赖cnpm i3.配置路由4.配置Element-UI插件5.封装Axios6.初始化git仓库7.添加初始化的全局样式reset.css五，开始写登陆部分前言刚开始如果你想要查看登录进去的内容,首先找到项目的main-dev.js文件把axios.defaults.baseURL的地址改为线上的接口http://timemeetyou.com:8889/api/private/v1首先我们需..

2022-01-24 20:28:59 113

原创 null和undefined的区别

相同性：在JavaScript中，null 和 undefined 几乎相等在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等console.log(nullundefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //“undefined”console.log(typeof null); //“object”console.log(null=un

2022-01-24 15:22:39 142 1

原创 for...in...和for...of...的区别

for···in和for···of的区别：首先一句话：(for···in取key，for··of取value)①从遍历数组角度来说，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}

2022-01-24 15:20:24 97 1

原创 js中数组排序的方法

1.冒泡排序将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）代码如下:// 冒泡排序var arr = [52,3,8,57,75,2,1];for (var i = 0; i<arr.length; i++) { for (var j =0;j<arr.length-i; j++) { if(arr[j]>arr[j+1]){ var

2022-01-23 18:32:31 667 3

原创数组去重的常用方法

例如要将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉,可以用以下的方式1、 ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,unde

2022-01-23 18:24:09 153 1

原创 js数组的常用方法

数组的方法有如下几种:join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）常见数组的方法1.join()join，就是把数组转换成字符串，然后给他规定个连接字符，默

2022-01-21 16:22:01 90 1

原创 js数据类型的判断

一,数据类型有哪几个?1.typeof的方法总结:根据上方可得，typeof检测基本数据类型,除了null类型 null===>objecttypeof不能检测引用数据类型都会返回object,除了function类型2. instanceof的方法总结:instanceof 检测字面量类型的基本数据类型,全都失效instanceof 检测引用数据类型,非常准确3.constructor的方法总结:可以检测所有的数据类型很准确,null,undefined除外,会报错隐患:在原

2022-01-20 16:52:44 623 1

原创 js数据类型、堆栈存储，深拷贝和浅拷贝（以及手写深拷贝）

文章目录前言一、js的数据类型有哪些？二、使用步骤1.引入库2.读入数据总结前言一、js的数据类型有哪些？基本数据类型:Number,String,Boolean,Underfined,Null、Symbol（es6新增独一无二的值）和 BigInt（es10新增）；引用数据类型:Object。它包含了Object、Array、 function、Date、RegExp。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas a..

2022-01-20 11:48:34 185 2

原创异步单线程（js）宏任务与微任务

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、常见的宏任务和微任务？前言提示：以下是本篇文章正文内容，下面案例可供参考一、常见的宏任务和微任务？宏任务:setTimeout setInterval Dom事件, Ajax请求微任务:Promise async/await微任务>dom渲染>宏任务结论:微任务执行时机比宏任务早举例说明:console.log(1)setTimeout(()=>{console.log(2)}

2022-01-19 13:15:33 699 1

原创垃圾回收和内存泄漏的问题

垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变

2022-01-15 15:06:09 141 1

空空如也

空空如也