a5252145的博客

转载 WebSocket

WebSocket

原创 vue 自定义双向绑定

vue 自定义双向绑定背景：父子组件props通信是单向的，如何双向通信呢。<!-- children.vue --><template> <a-input:value="val" @input="(e)=>{this.$emit('change',e.target.value)}"/></template><script>export default { props:{ // 须定义和model相同的props名称

原创 解决mac下每次git pull/push都需要输入密码的问题

解决mac下每次git pull/push都需要输入密码的问题文章转载于： talent_ray的简书博客首先本身项目是走ssh克隆下来的，之前也配置过密钥。按理来说不应该出现这样的问题，在日常开发过程中突然需要我输入密码？(小朋友你是否有很多问号)。在经过多方面资料查找与解决方案尝试后终于找到了原因，背后的黑手是系统升级了…在升级为macOS catlina后 ssh的代理就被自动清除了，所以重新添加一下就好了首先执行 ssh-add -L，若跟我一样的话控制台应该会显示如下；$ ssh-

原创 nightwatchjs心得整理

nightwatchjs笔记：test case中禁止跑特定的case ， 在function之前加上 ‘’ 即可。跑完测试集自动打开浏览器： 需要在nightwatch/globals/html-reporter/new HtmlReporter属性openBrowser:trueperform 可在callback中执行nightwatch所提供的指令。4. perform 可在callback中执行nightwatch所提供的指令。...

原创 macOS Big Sur安装nvm

macOS Big Sur安装nvm2020新版的M1芯片mac，node15.5已经支持，查看M1芯片支持度可以在此处查询：m1支持度nvm GitHub点击此处macOS10.15以上版本需要创建.zshrc文件touch ~/.zshrccurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash如果提示curl: (7) Failed to connect to raw.github

转载 JavaScript 小技巧2

JavaScript 小技巧1. Replacestring.Replace() 函数只会替换第一个项目。你可以在这个正则表达式的末尾添加 /g 来替换所有内容。var example = "potato potato";console.log(example.replace(/pot/, "tom"));// "tomato potato"console.log(example.replace(/pot/g, "tom"));// "tomato tomato"2. 提取唯一值我们可

原创 js排序复杂度

原创 JavaScript中遍历数组小问题

JavaScript中遍历数组小问题1. break、return对遍历的影响const arr = [1, 2, 3, 4, 5, 6];for - breakfor (let i = 0; i < arr.length; i++) { if (arr[i] === 3) { console.log(i); break; } console.log(arr[i]);}输出：for - returnfor (let i = 0

原创 Js获取url参数

Js获取url参数1. 如果参数为字符串：URL:http://localhost:8088/#/orderDetail?workOrderId=001&type=0&status=processing&event=yesgetQueryVariable(name) { let reg = new RegExp("(^|&)?" + name + "=([^&]*)(&|$)", "i"); let r = window.location

转载 JavaScript小技巧

1. 箭头函数简写function sayHello(name) { console.log('Hello', name);}简写为=>sayHello = name => console.log('Hello', name);同理function sayHello(name, age) { console.log('Hello', name, 'age', age);}sayHello('taohang', 24); // hello taohang, age

原创 组内第一次分享遗留问题解决

问题for…in 和 for…of 迭代时的问题。every()和some()方法为什么需要return? 原理是什么？bable语法糖？解决for…in 和 for…of 遍历时的问题。问题复现：let obj = { a: 1, b: 2, c: 3};let arr = [1, 2, 3, 4, 5];现有一个对象和一个数组，分别使用for..in对arr和obj进行遍历，使用for..of对arr进行遍历，让arr中每一项和obj中每一项的val

转载 Vue3.0变化

Vue3.0尤雨溪在VueConf 2019上海演讲视频周边项目和3.0现状

转载 未知的Vue知识整理

未知的Vue知识整理Vue.js最佳实践

原创 less和less-loader版本

严格控制版本号npm install [email protected] [email protected] --save-dev

原创 Eslint配置

Eslint配置eslint要是配置不好，代码在IDE中提示真的很恶心，但是配置项又太多，还有很多专有的扩展，这里给出我的一个配置module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/strongly-recommended"], rules: { "no-console": process.env.NODE_ENV === "production" ? "error"

原创 vue渲染模板时怎么保留模板中的HTML注释呢？

设置comments属性，官网默认为舍弃注释<template comments> ...</template>官方文档

原创 Vue重置data

Object.assign(this.$data, this.$options.data());使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data可以获取到组件初始化状态下的data。

原创 vscode Typescript Test 热编译

文件夹目录下DOS运行tsc --init，生成tsconfig.jsontsconfig.json下outDir属性：新建test.ts,终端->运行生成任务->选择tsconfig.json，即可实时编译。新建index.html，引入编译后的文件<script src="./js/test.js"></script>即可。...

原创 clip-path

clip-pathCSS clip-path 生成器上面6个点，需要配置6个属性，每个属性都代表当前点的坐标clip-path: polygon(5% 0, 100% 0, 100% 90%, 95% 100%, 0 100%, 0 10%);注意：clip-path默认会把border也去掉，若想保留border，需要在当前div加一个父元素，父元素css保持和当前div一致，父元素width和height比当前大2px即可。...

原创 StencilJS

1. 前提stenciljs采用JSX和TypeScript语法。需要了解JSX2. 初始化项目// 1git clone https://github.com/ionic-team/stencil-component-starter.git my-componentcd my-componentgit remote rm origin// 2npm install // 此处报错：需要运行： npm set registry https://registry.npmjs.org/

原创 mac上Node 版本升级

sudo npm install -g n固定版本：sudo n 12.18.3； 最新版本：n lastest； 稳定版本：n stable

原创 npm install时报错：“Unexpected token ＜ in JSON at position 0 while parsing near ‘＜!DOCTYPE html＞”

git clone之后，npm i时报下面错误：解决办法：npm set registry https://registry.npmjs.org/.原因：此错误意味着中间有一个代理，它拒绝您访问Internet，需要设置注册表。论坛查阅：stackoverflow

原创 Javascript遍历数组的方法

1. ES55种迭代方法ES5中 for...in遍历以及 every()和for...in对终止语句break、continue的处理2. ES6for...of遍历keys()：对键名(数组下标)的遍历values()：对键值的遍历entries()：对键值对的遍历find()：返回数组中满足提供的测试函数的第一个元素的值findIndex()：返回数组中满足提供的测试函数的第一个元素的索引 若没有找到对应元素则返回-13. 遍历数组时对空格的处理

原创 vue引用iconfont两种方式

vue引用iconfont两种方式引入本地文件。a. 把iconfont项目下载到本地。b. 解压出来，放在项目中static（静态文件夹）下。c. 在main.js中引入iconfont:import '../scripts/iconfont/iconfont.css';d: 在页面中使用：<i class="iconfont iconicon_jinru"></i>,这里使用Font class格式引入在线文件a. 查看项目在线链接。b. 在global.

原创 Js 控制台展开之前与展开之后数据不一致问题

控制台展开之前与展开之后数据不一致问题解决：打印时克隆一份即可。// underscore: https://underscorejs.net/ 我这里使用的是underscore插件import u from 'underscore';console.log(u.clone(rack_t));

原创 vue filters - Debug

vue filters - Debug需求： iview table组件中某一列需要根据需求过滤。<Table border="" stripe="" max-height="600" ref="current-table" :data="tableData" :columns="tableColumns" :loading="tableLoading" @on-selection-change="handleSelect"> <!-- 部署状态 -->

原创 JS遍历数组并导出伪数组后 - 排序（正序）

JS遍历数组并导出伪数组后 - 排序（正序）优雅的语法：Array.from(arr,item => {return item.id}).sort()let arr = [ { id: 3, name: '小明' }, { id: 5, name: '小花' }, { id: 1, name: '小黑' }, { id: 4,

原创 Git

切换分支时，该分支的修改被带到另一个分支需要在当前分支先commit一次，再checkout。使用技巧：当前commit覆盖之前commitgit commit --amend -m “”新建本地分支并且切换分支(关联远程分支)git checkout -b 本地分支 远程分支(远程分支名字使用全称：git branch -a就可以查到)查看分支关联关系git branch -vv查看所有分支git branch -a新建本地分支git branch .

原创 设置highcharts x轴间隔

设置highcharts x轴间隔var series_1 = [12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34

原创 Vue中，使用highcharts x轴数据过多时，设置横向滚动条

Vue中，使用highcharts x轴数据过多时，设置横向滚动条highcharts在线编辑器jshare上效果图：代码：var chart = Highcharts.chart('container', { credits: { enabled: false // 禁用版权信息 }, // 标题 title: { text: '', useHTML: true, text: '<span style="font-weight: 700">CPU利用率<s

原创 vue中 :style 与 :class 三元运算符使用

vue中 :style 与 :class 三元运算符使用style三元表达式:<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>class三元表达式:<i class="iconfont " :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>...

转载 如何居中一个元素（终结版）

参考奇舞周刊：如何居中一个元素

原创 Vue: keep-alive

keep-alivekeep-alive：可以实现页面缓存，比如从编辑页切出去再切进来，页面还是处于编辑状态。需要在router.js中设置meta属性，meta下的keepAlive属性设置为true，代表这个页面需要进行缓存。import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import is from '@/view/is'impo

原创 Vue项目中实现div滚轮放大缩小，拖拽效果

Vue项目中实现div滚轮放大缩小，拖拽效果，类似画布效果引入插件vue-draggable-resizable，点我进入GitHub地址。npm install --save vue-draggable-resizablemain.js文件中import VueDraggableResizable from 'vue-draggable-resizable'import 'vue-draggable-resizable/dist/VueDraggableResizable.css

原创 你不知道的vue——vue不常用的知识点的整理

Vue中不常用但很有用的知识点v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。有时候，页面没渲染之前就会出现vue代码块，例如下图。使用v-cloak可以很好解决这种问题。<template> <div class="hello"> <span v-cloak>{{ content }}</span> </div></template><script>

原创 centOS和宝塔linux面板详细使用

本文章可是用于个人发布项目,也可以用于团队上线羡慕参考.前提:买一个服务器,一个域名 (个人使用和平时练习可以不买域名)linux系统如下操作：国内服务器:如阿里云 腾讯云1.先安装centOS系统,因为系统原因,没有可视化页面,所以要安装宝塔linux,(宝塔linux是可视化页面)阿里云安装centOS会让填写一个用户名和密码,有时用户名默认为root,安装完之后SSH ...

原创 css 横向滚动条

横向滚动条white-space: nowrap;min-width: 900px;overflow-x: auto;效果图：

原创 css - Loading

css - Loading// iview icon<Icon class="loading" type="ios-loading" />// css.loading { color: #2d8cf0; animation: loading 1s linear infinite;}@keyframes loading { from { transform: rotate(0deg); } to { transf

原创 Vue项目中使用highcharts-折线图（配置）

Vue项目中使用highcharts-折线图（配置）封装lineChart组件<template> <div class="chart"> <div :id="id" class="chart-common" :data="data"></div> </div></template><script> import HighCharts from 'highcharts'

原创 iview 表格默认选中某一项，且置灰。

iview 表格默认选中某一项，且置灰。// tableData为表格行数据，把第一行默认选中且置灰this.tableData[0]._checked = true;this.tableData[0]._disabled = true;