森媛-CSDN博客

原创 async 和 await

Async 和 await 是一种同步的写法，但还是异步的操作，两个内容还是必须同时去写才会生效不然的话也是不会好使1.asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数2.异步async函数调用，跟普通函数的使用方式一样3.异步async函数返回一个promise对象4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的优点：1.方便级联调用：即调用依次发生的场景；2.同步代码编写方式： Promise使用then函数进行链式调用，一

2022-02-23 22:29:00 955

原创 promise的使用及实现

概念promise是es6提出的一种异步编程的解决方案promise的实现（原理）：promise本质上是一个构造函数，它接收一个函数作为参数该函数接收两个参数分别是resolve和reject 他们也是函数promise有三个状态pending 初始状态fulfilled 成功状态rejected 失败状态promise 在实例的时候会产生一个状态 state他的初始值是pending（进行中) 当我们调用了resolve函数后 promise的状态会立即从进行中的状态转化为

2022-02-23 22:25:46 227

原创 promise封装小程序api请求

第一步:在根目录下创建一个utils文件夹,在里面创建一个http.jsfunction http({url,method="get",data=""}){ wx.showLoading({ title: '拼命加载中...', }) return new Promise((resolve,reject)=>{ wx.request({ url: '公共地址'+url, method:method,

2022-02-23 16:37:24 433

原创电商后台管理详情

后台管理项目介绍一、项目结构的搭建二、开发流程1.项目初始化2.后台配置3.登录以及退出登录的业务流程登录业务的相关技术点token原理分析登陆页面的布局用到了以下的elment ui组件创建登陆组件实现登录功能退出3.主页面布局、用户列表功能主页面布局侧边栏的布局以及渲染请求数据侧边栏菜单的伸缩用户列表功能面包屑导航区域卡片视图区域、搜索框、添加按钮搜索功能的实现获取用户列表数据分页4.权限管理模块权限列表角色列表一、项目结构的搭建二、开发流程用户管理模块登录/退出、状态切换、编辑、分页、分配

2022-02-22 09:24:51 1496 2

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

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script&

2022-02-17 21:05:24 478

原创 Vue中的$nextTick()

一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构<div id="app"> {{ message }} </div>1const vm = new Vue({ el: '#app'

2022-02-17 21:02:50 156

原创 vue之prop

Prop1 . prop 大小写Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<blog-post post-title="hello!"></blog-post>2 .单项数据流

2022-02-16 22:52:58 89

原创 solt插槽

1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return

2022-02-16 22:49:51 364

原创 v-for为什么要用key

一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />那么这背后的逻辑是什么，key的作用又是什么？key是给每一个vnode的唯一id，

2022-02-16 22:46:55 481

原创 vue使用keep-alive缓存页面优化项目

概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode

2022-02-15 22:22:03 236

原创 vue-router实现原理

一、前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。二、vue-Router两种模式更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash — 默认值，利用 URL 中的hash("#") 、history-- 利用URL中的路径（/home）如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})mode

2022-02-14 22:46:41 5095

原创 ajax请求的优缺点

ajax的概念：相当于在客户端与服务端之间加了一个抽象层(Ajax引擎)，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器，像一些数据验证和数据处理都交给Ajax引擎来完成，只有确认需要向服务器读取新数据时 Ajax引擎才会向服务器提交请求。ajax的优点：1.无刷新更新数据Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信2.异步与服务器通信使用异步的方式与服务器通信，不打断用户的操作3.前端与后端负载均衡将一些后端的工作移到前端，减少服务器与带宽的负担4.

2022-02-14 19:51:29 595

原创 vue路由

一、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 HelloWorld from

2022-02-14 16:37:52 72

原创 vue自定义指令的应用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&

2022-02-13 22:55:01 66

原创 vue组件化开发

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.

2022-02-13 22:50:48 81

原创 VUE中的修饰符

一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<a v-on:click.stop="doThis"></a><!-- 提交事件

2022-02-13 22:42:23 378

原创 MVVM和MVC的区别

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})

2022-02-13 22:39:13 92

原创 watch深度监听

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p ></div><script src="/node_modules/vue/dist/vue.js"></script><script t

2022-02-10 23:34:01 69

原创 methods,watch,computed的区别

1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<div>{{message.split('').reverse().join('')}}</div><div>{{reverseMessage}}</div>computed: {

2022-02-10 23:33:02 84

原创 vue组件通信

一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动父—>子（子组件中修改props数据，是无效的，会有一个红色警告）1. 父组件parent.vue代码如下：父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="parent

2022-02-09 23:37:47 54

原创 vue的知识点

一、实例和组件定义data的区别一.实例中的data属性可以是一个对象也可以是一个函数二.在组件中的data只能一个函数,如果组件data是一个对象,则会报错三.

2022-02-07 16:52:56 111

原创 vue中computer watch methods 的区别

computed计算属性计算结果会缓存,只有当依赖值改变才会重新计算对于任何复杂逻辑，你都应当使用计算属性// 而是依赖于属性的,就是一个属性的封装,属性的值不变化,那么不会多次调用computed,所以性能更好计算属性默认只有getter，可以在需要的时候自己设定setter：computed: { fullName: { // getter get: function () { return t

2022-02-07 09:54:15 103

原创 filter过滤

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })var app = new

2022-02-07 09:53:00 43

原创自定义指令

什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"``v-xxx="'st

2022-02-07 08:31:16 366

原创 vue路由传参的基础用法

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 HelloWorld from '

2022-02-07 08:30:05 60

原创 keep-alive

概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们和 transition 相似，keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素，也不会出现在父组件中原理在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

2022-02-07 08:28:42 55

原创 v-for中的key

一、Key是什么有两种<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />key的概念key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点1. 在写v-for的时

2022-02-07 08:28:05 821

原创组件化开发

使用组件的好处组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间重复性父传子<template> <div> <my-child :parentMessage="parentMessage"></my-child> </div></template><script> import MyChild from '@c

2022-02-07 08:27:21 48

原创 vue2和vue3双向绑定的原理

新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题：关于对象Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的关于数组Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newV.

2022-02-07 08:25:37 406

原创 vue3新语法

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）作用: 聚合代码 & 逻辑重用1. 使用 reactive 绑定数据<template> <div> <h1>使用 reactive 绑定数据</h1> <p>{{state.msg}}</p> <p>{{info}}</p&gt.

2022-02-07 08:24:15 250

原创 js数组方法

js数组方法join()push() 和 pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）join()就是把数组转换成字符串，默认的是逗号( ，)书写格式：join(" ")，括号里面写

2022-01-21 11:52:28 51

原创原型和原型链

1.prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实例对象都会有_ proto 属性,其被称为隐式原型每一个实例对象的隐式原型 proto _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型_ proto 上去找，如果还查不到，就去找原型的原型，一直找到最顶层(

2022-01-14 16:14:43 55

原创作用域和自由变量

什么是作用域变量作用域:一个变量可以使用的范围作用域的种类全局作用域:就是Js中最外层的作用域函数作用域:是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）es6作用域,只适用于const,let自由变量自由变量:当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域，就形成了作用域链。变量提升(预解析)var声明的变量，fu

2022-01-14 16:08:24 55

原创 vue-cli4打包

目录项目开始时webpack配置一.配置 proxy 跨域二.配置alias别名项目结束后打包前webpack配置一.去除生产环境sourceMap二.去除console.log打印及注释三.使用CDN加速优化四.图片压缩五.只打包改变的文件六.公共代码抽离七.配置打包分析八.骨架屏完整配置项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一.配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，

2022-01-13 19:39:44 1603

原创前端常见浏览器兼容性问题解决方案

前言：不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容常见的浏览器内核：常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器Trident内核，也成为IE内核Chrome浏览器Webkit内核，现在是Blink内核Firefox浏览器Gecko内核，俗称Firefox内核Safari浏览器Web

2022-01-12 20:58:09 5681 2

原创 vue路由导航守卫

导航守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。全局守卫全局前置守卫:router.beforeEach全局解析守卫:router beforeResolve全局后置钩子 router afterEach全局前置守卫当一个导航触发时就会触发全局前置守卫，所有的导航都会通过全局前置守卫每个守卫方法接收三个参数：to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过th

2022-01-12 07:50:25 95

原创 css的一些知识总结

目录行内元素有哪些？块级元素有哪些？空(void)元素有那些？什么是CSS Hack1.条件Hack2.属性Hack3.选择符Hack浏览器优先级src与href的区别link和@import的区别行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行

2022-01-11 14:20:48 54

原创圣杯布局和双飞翼布局

什么是圣杯布局和双飞翼布局？圣杯布局和双飞翼布局是一样的，都是两边固定宽度，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。不过两者实现方式上有些区别为什么要使用双飞翼布局和圣杯布局都是为了解决两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。原理及代码圣杯布局：为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左

2022-01-10 23:29:08 243

原创两栏布局和三栏布局

两栏布局//html<div class="wrapper"> <div class="left"> 左边固定宽度，高度不固定 </div> <div class="right"> 这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。 </div></div>1.grid//css.wrapper { padding: 15px 20px; border: 1px dashed #

2022-01-10 23:24:43 53

原创 flex布局

flex概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{ display: flex;}行内元素当然也可以使用flex布局.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}...

2022-01-09 20:03:48 343

空空如也

空空如也