- 博客(48)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue 新开页面
众所周知Vue是一个单页应用，默认情况下说有的路由地址都会在同一个页面中打开，但是在一些实际情况中需要新开页面；可以使用以下方法进行解决：const routeLink = this.$router.resolve({ path: '/index' }) window.open(routeLink.href, '_blank')...
2021-04-15 15:02:09
1069
原创 解决element-ui中多个table在tab切换时出现高度缩小问题
在使用element-ui中的tabs组件进行切换时，出现tabs中的table高度变小，如下图：第一次加载时切换到第二个tab table高度变小切换回第一个tab每次进行切换的时候会使table的高度变小,原因未知；但是存在如下解决方案// tabs被点击 tabClick ({ name }) { this.$nextTick(() => { // 页面加载完成后，重新渲染表格 // forname 为table的ref
2021-03-05 15:32:29
3095
1
原创 原生方式实现vue数据的双向绑定
1.创建组件// html // 1.创建组件内容 <template id='userCardTemplate'> <style type="text/css"> .container{ background: #eee; border-radius: 10px; width: 500px; padding: 20px } </style> <div class="container">
2021-03-01 18:03:49
381
原创 原生js实现excel下载
<!DOCTYPE html><html lang="en"><head> <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p> <button onclick='tableToExcel()'>导出</button></head><body> <script> .
2021-02-05 14:08:05
615
1
原创 js 数组、对象的深拷贝
1.为什么有深拷贝在js中数据被分为了基础类型和引用类型；基础类型：String、Boolean、Number,Undefined、Null；引用类型：对象、数组、函数；基本类型和引用类型由于两者在内存中存储的方式不同，造成两者访问的方式也不同。其中，基本类型存储在内存的栈中，是按值访问；引用类型存储在内存的堆中，是按引用访问例:let num1 = 10;let num2 = 20;let arr1 = [1,2,3,4,5];let arr2 = arr1;由于arr1与arr2
2021-01-06 16:08:05
443
原创 在数组中发现最大值和最小值
使用扩展运算符let arr = [12,4,2,15,1,90,35];let max = Math.max(...arr);let min = Math.min(...arr);console.log(max,'max',min,"min") // 90 "max" 1 "min"
2021-01-06 14:21:45
165
原创 React与Vue的区别
1.模板 vs JSXVue的模板近似常规的HTML,只是多了一些属性。React使用的JSX语法的模板 ，JSX值是javeScript混合这XML语法。Vue的模板语法去除了往视图/组件中添加逻辑的诱惑，保持了关注点分离。Vue在技术上也支持render函数和JSX,但只是不是默认而已。2.状态管理 VS 对象属性应用中的状态是React关键的概念，也有一些配套框架设计为管理一个大的state对象，如Redux。此外，state对象在React应用中是不可变的，意味着它不能被直接改变（不一定正
2020-09-10 09:31:53
240
原创 Vue3.0 composition-api的使用
ref接受一个参数值并返回一个响应式且可改变的ref对象 1. ref对象拥有一个指向内部值的单一属性 .value 2. 当ref在模板中使用的时候，他会自动解套，无需在模板内额外书写 .value const count = ref(0) const countAdd = ()=>{ count.value ++ }reactive接收一个普通对象然后返回该普通队形的响应式代理，等同于2.x的Vue.observable()1. 响应式转换是“深层的”：会影响
2020-09-09 09:29:05
1184
原创 Vue3.0 路由的配置
创建项目vue create demo升级3.0注意区分： VueCLI3.0和Vue3.0由于 vue-cli 没有直接支持创建 Vue3.0 项目，所以需要通过插件升级，我们输入指令：vue add vue-next升级后的版本 "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0-beta.1", "vue-class-component": "^8.0.0-0", "vue-router": "
2020-09-08 10:45:42
5692
原创 使用vue-cli3创建项目的时候出错，ERROR command failed: npm install --loglevel error
使用 vue create demo 创建项目的时候出现如下报错：错误提示：ERROR command failed: npm install --loglevel error一、出现这个错误，首先需要排除，node，npm的版本问题。二、然后尝试清除npm缓存：npm cache clean --force三、关键方法：使用这个方法解决，GitHub上大拿们给的方法：I am using “vue-cli 3.0.0-rc.1”, I solve the problems by set
2020-09-07 11:07:49
1876
原创 vue 3.0 组件之间的方法的相互调用
1.父组件调用子组件的方法给子组件添加 ref 属性通过 this.$refs.属性名.子组件的函数名 即可触发子组件的函数2.子组件调用父组件的方法 子组件通过 ==this.$emit(函数名,参数)== 触发父组件的方法。3.兄弟组件方法的相互调用子组件1中父组件的方法(this.$emit(函数名,参数));通过父组件去触发子组件2的方法（参考：父组件调用子组件的方法）示例代码如下// 父组件<template> <div> <t
2020-08-13 17:50:26
8340
11
原创 报错问题解决 Error in nextTick: " RangeError: Maximum call stack size exceeded "
报错信息如下报错结果显示超过最大调用堆栈大小（并不清楚）查询一些信息后发现引入的组件名和当前文件的命名重复了，修改之后就好了
2020-06-30 15:01:14
595
原创 vue cli3.0 路由监听
import { Component, Vue,Watch } from 'vue-property-decorator';@Component({})export default class App extends Vue { private transitionName = ""; /* 查看路由状态并做出相应动画跳转 * */ @Watch('$route',{immediate:true}) private changeRouter(){ console
2020-06-16 14:56:16
1197
原创 Vue之vue-devtools安装分享
1. 文件信息vue-devtools压缩包分享在百度网盘中：链接：https://pan.baidu.com/s/1VZT5umWNlaOZv6WMR2H6aw提取码：fi3v2.安装过程安装的方法如下：先将压缩包解压，再打开谷歌浏览器—》点击设置—>扩展程序–》勾选开发者模式—》加载已解压的扩展程序—》选择“chrome扩展”文件夹！！！以上完成后在浏览器中看到如下标志说...
2020-05-06 16:33:59
824
原创 计算数组中每个元素出现的个数
1.方法一let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];let namesNum = names.reduce((pre,cur)=>{ if(cur in pre){ pre[cur] ++ ; }else { pre[cur] = 1; } return pre;},{});console.log(n...
2020-04-29 16:53:38
1808
原创 计算属性（conmputed）和侦听器（watch）
计算属性（computed）作用：减少模板中的计算逻辑进行数据缓存依赖固定的数据类型（响应式数据）使用：在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果通过getter/setter实现对属性数据的显示和监视侦听器（wathc）作用：比computed更加灵活watch中可以执行任何逻辑，比如：函数节流、Ajax异步数据获...
2020-04-22 22:42:39
446
原创 react-router 路由传参
react 路由传参的方式基础代码示例：// 1.安装react-router-dom // npm install react-router-dom --save// 子组件 Hotimport React,{Component} from "react"export default class Hot extends Component{ render(){ ...
2020-01-10 16:37:20
259
2
原创 react-redux 出现 Invalid hook call.Hooks can only be called inside of thebody of a function component
import ReactDOM from "react-dom"import store from "./store"import {Provider} from "react-redux"import Todo from "./components/Todo"const APP = ( <Provider store={store}> <Todo /> &...
2020-01-09 14:52:59
20364
6
原创 React-thunk 中间件
背景Redux store仅支持同步数据流。使用thunk等中间件可以帮助在Redux应用中实现异步性，可以将thunk看做store的dispatch()方法的封装器；我们可以使用thunkaction creator派遣函数或Promise，而不是返回action对象。注意，没有thunk的话，默认是同步派遣；示例：向后台发送请求不使用redux-thunk// store/acti...
2019-12-26 10:37:30
444
原创 react 接解决跨域
在开发过程中，本地开启了服务之后，在react中去调用这个接口出现了以下报错，这是由于react打开的端口号是3000而服务的端口号8888，因此产生了跨域问题；解决方案在package.json文件配置代理添加上述配置后跨域问题就解决了...
2019-12-25 16:53:30
361
原创 IOS软键盘撑起页面下不来的解决方案
近来微信更新后，相信前端开发工程师们会不会遇到一个问题：当页面有输入框，下拉框，等…只要会弹出软键盘时就会遇到一个问题，IOS中当使用完软件盘收起的时候页面还是被顶起的状态，不会下来，需要用户手动去将页面给拉下来，不然感觉会很奇怪，相信不少人以为自己的手机出啥毛病了？最后发现其实IOS大部分手机型号都是这样，最尴尬的是，被顶去的页面别看那个位置有个按钮，你点击后根本没反应，很尴尬，不说了，上代码...
2019-08-23 16:59:37
860
原创 console.log与alert的区别
例：var person = { toString:function(){ return "Greg" } }console.log(person);结果为：alert(person);结果为：分析：可以看到console.log()输出的是一个对象，这是因为console.log()可以输出各种类型的数据；alert()输出的是一个字符串，这是因为alert...
2019-08-01 10:48:01
233
原创 vue计算属性中使用箭头函数出错
计算属性compute作用：和普通属性一样在模板中使用计算属性，当data中对应的数值发生变化时，计算属性的值会发生相应的变化，计算属性compute是基于他们的依赖（如果是实例范畴之外的依赖，比如非响应式的notreactive是不会触发属性更新的）进行存储（计算属性的结果会被存储）。只有相关依赖发生改变时才会重新求值，未改变只会返回之前的结果，不在执行函数。示例代码html<di...
2018-12-21 16:07:39
1798
1
原创 localStorage,sessionStorage和cookie的区别
共同点都是保存在浏览器且都是同源的（url协议，端口，主机名是相同的）不同点cookie数据始终在同源的htttp请求中携带（即使不需要）即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存，cookie数据还有路径的概念，可以限制cookie只属于某个路径下；存储大小，cookie的存储大约为4k,而...
2018-12-18 15:39:18
126
原创 如何区分单页应用于多页应用
多页应用通过连接跳转页面，且在每个页面中均会请求html文件。单页应用（SPA）第一次进入页面的时候请求一个html文件，刷新清楚一下。切换到其他组件，此时路径也相应变化，但是没有新的html文件请求，页面的内容也变化了。原理：js会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是通过后端来做而是前端来做。判...
2018-12-18 15:28:50
807
原创 nodejs formidable模块 表单提交数据
1）let http = require("http")let formidable = require("formdable")let util = require("util");let uuidv1 = require('uuid/v1');let path = require("path");let fs = require("fs");2）创建服务器http.creat...
2018-12-08 00:01:16
613
1
原创 解决动态创建的属性无法点击事件
在写事件的时候发现通过动态创建的节点无法实现点击效果， 在jQuery中有“向未来的元素添加事件处理程序”方法说明，也正是动态创建元素无法触发事件的原因所在。正确的写法如下：$(‘父元素’).on(‘click’,’动态的子元素’,function(){});$('.b').on('click','.btn',function(){ alert("成功了")});...
2018-09-27 16:58:56
356
原创 获取地址栏中传入的参数
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) re...
2018-09-20 13:56:13
453
原创 h5页面中android与ios返回上一级并强制刷新的方式
/* 进行android与ios的判断*/ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!...
2018-09-10 14:41:51
2200
原创 移动端返回上一级页面时强制刷新
在移动端页面时，点击返回按键回到上一级，默认没有刷新。有时候业务需求需要对上一级页面进行刷新，以下为强制刷新的方法：/* 强制页面刷新*/window.addEventListener('pageshow', function(event) { //event.persisted属性为true时，表示当前文档是从往返缓存中获取 if(event.persisted) lo...
2018-09-07 23:46:46
2968
1
原创 js监听手机返回键，回到指定界面
$(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location = 返回的地址 }, false); function pushHistory() { var state = { ...
2018-09-03 14:15:20
10260
3
原创 H5处理移动端虚拟按键问题
在做移动端网页的时候，需要对底部虚拟按键进行适配，达到百分百的效果，以下是适配代码： function set_screen(wrap){ var s_height = document.body.clientHeight; var s_width = document.body.clientWidth; var proportion = s_height/s_wi...
2018-09-03 14:06:31
2522
1
原创 H5判断 移动端 是android还是ios
在移动端开发过程中有时需要根据android与ios进行不同的操作，以下是如何判断移动端是android还是ios /* 判断android与ios*/ $(function(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('And...
2018-08-30 19:56:00
7069
2
原创 less中部分语法详解
less中的语法详解，主要是介绍一些平时常用的语法。一、变量。 变量是识别符号是@，在less中以@开头的则是变量，关于变量名的命名方法，大家可以参考js中命名的规则，毕竟是做前端的，有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写，从第二个开始，单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……，当然也是...
2018-07-17 09:42:02
3033
原创 Vue事件机制
Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是 $on，$once，$off，$emit。初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：{ eventName: [func1, func2, func3]}存放事件名以及对应执行方法。/*初始化事件*/export functi...
2018-07-14 09:59:42
757
原创 jQuery动画
HTML<div> <div id="box"></div> <button id="btn">显示/隐藏</button></div>CSSdiv{ width: 300px; height: 300px;
2018-07-11 09:06:30
115
原创 JS中获取字符串中出现次数最多的字母,常用方法
（1）数组+对象 <script > var str = 'aafcbad'; var obj = {}; var arr = []; var letter; for(var i = 0,len = str.length;i<len;i++){ letter = str[i]; if(!...
2018-07-07 14:28:15
8202
2
转载 Vue父组件与子组件传递事件/调用事件
1、Vue父组件向子组件传递事件/调用事件<div id="app"> <hello list="list" ref="child"></hello> <br /> <button v-on:click="myclick">调用子组件中的方法</
2018-07-07 14:16:07
1822
原创 ES6-let、const和块级作用域
ES6与ES5有所不同，对变量的作用域进行了详细的划分，并且有了严格的使用范围；与ES5的不同：（1）作用范围发生变化 （2）无变量提升作用范围在ES6中变量的作用域分为：全局作用域，局部作用域，块级作用域 全局作用域：定义在函数体和{ }外，在全局范围内生效 局部作用域：定义在函数体内部，包括函数的参数，仅在函数体内部有效 块级作用域：定义在{ }内部，仅在{ }...
2018-07-06 17:04:00
218
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人