- 博客(25)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 秒懂干货!如何用Vue组件递归形成链式层级~
当有一组数据,有层层嵌套的关系(item.child),如何渲染在页面上呢list: [{ label: "AAA",children: [{label: "AAA-1",children: []},{label: "AAA-2",children: [{label: "AAA-2-1",children: []},{label: "AAA-2-2",children: []}, { label: "AAA-2-3", children: []}]}, {
2020-06-12 22:41:37
899
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 手敲版干货!三分钟学会vue中v-model绑定表单事件(单选、多选、下拉选)~
1.关于v-modelv-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。2.v-model 在不同的元素使用不同的 property 并抛出不同的事件text 和
2020-06-05 23:40:20
1078
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 一分钟秒懂JS节流和防抖函数
一分钟秒懂JS节流和防抖函数防抖与节流1.1 防抖防抖: 触发事件后,在n秒内函数只执行一次记忆: 你手比较抖,不小心按了按钮2下…你只希望它只执行一次.且按第二次结束时间算…这就用到了防抖技术1.2 节流节流: 连续发生的事件,在n秒内只执行一次函数1.3 防抖与节流的区别在一段时间内,不管触发多少次事件,事件处理函数都只处理一次称之为节流防抖,是在最后一次事件发生时开始计算,到固定时间触发函数节流一段时间,只能触发一次,再触发就忽略掉,如一分钟之内多次指纹打卡。注* +new
2020-06-03 18:44:17
294
原创 Vue中渲染css方法
Vue中渲染css方法用于打印插件无法识别行内css和vue单页css可在组件的create生命周期内加载csslet style = document.createElement('style')style.id='aaa'style.type='text/css'style.innerHtml=`.platforms-table { border-collapse: collapse; width: 100%; zoom: 1; border-bottom: none;}
2021-07-05 14:40:58
639
原创 keep-alive处理缓存机制
keep-alive用于保存组件的渲染状态(include、exclude)include表示只有Name的属性会被缓存,其他不会exclude表示Name的属性不会保存缓存。普通路由 <keep-alive exclude="B"> <router-view></router-view> </keep-alive>动态组件<keep-alive :include="whiteList" :exclude="blac
2021-07-05 11:26:26
197
原创 傻傻分不清?module.exports/exports/export/export default的区别
CommonJS的核心思想是通过require方法来同步加载依赖的其他模块,通过module.exports到处需要暴露的接口。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。1、module.exports// utils.jslet appid = '123456'let bar = function (id) { return `编号:${id}` }// 通过module.exports将appid与bar暴露出去m
2020-09-09 11:10:25
145
原创 require.ensure()异步加载的妙用~懒加载
概念require.ensure()相信大家都见过。有人称它为异步加载,也有人说做代码切割,其实说白了,它就是把js模块给独立导出一个.js文件的,然后使用这个模块的时候,webpack会构造script dom元素,由浏览器发起异步请求这个js文件场景分析比如应用的首页里面有个按钮,点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的,假设为1m,于是就造成了我们首页打包的js非常大,用户打开首页的时间
2020-09-08 15:31:06
1549
原创 VUE的必学知识点:利用JS导入EXCEL
当有导入EXCEL文件的需求时,展示EXCEL的内容在页面上需基于js-xlsx的包第一步 npm i xlsx第二步 import XLSX from ‘xlsx’第三步 页面(用iview框架中的上传) <Upload action="/" :before-upload="handleUpload"> <Icon type="ios-cloud-upload-outline" size="30" /> <p>导
2020-09-08 14:59:47
248
原创 秒懂Render的三个参数
Render函数是什么简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOMrender:(r=>{return createElement('h1', 'Hello World!')})render方法会传入一个createElement函数,它是一个用于创建DOM元素或者用于实例化其他组件的构造方法export default { render: function(createElement) { const
2020-09-04 21:53:35
6328
1
原创 this.$set的正确打开方式~
我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div></template><
2020-09-02 16:01:59
225
原创 render函数的Button进行动态绑定(loading)
点击登记证明,登记证明button会进入loading状态,:data=data 中data每个对象中都有isLoading属性 只有loading绑定为数组中的index才能当前登记证明会,要不然点击会全部loadIng h('Button', { props: { type: 'success', size: 'small',
2020-09-02 10:48:34
1507
原创 获取地址栏带的参数配权限
前端经常会用地址栏的参数进行权限配置(账号人,权限true/false)步骤一 获取地址栏参数方法 getQueryString(name) { // 获取参数query var url = window.location.search; // 正则筛选地址栏 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 匹配目标参数(去
2020-09-02 10:13:36
110
原创 秒懂JS配合后端下载文件
常见的JS下载文件的方法方法一 a标签<a href="../../static/xxx.xlsx" download="xxx.xlsx">下载</a>当不加download属性时,如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式,那么不会下载,而是浏览器直接打开并显示;加download属性之后,就会下载,并且下载文件默认命名为你download属性的值或var link = document.createElement('a');link.
2020-09-02 10:02:37
565
原创 webpack常用指令大解析~
1.新建文件打开demo的终端=> mkdir src (在demo文件夹下新建src文件)2.初始化环境,生成package.json文件demo终端下=> npm init -y3.下载webpack(局部)=> cnpm/npm i webpack webpack-cli --save4.webpack普通打包=> 普通打包 npx webpack ./src/index.js -o ./dist/bundle.js=> 开发环境
2020-06-22 11:39:12
289
原创 秒懂Vue!一分钟get Vuex仓库的map辅助函数诀窍~
使用map函数在脚手架页面中需要引入,而普通浏览器js仅需引入vuex即可import {mapState,mapGetters} from 'vuex'1.mapState和mapGetters写在引入页面computed里Vue.component('bbb', {computed: {...Vuex.mapGetters(['totalPrice']),...Vuex.mapState(['count', 'nickname', 'gender'])},template: `<
2020-06-17 15:24:38
223
原创 前端百货~Vue传参的几种方式,快来get~
方法一:常规?和&链接传递参数 <router-link to='/a?id=1&age=18'>AA</router-link>跳转后获取参数,通过this.$route.query来获取,得到一个对象。也可以用计算属性拿到,页面直接用↓↓↓computed: { id(){return this.$route.query.id}, age(){return this.$route.query.age}},方法二:vue推荐传参
2020-06-17 09:36:46
181
原创 秒懂干货!Vue的props大解析~
单向数据流每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。但是子组件内部不能改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。Prop验证我们可以为组件的 prop 指定验证要求,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA:
2020-06-12 23:37:26
711
原创 JS基础之干货!交换两个变量的值,最简单的几种方法!
二级标题方法一 中介法注意只能用var,let不可重复定义方法二 加减法方法三 ES6 解构最方便的方法非它莫属~
2020-06-07 23:34:01
252
1
原创 冷门实用干货!Vue中数组数据的更新只有这几个,学费了吗~
数组即刻变更方法Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:push()pop()shift()unshift()splice()sort()reverse()注意事项由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。如项目KTV点歌单,点击向上或向下时,vue不能检测更新并渲染识图!!解决方法Vue.set( target, propertyName/index, value )
2020-06-07 23:15:42
133
原创 干货!Vue路由传参的3种方法~
项目中很多情况下都需要进行路由之间的传值,想过很多种方式。sessionstorage/localstorage/cookie 进行离线缓存存储也可以,用vuex也可以,不过有些大材小用吧,不管怎么说因场景而异。有以下场景,点击跳转<div class="examine" @click="insurance(id)">查看详情</div>第一种页面刷新数据不会丢失methods:{ insurance(id) { //直接调用$router.push
2020-06-07 22:48:29
644
原创 Vue干货!一分钟学会Vuex仓库里的神奇参数~
v-modelv-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected ,attribute 的初始值而总是将 Vue 实例的数据作为数据来源,可以通过组件的 data 选项中声明初始值。v-model 在不同元素使用不同的 property 并抛出不同的事件text 和 textarea 元素使用 value property 和 input 事件;checkbo
2020-06-05 20:43:48
303
原创 1分钟学会 JS阻止冒泡和取消默认事件
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。防止冒泡和捕获w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = truestopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”cli
2020-06-04 14:37:08
212
原创 内含代码-设置div跟随鼠标移动case!
步骤如下1.设置div样式(宽高、绝对定位、背景颜色)2.设置div跟随鼠标移动代码!设置移动鼠标后,div的范围不得超过浏览器窗口↓
2020-06-04 11:59:49
181
1
原创 阻止浏览器默认事件触发e.preventDefault()
浏览器中会有很多默认事件,如选中字拖走复制、点击右键弹出菜单等在项目里不需要触发此类事件,往往会造成事件bug只要添加e.preventDefault()即可阻止默认事件!!阻止拖动鼠标的默认事件(如阻止拖动字并复制)↓阻止点击右键显示菜单↓...
2020-06-04 10:05:36
995
原创 秒懂鼠标事件clientX、offsetX、screenX、pageX、x的区别!
onclick鼠标点击事件onmousedown鼠标按下事件onmouseup鼠标松开事件onmousemove鼠标移动事件onmouseover鼠标经过事件onmouseout鼠标划出事件由鼠标事件(MouseEvent)可以发现:其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。划重点!!一、clientX、clientY点击位置距离当前body可视区域的x,y坐标二、pageX、pageY对于整..
2020-06-04 09:04:06
2335
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人