- 博客(68)
- 收藏
- 关注
RSS订阅原创 用原生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
244
原创 vue中的render函数
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
4131
原创 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
5780
原创 数组方法reduce
ES5新增数组方法reducereduce：对数组中的每个元素执行一个自定义的累计器，将其结果汇总返回这个方法接收两个参数：第一个参数：要执行的函数，执行的函数可以传入参数第二个参数：函数迭代的初始值没有设置函数的初始值迭代值let arr = [1,2,3,4,5]arr.reduce((prev,cur,index,arr)=>{ // prev 上次调用函数的返回值 // cur 当前元素 // index 当前元素索引 // arr 被遍
2022-05-05 15:16:37
176
原创 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
352
原创 封装函数实现instanceof功能、封装判断两个对象是否相等
封装instanceof函数表达式：A instanceof BB找到原型对象，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
636
原创 vue后台管理系统(记录)
后台管理系统中，根据不同的权限显示不同的导航栏菜单基本流程：首先获取数据--->动态拼接路由信息--->动态添加路由信息# router/index.jsimport store from '@/store'const routes = [ { path:'/', redirect:'/login' }, { path: '/login', name: 'Login', component: () => import('../vi
2022-03-01 19:53:59
685
原创 vue3.x中的 Vuex(状态管理工具)
前言Vue3在2月份已经变成默认版本了，接下来的vue3将会成为主流的框架。我们来看看vue3中的奇妙世界吧vuexVuex 是一个专为 Vue.js 的状态管理工具，可以解决组件之间数据共享的问题。注意：我们在项目中如果使用到vuex，最好通过dispatch触发actions的事件 ---> 在actions里通过commit触发mutation ---> 改变state的状态在vue3.x中如何使用vuexvue2.x和vue3.x最大的区别就是 vue3.x中使用的是
2022-03-01 19:36:14
1014
原创 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 + indexOflet newArr = []arr.forEach(item=>{
2022-02-28 14:23:38
437
原创 Vue2和Vue3的区别
1. 双向数据绑定原理vue2 是结合发布者订阅者模式，结合es6Object.defineProperty()对数据进行劫持，进一步通过vue中的watcher的update实现双向数据绑定。vue3 中使用了es6的proxy进行数据代理。相对于vue2，使用proxy的优势：defineProperty只能监听某个属性，不能对全对象监听；可以监听到数组内部的变化；vue2中我们给对象添加一个新属性，它不会更新到视图上，只是因为新添加的属性并没有通过Object.defineProper
2022-02-21 17:46:33
4371
原创 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
698
原创 Vue中Mixin&extends的使用
官方定义MixinMixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。项目中如何使用Mixin在src文件夹下创建一个mixins文件夹在demomixins.js文件下export default { data() { return { msg:'mixins 中的data'
2022-02-18 20:27:46
693
1
原创 关于vue给对象新增属性页面不会动态更新的问题
问题不知道大家有没有遇到过这个问题，当我们给data里面声明的对象添加一个新属性，这个新属性是不会动态更新视图的。看一个例子<template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data(){
2022-02-17 21:26:27
3034
原创 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
350
原创 vue后台管理系统打包上线到node
项目准备1. 配置 alias 别名使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。//加载path模块const path = require('path')//定义resolve方法，把相对路径转换成绝对路径const resolve = dir => path.join(__dirname, dir)module.exports = { chainWebpack: config =>
2022-02-17 15:37:44
1127
原创 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
860
原创 vue使用keep-alive缓存页面
概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中作为标签使用。作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性缓存组件一、缓存所有页面直接包裹根router-view即可<template> <div id="app"> &
2022-02-16 15:15:11
1861
原创 MVVM和MVC理解
什么是MVC和MVVMMVC、MVVM是两种常见的前端架构模式，这种架构模式是抽象分离出来的为了解决某一类问题的方法。MVC和MVVM中的特点：相同点：其中M指的是model(数据)，V指的是view(视图)不同点：这两种架构中，不同的只是MV之间的纽带部分。MVC分为M(model模型) V(view视图) C(controller控制器)。在MVC中用户进行视图操作之后交给控制器处理，在控制器中响应视图的事件调用model的接口对数据进行操作，只要model发生变化，就给对应的视图进行更
2022-02-11 20:15:06
1118
原创 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
627
原创 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
708
原创 浅谈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
464
原创 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
370
原创 vue自定义过滤器
vue自定义过滤器过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。vue中的过滤器分为两种：全局过滤器和局部过滤器全局过滤器Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器<script> export default { data() {
2022-02-04 09:57:29
1184
原创 Vue3 + TS(二)
Vue3vue3的新特性首先是向下兼容，Vue3 支持大多数 Vue2 的特性。性能的提升，内存减少55%、打包大小减少41%、渲染快、使用Proxy实现数据响应式，重构虚拟dom新推出的Composition API(组合 api)，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。说白了就是封装不好，重用不畅。其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。更好TypeScript支持。
2022-02-04 09:55:30
2437
1
原创 vue组件化开发
vue组件化开发在vue中开发，都是用的组件化的思想开发的，一般在都会在搭建项目的时候，都会先建立组件的模板，把架子搭起来。也就是在组件中定义好<template>视图层，<script>逻辑层，<style>css样式层。一般在项目src中创建一个components文件夹存放我们自定义的组件，在需要的页面中导入并注册后，通过标签的形式使用。1.第一步：在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件)import m
2022-02-04 00:04:01
1127
原创 Vue3 + TS (一)
TypeScriptTypeScript是一种由微软开发的开源、跨平台的编程语言。它是js的超集，最终会被编译为js代码。安装命令：npm install -g typescript检查版本：tsc -V手动编译代码新建一个first.tsvar str:string = 'uu盘'console.log(str)将first.ts引入index.html文件中：<script src="./first.ts"></script>浏览器会报错：我们将
2022-02-03 13:49:16
3659
原创 vue的双向数据绑定原理
vue的双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。...
2022-01-31 23:33:08
654
3
原创 vue push方法重写解决路由错误问题
const routerPush = Router.prototype.pushRouter.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
726
原创 vue自定义指令
vue自定义指令vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM
2022-01-29 22:28:13
684
原创 用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
544
原创 vue的生命周期
vue的生命周期vue实例从创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。beforeCreate:创建前实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。data() { return { num:1 }}beforeCreate(){ con
2022-01-28 22:51:13
673
原创 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
591
原创 vue中的slot(插槽)
插槽slot插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。插槽的分类：默认插槽，具名插槽，作用域插槽1. 默认插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据子组件：<div> <slot></slot></div>父组件：<heads>你好</heads>
2022-01-27 11:06:54
768
原创 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
222
原创 for....in 和 for....of的区别
for in 和 for offor 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
330
原创 null 和 undefined区别
在javaScript中，将一个变量赋值为null和undefined，老实说几乎没区别let a = nulllet b = undefinedconsole.log(a == b); // true相同点：在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等let a = nulllet b = undefinedconsole.log(Boolean(a)); // falseconsole.log(Boolean(b));
2022-01-24 17:00:48
308
原创 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
1339
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人