- 博客(18)
- 收藏
- 关注
RSS订阅原创 使用canvas绘制柱形图
canvas是HTML5新增的，一个可以使用JavaScript在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 let canvas = document.querySelector('canvas') ctx = canvas.getContext('2d') ctx.font = '16px 微软雅黑' ctx.fillText('canvas绘制柱形图', 50, 50) ...
2022-05-21 23:55:20
1330
原创 数组的几种去重方法
1.双循环+splice let arr = [1, 2, 4, 2, 4, 2, 4, 55, 52, 1] for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1) j-- } } }2.单循环+indeOf
2022-05-21 18:25:45
280
原创 vue数组双向绑定问题及$set用法
在vue开发中，我们有时会遇到数据更新视图不更新问题，地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。以下这几种情况,Vue都会检测不到数据的变化当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除数组实现响应式的七个方法push() 可向数组的末尾添加.
2022-05-16 16:45:15
2217
6
原创 elementUi手动上传图片
在进行开发时候，使用elementUi框架upload上传图片时候，每次选取图片都会发送请求到服务器，我们想等点击确定按钮后，再进行上传到服务器，这时候我们就需要手动来上传图片。<template> <div> <el-upload ref="upload" class="upload-demo" action="#" :http-request="httpRequest" :before-.
2022-05-12 22:51:14
5302
原创 防抖与节流
在实际开发中，我们有时候不希望用户的持续操作过程中，会频繁触发接口的调用。而为了限制这种短时间内高频触发函数调用情况发生，我们可以借助防抖和节流。防抖（debounce）在一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。特点：等待某种操作停止后，加以间隔进行操作。 持续触发不执行 不触发的一段时间之后再执行 n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效 document.querySelector("#but").onclick = fun..
2022-05-02 23:17:11
192
1
原创 BFC详解与使用
什么是BFCW3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks,tablecells,和table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（BlockFromattingContext，即块级格式上下文）。简单来说：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。触发条件根元素() 浮动元素（元素的float不是no...
2022-04-26 00:41:58
444
原创 reduce()方法的使用
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。reduce(callback,initiaValue)会传入两个变量，回调函数(callback)和初始值(initiaValue)。reduce方法会遍历数组，使用回调函数遍历处理数组中的每一项，回调函数每次会返回一个处理后的值，作为下一次回调的第一个参数。callback （累加器中包含四个参数） 1、previousValue （上一次调用回调返.
2022-04-25 23:55:56
698
原创 vue全局事件总线
全局事件总线是一种组件间能够互相进行通信的方式。安装全局事件总线首先要在main,js在创建Vue实例对象中beforeCreate钩子里面进行配置，之所以在这个钩子里配置是因为beforeCreate时还未对数据监测、数据代理等进行挂载。我们通过Vue.prototype.$bus=this，将Vue的原型对象的属性$bus指向当前的Vue实例对象，从而实现Vue实例对象和VueComponent实例对象都可以访问到Vue原型对象上的$on,$emit,$off,方法了。...
2022-04-23 00:13:44
1599
1
原创 vue父子组件通信
一、父传子在父组件中，用 v-bind动态绑定一个自定义属性，用于给子组件传递数据父组件：<template> <div> <child :users="user"></child> </div></template> <script>import { child } from "./child";export default { components: { child },.
2022-04-22 00:19:34
18827
原创 vue全局前置路由守卫、全局后置路由守卫及独享路由守卫
全局前置路由守卫在路由跳转之前，我们可以对路由进行权限限制，它会传递一个回调函数，里面有三个参数 // to: 目标路由 // from: 当前路由 // next() 跳转 router.beforeEach((to, from, next) => { if (to.meta.isAuth) { if (localStorage.getItem('name') == 'zz') { next() } else {
2022-04-18 23:02:23
1852
原创 路由元信息
有时我们想将一些信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置meta字段const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, ...
2022-04-18 22:28:12
653
原创 vue router连续点击多次路由报错
在编程式导航跳转时候，连续点击多次会报NavigationDuplicated错误 this.$router.push({name: "search"});出现这种错误原因是因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。这时如果我们加入成功和失败的回调，就不会报错： this.$router.push( { name: "search" }, //成功回调 () =&g
2022-04-17 15:28:18
2075
原创 vue路由传参方式的几种方式与获取参数详解
一、声明式传参1.params传参(显示参数)在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数：//路由参数配置const router = new VueRouter({ routes: [{ path: '/about/:id', component: User }]})//声明式导航使用<router-link to="/about/12">跳转</router-link>
2022-04-17 02:56:47
29917
1
原创 vue声明式导航和编程式导航
声明式导航:声明式导航是写在template标签里，通过<router-link></router-link>标签来触发: <router-link to="/about">跳转</router-link>编程式导航：编程式导航是在js代码进行跳转的操作。使用this.$router.push(xxx)来触发跳转：this.$router.push('path')//传递参数this.$router.push({ pa
2022-04-17 01:24:33
1027
原创 vue 命名路由
当路由跳转路径path很长时，我们可以通过一个名称来标识一个路由，这样就可以简化很多，这就是命名路由。const router = new VueRouter({ routes: [{ name: 'user1', path: '/about', component: User }})<router-link>跳转命名路由 <router-link to="/about">跳转</router-link>上面是路由跳转
2022-04-17 00:05:50
1134
原创 vue路由中$router和$route的区别
$router:从上面可以看出$router是全局 router 的实例，通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而使整个应用都有路由功能。包含了一些路由的跳转方法，钩子函数，属性和对象（比如 history 对象）等，任何页面也都可以调用其 push(), replace(), go() 等方法。通过$router.push()方法可以向history栈中添加一个路由，从而实现切换路由。通过$router.replace()方法可以替换路由，没有历史记录。
2022-04-16 23:39:53
1006
原创 Element UI 单选框校验失败问题
在使用elemenUIt表单验证时候，在验证单选框radio时候一直显示红色错误提示，明明已经选中了但还是验证失败后来发现form-item的prop属性要和v-model绑定的属性一致，否则验证就获取不到值...
2022-04-10 19:22:58
2044
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人