uu盘-优快云博客

原创 JSON.stringify() 、JSON. parse()方法详解

json

2022-11-21 16:01:50 2979

原创用原生js实现退出全屏

全屏/退出全屏 let ele = document.querySelector('#app') if(this.type == 0) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen();

2022-06-09 09:56:45 316

vue中的render函数的使用我们先看一个例子： render: function (createElement) { return createElement('h1', this.blogTitle) } 相当于： <h1>{{ blogTitle }}</h1> vue中的render函数，它返回的是一个虚拟节点vnode，也就是我们要渲染的节点。重点看一下createElement参数 createElement( // 参数一：{String | Object

2022-05-05 16:02:48 4271

原创 vue使Lodash实现节流和防抖的问题

使用lodash实现节流和防抖的问题：首先下载lodash插件 cnpm i lodash -S 在项目使用防抖防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。一般我们应用在搜索框防抖，如果用户只要输入一个字符，就会触发请求，不仅从资源上来说是很浪费的，而且实际应用中，用户也是输出完整的字符后，才会请求，下面我们优化一下： <div class=''> <input type="text" v-model="value" @input="input"

2022-05-05 15:21:39 5919

原创数组方法reduce

ES5新增数组方法reduce reduce：对数组中的每个元素执行一个自定义的累计器，将其结果汇总返回这个方法接收两个参数：第一个参数：要执行的函数，执行的函数可以传入参数第二个参数：函数迭代的初始值没有设置函数的初始值迭代值 let arr = [1,2,3,4,5] arr.reduce((prev,cur,index,arr)=>{ // prev 上次调用函数的返回值 // cur 当前元素 // index 当前元素索引 // arr 被遍

2022-05-05 15:16:37 230

原创 img底部空白间隙的问题

img底部空白间隙的问题先看代码： <!DOCTYPE html> <html lang="zhCn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

2022-03-22 20:04:20 422

原创封装函数实现instanceof功能、封装判断两个对象是否相等

封装instanceof函数表达式：A instanceof B B找到原型对象，A找隐式原型链，如果由交点，返回true 原理：A.__proto__ === B.prototype 手写instanceof方法 function instance_of(obj,Fn) { // 判断传入的是构造函数是不是函数类型 if(Fn && typeof Fn != 'function') { throw new Error('你传入的不是函数') }

2022-03-03 15:28:08 695

原创 vue后台管理系统(记录)

后台管理系统中，根据不同的权限显示不同的导航栏菜单基本流程：首先获取数据--->动态拼接路由信息--->动态添加路由信息 # router/index.js import store from '@/store' const routes = [ { path:'/', redirect:'/login' }, { path: '/login', name: 'Login', component: () => import('../vi

2022-03-01 19:53:59 746

原创 vue3.x中的 Vuex(状态管理工具)

前言 Vue3在2月份已经变成默认版本了，接下来的vue3将会成为主流的框架。我们来看看vue3中的奇妙世界吧 vuex Vuex 是一个专为 Vue.js 的状态管理工具，可以解决组件之间数据共享的问题。注意：我们在项目中如果使用到vuex，最好通过dispatch触发actions的事件 ---> 在actions里通过commit触发mutation ---> 改变state的状态在vue3.x中如何使用vuex vue2.x和vue3.x最大的区别就是 vue3.x中使用的是

2022-03-01 19:36:14 1105

原创 js数组去重

对let arr = [false,false,'uu盘','uu盘',2,2,undefined,undefined,null,null,NaN,NaN,{},{}]进行去重。 1. ES6-set 使用ES6中的set方法 let newArr = [...new Set(arr)] console.log(newArr); 只能对简单数据类型进行去重，引用数据不能去重 2. forEach + indexOf let newArr = [] arr.forEach(item=>{

2022-02-28 14:23:38 481

原创 Vue2和Vue3的区别

1. 双向数据绑定原理 vue2 是结合发布者订阅者模式，结合es6Object.defineProperty()对数据进行劫持，进一步通过vue中的watcher的update实现双向数据绑定。 vue3 中使用了es6的proxy进行数据代理。相对于vue2，使用proxy的优势： defineProperty只能监听某个属性，不能对全对象监听；可以监听到数组内部的变化； vue2中我们给对象添加一个新属性，它不会更新到视图上，只是因为新添加的属性并没有通过Object.defineProper

2022-02-21 17:46:33 4532

原创 Vue3的组合api(composition-API)

vue2中Options API的弊端在Vue2中，我们编写组件的方式是Options API <script> export default { // 定义数据 data() { return {}; }, // 声明周期钩子 created() {}, mounted() {}, // 定义方法 methods: {}, // 组件 components:{}, // 过滤器 fil

2022-02-18 21:07:56 763

原创 Vue中Mixin&extends的使用

官方定义Mixin Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。项目中如何使用Mixin 在src文件夹下创建一个mixins文件夹在demomixins.js文件下 export default { data() { return { msg:'mixins 中的data'

2022-02-18 20:27:46 790 1

原创关于vue给对象新增属性页面不会动态更新的问题

问题不知道大家有没有遇到过这个问题，当我们给data里面声明的对象添加一个新属性，这个新属性是不会动态更新视图的。看一个例子 <template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div> </template> <script> export default { data(){

2022-02-17 21:26:27 3149

原创 Vue中的$nextTick()

Vue中的$nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 看一个例子 <template> <div class=''> <span class="span" v-if="show">uu盘</span><br> <button @click="change">点击</button> </di

2022-02-17 21:26:00 395

原创 vue后台管理系统打包上线到node

项目准备 1. 配置 alias 别名使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。 //加载path模块 const path = require('path') //定义resolve方法，把相对路径转换成绝对路径 const resolve = dir => path.join(__dirname, dir) module.exports = { chainWebpack: config =&gt

2022-02-17 15:37:44 1206

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

1.可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果 2.没有key。vscode编辑器会报红下划线 3.可以这样简单地理解，无：key属性时，状态默认绑定的是位置；有：key属性时，状态根据key的属性值绑定到了相应的数组元素。 4.之所以要加上key是因为vue源码是内部数据驱动，通过改变数据进而达到改变视图的效果，加上key这样算法上容易定位到对应的元素，避免去遍历dom造成的性能的消耗 ...

2022-02-17 14:16:57 925

原创 vue使用keep-alive缓存页面

概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中作为标签使用。作用在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性缓存组件一、缓存所有页面直接包裹根router-view即可 <template> <div id="app"> &

2022-02-16 15:15:11 1972

原创 MVVM和MVC理解

什么是MVC和MVVM MVC、MVVM是两种常见的前端架构模式，这种架构模式是抽象分离出来的为了解决某一类问题的方法。 MVC和MVVM中的特点：相同点：其中M指的是model(数据)，V指的是view(视图) 不同点：这两种架构中，不同的只是MV之间的纽带部分。 MVC 分为M(model模型) V(view视图) C(controller控制器)。在MVC中用户进行视图操作之后交给控制器处理，在控制器中响应视图的事件调用model的接口对数据进行操作，只要model发生变化，就给对应的视图进行更

2022-02-11 20:15:06 1215

原创 Vue中computed、methods、watch区别

1. computed计算属性计算属性最常见的写法就是函数写法： <template> <div class="home"> {{formMsg}} <button @click="formMsg = 'uu盘'">点击修改</button> </div> </template> <script> export default { name: 'Home', data() { re

2022-02-10 21:17:01 677

原创 JS代码递归实现树形数据与线性数据互换

前言在我们写后台管理的时候，后台给我们的数据有时候不是我们所需要的数据结构，这时候我们要根据一系列的操作得到我们想要的数据结构。线性数据 —》树形数据 let list = [{ name:'一级', id:'1', pid:null },{ name:'二级', id:'2', pid:'1' },{ name:'三级1', id:'3-1', pid:'2' },{ name:'三级2', id:'3-2'

2022-02-10 09:39:40 792

原创浅谈vue虚拟dom，diff算法

vue中的虚拟dom 什么是虚拟dom? 虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。简单来说：本质上是js对象,这个对象就是更加轻量级的对DOM的描述为什么要创建虚拟dom? 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。 vue中diff算法 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个

2022-02-07 19:25:55 544

原创 Vue-Router

前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash 和 history 如何设置路由模式 const router=new VueRouter({ mode:'history / hash', routes:[...] }) # mode:'hash' 默认地址栏会多一个#符号： http://localhost:8080/#/login # mode:'h

2022-02-07 09:17:03 446

原创 vue自定义过滤器

vue自定义过滤器过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。 vue中的过滤器分为两种：全局过滤器和局部过滤器全局过滤器 Vue.filter('formatePrice', (val) => { return val.toFixed(2) }) // 使用 {{13.44 | formatePrice}} 局部过滤器 <script> export default { data() {

2022-02-04 09:57:29 1279

原创 Vue3 + TS(二)

Vue3 vue3的新特性首先是向下兼容，Vue3 支持大多数 Vue2 的特性。性能的提升，内存减少55%、打包大小减少41%、渲染快、使用Proxy实现数据响应式，重构虚拟dom 新推出的Composition API(组合 api)，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。说白了就是封装不好，重用不畅。其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。更好TypeScript支持。

2022-02-04 09:55:30 2541 1

原创 vue组件化开发

vue组件化开发在vue中开发，都是用的组件化的思想开发的，一般在都会在搭建项目的时候，都会先建立组件的模板，把架子搭起来。也就是在组件中定义好<template>视图层，<script>逻辑层，<style>css样式层。一般在项目src中创建一个components文件夹存放我们自定义的组件，在需要的页面中导入并注册后，通过标签的形式使用。 1.第一步：在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件) import m

2022-02-04 00:04:01 1210

原创 Vue3 + TS (一)

TypeScript TypeScript是一种由微软开发的开源、跨平台的编程语言。它是js的超集，最终会被编译为js代码。安装命令：npm install -g typescript 检查版本：tsc -V 手动编译代码新建一个first.ts var str:string = 'uu盘' console.log(str) 将first.ts引入index.html文件中： <script src="./first.ts"></script> 浏览器会报错：我们将

2022-02-03 13:49:16 3827

原创 vue的双向数据绑定原理

vue的双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。 ...

2022-01-31 23:33:08 699 3

原创 vue push方法重写解决路由错误问题

const routerPush = Router.prototype.push Router.prototype.push = function push(location) { if(typeof(location)=="string"){ var Separator = "&"; if(location.indexOf('?')==-1) { Separator='?'; } location = location + Separator + "random=" +

2022-01-30 23:05:21 786

原创 vue自定义指令

vue自定义指令 vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册 Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM

2022-01-29 22:28:13 731

原创用vue指令实现一个拖拽功能

注意PC端中没有触摸事件，下面用局部指令移动端拖拽 directives:{ 'drag':{ inserted(el,binding){ el.style.position = 'absolute' let x = 0 let y = 0 el.ontouchstart = function(es) { x = es.touches[0].pageX -

2022-01-29 22:23:02 624

原创 vue的生命周期

vue的生命周期 vue实例从创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。 beforeCreate:创建前实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。 data() { return { num:1 } } beforeCreate(){ con

2022-01-28 22:51:13 721

原创 vue常见的指令

vue常见的指令 ????v-text(相当于原生js中的innerText) 解析文本两者等价 <span v-text="msg"></span> <span>{{msg}}</span> ????v-html(相当于原生js中的innerHTML) 与v-text相比，v-html可以解析标签 <p v-html="<span>你好</span>"></p> ????v-once(只渲染一次) 只

2022-01-27 11:08:06 647

原创 vue中的slot(插槽)

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

2022-01-27 11:06:54 831

原创 vue基础

什么是vue 是一套用于构建用户界面的渐进式JavaScript框架,通过对数据的操作就可以完成对页面视图的渲染。 vue特点：上手简单、灵活的组件应用、高效的数据绑定 vue的创建 const vue = new Vue({ el:"#app", // vue实现逻辑代码的作用域，挂载节点放在div中 data:{ // 存放变量(对象格式) num:0 } }) 为什么组件的data必须是个函数？在使用vue脚手架(vue cli)创建的vue项目中，将data属性定义成一个对象会

2022-01-26 23:28:51 275

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

for in 和 for of for in和for of都是用来遍历属性的，我们先看一个例子： let arr = [1,2,3,4,5] for(let key in arr) { console.log(key); // 输出下标 } for(let value of arr) { console.log(value); // 输出每个元素 } let obj = { name:'zbt', age:18 } for(let key in obj) { c

2022-01-24 17:06:49 401

原创 null 和 undefined区别

在javaScript中，将一个变量赋值为null和undefined，老实说几乎没区别 let a = null let b = undefined console.log(a == b); // true 相同点：在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等 let a = null let b = undefined console.log(Boolean(a)); // false console.log(Boolean(b));

2022-01-24 17:00:48 362

原创 js数组方法

???? 1. push() 给数组的末尾添加一个或多个元素。格式：数组.push(参数1，参数2…) let arr = [1,2,3] let temp = arr.push(4) console.log(arr) // 输出 1 2 3 4原数组改变 console.log(temp) // 输出4，返回添加元素后数组长度 ???? 2. unshift() 给数组的首位添加一个或多个元素。格式：数组.unshift(参数1，参数2…) let arr = [2,3,4] let temp = ar

2022-01-20 17:45:28 1437

空空如也

空空如也