指尖愤怒-CSDN博客

原创秒懂干货！如何用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

原创手敲版干货！三分钟学会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

原创一分钟秒懂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>&lt

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

hj0556的博客