sunhongyu007-优快云博客

题目把下面数组中对象的content键值对删除 --> mapconst res = [ { id : 1 , title : 'a' , content : 'a' }, { id : 1 , title : 'a' , content : 'a' } ]答1：直接把 res2 赋值两个属性 let res2 = res.map(item => { return { id: item.id , title:item.ti

2021-10-12 10:22:04 2321

原创修改数组中对象的值（各种方法）

2021-10-08 16:45:02 17522 5

原创 webpack 打包

理解打包命令: npm run build作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码.html,.css,.js。结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。查看导出默认配置vuecli中的打包工具仍是webpack，只不过vuecli把webpack的配置封装起来了，我们不能直接看到，可通过如下命令来查看： // 导出当前生产模式下的webpack配置文件到config.json /

2021-09-26 11:49:56 819

原创数组扁平化-- flat() 方法

数组扁平化可以使用 es6的flat方法实例：<script> let arr = [1,2,[3,4,['a','b']]] let newarr = arr.flat(Infinity) console.log(newarr);</script>打印结果注意：参数 infinity 可以改参数为 infinity时，把 [ ] 全部打开不管是几层的嵌套参数为 1 的时候，只会打开一层 [ ]，为2同理...

2021-09-24 17:40:29 240

原创 axios的基本使用

npm i axios -s // npm安装axios的基本的用法axios({ //请求地址 url:'/user', //请求类型 method:'post', //请求根目录 baseURL:'http://xxx.xx.xx.x/api', // URl传递参数 params:{id:2},//get请求时用 data:{key:''},//post请求时用 //自定义请求头 headers:{'x-Requested-Wi

2021-09-24 17:05:25 138

原创 vant 组件的使用

使用 npmnpm i vant -S // vue2 下载npm i vant@next -S // vue3 下载引入组件import Vue from 'vue'; import Vant from 'vant';import 'vant/lib/index.css'; // 样式引入Vue.use(Vant) // 全局注册

2021-09-22 17:54:17 196

原创 eslint 的配置（自用）

{ "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "extensions": [ ".js", ".vue", ".jsx", ".tsx" ] }, "editor.codeActionsOnSave": { "source.fixAl.

2021-09-22 17:46:13 274

原创 vuex是用来做什么的？配置项有什么？怎么用的？

Vuexvuex 是什么？vuex的配置项都是什么什么时候我们要使用vuexvuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式Vuex 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化Vuex有五个核心概念，state, getters, mutations, actions, modulesVuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-trave

2021-08-02 11:45:58 517

原创 vue的data为什么必须是函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。data为对象类型function Vue() { this.data= { name: '张三', age: '21' } }//创建了一个Vue实例.

2021-08-01 16:29:43 997

原创微任务和宏任务的区别是什么？

概念：1. 宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。2.微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。 3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。js执行顺序，（先执行宏任务列再是微任务队列）例子1：for(var i=0;i<10;i++){setTi.

2021-07-30 21:37:56 4051 2

原创 ES6 Promise

ES6 Promise 1.什么是Promise二级目录三级目录1.什么是PromisePromise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。（ps:什么是原型：https://blog.youkuaiyun.com/qq_34645412/article/details/105997336）Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pend

2021-07-30 21:37:47 117

原创浅拷贝与深拷贝

浅拷贝：浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。例子：var obj1 ={ name:'jack', age:25, hobby:['te

2021-07-30 21:37:36 155

原创 vue2和vue3自定义指令的区别

scroll 事件事件监听要在组件销毁的时候移除selsct

2021-07-30 21:37:25 773

原创 js中的this指向问题

简述this 是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁函数的不同使用场合，this 有不同的值。总的来说，this 就是函数运行时所在的环境对象一、一般的函数调用一般的函数调用属于全局性调用，因此 this 就代表全局对象 windowlet a = 1function fn() { let a = 2 console.log

2021-07-22 22:57:58 177

原创 JS数组遍历的几种方法

一、for最简单的遍历方法使用频率也是最高的let arr = [1,2,3,4,5,6]for(let i = 0; i < arr.length; i++) { console.log(arr[i])}// 1 2 3 4 5 6优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显let arr = [1, 2, 3, 4, 5, 6]let len = arr.lengthfor(let i = 0; i < len; i+

2021-07-22 20:48:52 504

原创 js 字符串拼接的几种方法

一、使用连接符 + 把想要连接的字符串串起来let shy = '帅哥'let a = '我是' + shyconsole.log(a) // 我是帅哥二、数组api join拼接let arr = ['hello','java','script']let str = arr.join("")console.log(str) // hellojavascript// join('--') 这个是可以换的换--就是用--拼接三、末班字符串俩 ` 拼接let a = 'jav

2021-07-22 18:08:55 34387

原创 vue 过滤器格式化时间

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>格式化时间</title> <style> #app{ font-weight: bold; font-size: 20px; } </style></he

2021-07-22 17:43:32 384 3

原创 Vue插入视频播放器之video

一、video简介video.js是一款web视频播放器，支持html5和flash两种播放方式。官网地址 or 详细的二、使用1. 下载包 npm install video.js2. 引入在main中import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video3. 使用在组件中添加<video id="myVideo" cla

2021-07-21 23:12:50 592 1

原创 this.router.go()和this.$router.push()

this.$router.go(val) => 在history记录中前进(1)或者后退(-1)，当val为0时刷新当前页面。 val 为几就会退几步。一般是一步一步的退或进。this.$router.push(path) => 在history栈中添加一条新的记录。path 可以是字符串（地址）也可以是对象（路由配置对象跳转到响应的页面）...

2021-07-21 22:44:26 480

原创 ajax 同步和异步区别？

ajax 同步和异步区别？我们发的请求基本都是会使用异步处理的。异步处理：就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求，在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事

2021-07-21 22:44:07 142

原创 vue 中:key 的作用

vue中在进行列表渲染的时候，会默认遵守 ‘就地复用策略’就地复用策略：当在进行列表渲染的时候，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止Vue中为v-for提供了一个属性，:keykey属性可以用来提升v-for渲染的效率！，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识. (有相同

2021-07-21 17:30:12 6475

原创什么是EventBus？

手写EventBus//eventBus.js文件function EventBus () { //定义一个用来存储回调的对象 let eventList = {} /** * 定义on方法 * eventName 是传递进来的自定义名称 * callback 是回调函数 * 将传递进来的以键值对的形式存储到eventList中 * eventName是键，callback就是值 * */ // 事件订阅 EventBus.protot

2021-07-20 01:13:04 616

原创 v3的图片懒加载

为什么要是有图片懒加载？图片多回到这加载速度变慢还可能会导致请求超时从而没有图片自定义图片实现图片懒加载(vueuse)下载 npm i vueuse/coreimport { useIntersectionObserver } from '@vueuse/core'import defaltImg from '@/assets/images/200.png'const useLazyLoad = (target, url) => { // 1. stop 是一个函数。如果调.

2021-07-20 01:12:49 146

原创 vueuse实现吸顶效果

npm i @vueuse/core 下载<template> <div class="app-header-sticky" :class="{show:y>=78}"> <div class="container" v-show="y>=78"> <RouterLink class="logo" to="/" /> <AppHeaderNav /> <div class="lef

2021-07-20 01:12:37 380

原创如何在vue3使用骨架屏

为什么要使用数据都都是ajax请求渲染来的然后它可能请求的慢就会一片白这不好所以就要使用骨架屏了站位像这样创建个组件<template> <div class="xtx-skeleton shan" :style="{width:'100px',height:'50px'}">  <div class="block" :style="{backgroundColor:'black'}">&lt

2021-07-20 01:12:20 844

原创 Vue-3.0

1. vue3与vue2的区别性能提高，更支持ts，增加Composition API, 移除$on ，移除过滤器，移除.snycVue3中，可以在template中写多个根元素；核心代码不一样： createApp(根组件).mount(‘public/index.html中的div容器’)创建vue3的项目：vue create 项目名2. Composition API 组合式优点：功能代码组合维护，分散定义，组合使用；缺点：不方便功能复用3. optionAPI选

2021-07-13 23:06:35 455

原创 todo-vue2

<template> <section class="todoapp">  <header class="header"> <h1>todos</h1> <input class="new-todo" placeholder="请输入要完成的任务" autofocus v-model="flag" @keyup.enter="hAdd"/>

2021-07-13 20:49:32 116

原创 2021-07-09 的记录

// 删除的模板 async hDel (id) { this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(() => { // removeRandoms 接口 removeRandoms({

2021-07-09 21:16:51 143

原创 Vue中的 ref 和 $refs

ref 有三种用法：1、ref 加在普通的元素上，用this.￥refs.（ref值）获取到的是dom元素2、 ref 加在子组件上，用this.￥refs.(ref值) 获取到的就是组件实例，可以用组件的所有方法。在使用方法的时候直接用 this.￥refs.(ref值).方法() 就能直接用了3、如何利用 v-for 和 ref 获取一组数组或者dom 节点注意点：如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;这点和其他属性一样，如果是固定

2021-07-04 23:44:33 2183 2

原创 Vue 的v-if与v-show

在Vue的内部指令中，v-show与v-if的区别，总结如下：在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。v-if根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了

2021-07-04 23:44:17 12683

原创递归的用法

递：递进，把同性质的大问题，拆成小问题，拆成更小的问题，把小问题解决之后，大问题也就解决了归：拿到最小的问题的答案，向上去解决大问题函数中自己调用自己就是递归，切记要有终止条件，不然进入死循环1.求数字的和 function sum(n){ if(n===1){ return n=1 } return n+sum(n-1) } console.log(sum(5));打印5+sum(n-1)5+4+sum(n-1.

2021-07-04 23:43:49 170

原创 Vue组件之间传参

组件传参父组件向子组件传值子组件向父组件传值父组件向子组件传值1. 创建子组件，创建一个子组件 ‘ zi.vue’2. 在子组件中创建基本的模本<template> <div> <h2> 子组件 </h2> <p> {{ message }}</p></div><template><script>export default { props : ["message"]

2021-07-04 21:13:23 191

原创常见的 git 指令

目标练习本地操作配置用户信息git config初始化本地仓库git init添加文件到暂存区git add .提交暂存区代码到本地仓库git commit -m ‘说明’撤销add操作git rm 文件名撤销并删除add的文件git rm -f 文件名撤销暂存区内容的修改git checkout .撤销本地仓库的提交版本git reste -hard id的前七位查看本地仓库的文件状态git status查看本地仓库的提交

2021-07-04 20:16:18 76

原创什么是ES6模块化？

获取表单中的数据 slot-scope = ‘scpope ’ 定义作用域插槽使用： scope.row.xx=‘xx’ scope.row 固定写法< el-dialog :visible.sync=’ xx’ > 组件弹框清空表单：@coles = ‘xx’ 给表单注册个coles 事件弹窗被关闭时就会调用...

2021-07-04 20:12:23 1631 1

原创函数防抖和函数节流

函数防抖与节流是很相似的概念，但它们的应用场景不太一样先说概念：防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数...

2021-06-23 22:59:33 110

原创什么是事件冒泡机制?

什么是事件冒泡？冒泡的机制：这气泡就相当于我们的事件，鱼就是事件源，而水则相当于我们的整个dom树；事件从dom 树的底层层层往上传递，直至传递到dom的根节点。栗子 :样式布局代码结构js代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont

2021-06-23 18:35:06 2939 1

原创什么是闭包（Closure）呢？

什么是闭包？直接上代码<script> !function shy(){ // 一个函数 let a = 10 //一个变量 function b (){ // 一个函数 console.log(a); //一个函数的内部访问另一个函数的变量 } }() </script>上面这样的就是一个闭包了超简单的我的定义：函数和函数内部能访问到的变量（也叫环境）的总和，就是一个闭

2021-06-21 23:04:27 318 1

原创常用的终端指令

Mkdir 创建一个文件夹toche 创建一个文件Cat 输出内容clear 清空屏幕的内容ls 显示当前目录下的文件内容cd - 回到上一个目录cd ~ 回到用户目录(刚打开终端时的目录)rm 1.txt 删除名字为1.txt的文件mv 1.txt 123.txt 移动+改名，将当前目录的1.txt 移动到当前目录，并改名为123.txtcp 1.txt 2.txt 将当前目录下的1.txt拷贝一份，并放到当前目录下，并命名为2.txtvi （vim）vi

2021-06-19 22:59:49 499 1

原创 reduce的理解

--------------------------------- Reduce() 函数 -------------------------------------------** 1. 定义：** 对数组中每个元素执行一个(次)累加器，把结果汇总成单个的返回值2. 形式： arr.reduce(( total, value，inedx , arr )=>{ } , init)，** 3. 参数**— callback() ；回调函数（必写）— init ; 初始值 .

2021-06-19 22:34:44 438 1

空空如也

空空如也