Beatingworldline的博客

【代码】VueQuill 富文本 快速上手开发全记录。

访问GITHUB太慢需要修改windows HOST文件的原理是：本机网络设置的 DNS 服务器解析 Github 相关域名到遭受污染的 IP 地址，这些 IP 地址要么本身无法访问，要么节点过远，从而导致了访问失败或者速度缓慢。修改 HOST 文件可以绕过公共 DNS 解析，直接访问 Github 在韩国、日本等的服务器，从而达到加速访问的目的。hosts 文件路径。

websocket协议同样基于TCP，在HTTP的基础上使用。将HTTP请求超时设置的很大，在较长时间内等待服务器响应，例如百度网盘的扫码登录就是用的这种长轮询机制。为应付网页游戏，网页聊天，网页协同办公等复杂场景，websocket协议应运而生。HTTP1.1基于TCP协议，但只支持同一时间段的单向通信，也就是半双工。以上两种方法本质还是客户端主动请求数据 只能使用扫码等简单场景。TCP是全双工协议，通信两端都可以主动向对方发送数据。随机base64码 用于协议升级转换后的通信验证。

js天生没有编译和类型检查的束缚 灵活好上手 结合项目使用时也可以做到热更新提升开发体验。(需要编译的JAVA以前开发DEBUG很麻烦但现在有了容器编排技术，也可以实现类似效果)TS是JS的超集，添加了类型标注，不能直接在浏览器或Node中运行(Deno可以支持)，其他情况都需要TSC转译为JS后执行。TS可以提升代码的健壮性，可维护性，可扩展性与可读性变量添加类型标注参数添加类型标注可选参数:number){}函数返回值类型标注联合类型类型别名。

第一次使用VUE3时，项目中使用的时兼容VUE2引入setup函数的写法，上手很快也容易理解。直到发现官方的源码展示都用了全新的单文件组件写法，意识到这个才是主流。这篇文章记录下学习过程。

代码优化

nginx

ES6++函数、VUE相关、原生JS等各种小知识点 每日学习记录

一分钟教你安装Vue.js devtools

核心是动态引入的模板字符串import (../styles${url})JS文件中,这里通过接口返回结果判断import { getUserInfo } from '@api/user'getUserInfo({}).then(res => { let url = res.data.sex==1?'/ele-variables.scss':'/ele-variables-teacher.scss' import (`../styles${url}`)})VUE中&lt

vue部分<template> <div> <div id="dragTest" style="position: fixed;top: 13%;left: 70%;z-index: 2110; width: 540px;background: #ffffff;box-shadow: 0 4px 8px 0 #eeeeee; border-radius: 4px;left: 20%;top: 20%; width:

webpack 是什么就是前端模块化打包工具把项目资源文件放在一个总的入口文件引入，根据对应的关系合并成一个 bundle.js 。打包后的 index.html 引入 bundle。为什么需要webpack为了加快网页响应速度，将资源打包到一个文件内，需使用webpack按需动态加载资源为了优化性能，提升加载速度，把资源都合并到一个文件内后会发现无法按需加载，所有资源一并加载耗时过长，性能反而降低依赖库关系混乱，难以维护使用webpack有同步和异步两种加载方式，正确配置后，可以进行按

转载至git revert 用法git revert 撤销 某次操作，此次操作之前和之后的commit和history都会保留，并且把这次撤销作为一次最新的提交* git revert HEAD 撤销前一次 commit* git revert HEAD^ 撤销前前一次 commit* git revert commit （比如：fa042ce57ebbe5bb9c8db709f719cec2c58ee7ff）撤销指定的版本，撤销也会

一般的组件引入：<template> <div class="answer-wrapper"> <BVnav /> <BVtabs/> </div></template><script>import BVtabs from "@components/tabs/Index";import BVnav from "@components/nav/Index";export default {

参考安装node安装vue-cli脚手架npm i -g @vue/cli-init建立项目文件夹执行脚本vue create projectname手动选择需要的插件 vuex、router、babel 、vue版本、Css预处理器 等等配置——项目创建过程已经集成化了 很简单待补全：引入elementUI配置axios与不同环境的访问地址登录环境变量webpack脚本vue.config.js相关配置...

没有key更新视图会全部删除后全部重新渲染。有key值后通过比对，已存在的不需要重新操作以节约性能。且key最好是。元素的唯一ID，不能是数组的index，因为数组有可能在任意地方添加元素，而导致数组index起不到唯一标识的目的，vue依然会全部重新渲染。...

树形数据，每一级都有唯一的标识IDconst tree = [ { title:'动漫', children:[ { title:'那啥空', children:[ {title:'春日野穹'}, {title:'春日野空'}, ], },

官方Wiki中文文档配置项手册各路大神添加链接描述VUE项目引入使用步骤总结(VUE使用模式)：1、下载压缩包官方仓库2、解压到项目static目录中3、项目控制台输入npm i vue-ueditor-wrap4、以以下代码为案例即可使用<template> <div class='race-content'> <vue-ueditor-wrap v-model="write.msg" :config="myCo

1.props 父组件向子组件传值 子组件绑定父组件属性 子组件内部声明使用2.$emit/$on 子组件向父组件传值（通过事件形式） 子组件绑定父组件方法 子组件触发父组件3.vuex 全局传值 可用于同级组件4.EventBus 可用于同级组件4.url传参 route跳转时将参数存在url中供下一页面使用5.$attrs/$listeners6.$parent / $childrenlocalStorage：H5新增的本地存储API，可以理解为浏览器的本地数据库，大小只有5M

产品线需要新的开发环境phpstudy鼓捣了一番的同时也加深了对前端项目的理解之前只是机械的 装node 在vscode中敲命令 跑项目 并不太明白为什么这么做。实际上，对于webpack打包好的vue项目，无论是Node，或是有php环境(例如phpstudy，只需解析域名到index.html)。其实对于VUE项目来讲都一样，在哪里都能跑以来。就像vscode也只是一个集成开发环境，在内部运行Git，npm命令也和在命令行中没有本质区别，都能跑起来运行。只是Vscode作为集成开发环境

keep-alive 听过看过但很少用 以至于该用到的时候给忘了在用户切换同一个模块的路由页面时 需要保存用户的查询状态…而我写了一堆VUEX和逻辑判断。但稍微看一眼或是用过keep-alive就不一样了。需要学须的还很多，中级之路还很漫长：1、熟练度：功能点(反选 下载 播放等) 经验 静态页面(flex css)开发效率 逻辑完整性 BUG率 模块设计效率上限：2、技术上不断学习查漏补缺(项目搭建 webpack scss 目录架构) vue源码 其他框架与技术选型经验

老大难的promise，属于道理我都懂，也会用，但就是总感觉没理解透彻随手B站刷到一个视频 解决了我多年疑惑B站链接模拟一function one (){ return 'I am one';}function two () { setTimeout(()=>{ return 'I am two'; },3000); }function three () { return 'I am three';}con

JS中，每一个对象都有它的原型对象，它可以使用自己原型对象上的所有方法通过对象的_proto_获取原型对象方法，或通过prototype属性拿到原型作用：给原型添加方法 从而实现复用等let data = new Date(); Date.prototype.formate = function(){ let year = this.getFullYear(); let month = this.getMonth()+1; let date= this.getDate(); re.

JavaScript函数防抖(debounce)前端开发非常通用的技术点作用:防止用户短时间内，大量高频的重复点击按钮，导致大量触发请求 <el-button type="primary" round size="small" @click="clickBtn">从选中词汇开始播放</el-button>... methods: { clickBtn(){ clearTimeout(this.debounce);

之前的需求都是自己写布局 多多少少会浪费些时间 也容易出问题今天看到element官方有布局模式，总结下以备不时之需Container 布局容器用于布局的容器组件，方便快速搭建页面的基本结构：<el-aside>：侧边栏容器。<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。<el-header>：顶栏容器。&lt

实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式这时候有两条路可选自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路对组件原生样式进行改写而改写样式就需要用到/deep/样式穿透了/deep/VUE官方为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。这样在打包的时候会生成一个独一

EventBus

flex 弹性布局通过给父盒子(flex container)添加display:flex来控制子元素(flex item)位置和排列方式为盒模型提供最大的灵活性任何容器皆可指定为flex布局与grid浮动布局有冲突 flex中子元素浮动属性将失效flex 父元素常见属性flex-direction:设置主轴方向flex分为两个方向，默认x轴水平向右，y轴垂直向下flex-direction:row 默认从左到右flex-direction:row-reverse 从右

与axios相同 都是简单了解 没有深入。只讨论使用模块化机制下的编程需导入Vue和VueRouter，要调用 Vue.use(VueRouter)页面使用 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-lin

axios中文网之前公司的项目都是封装好的工具函数 直接写配置项(接口地址，参数等等)和成功失败的回调函数和错误处理即可。现在新公司新项目，没有再往axios上封装一层工具函数，而是直接使用。故在之前自己对axios简单理解的基础上，重新认识与总结下。axios是一个对象与jquery的ajax类似，都是对http请求的封装，但它能够更好的支持promise内部是xhr操作与对函数参数的处理下面可作为axios对象内部的简单实现创建实例const instance = axios.cre

查漏补缺了~~~这部分一直都是能用就行，不会就去网上搜，开发用的组件有对应样式，平时写的很少，更没有系统性学习过，成了短板…html5:html5新增了语义化标签：nav、section、footer …新增了canvas标签新增视频和音频标签 video 、audiohtml5完全支持css3浏览器内核的理解主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如

Symbol：ES6 新的原始数据类型，通过Symbol函数生成let sym = Symbol('foo')//描述Symbol的字符串用于区分，传入对象等会自动转为字符串sym.description // “foo”表示独一无二的值，每一个 Symbol 值都是不相等的，用于避免对象属性名冲突.它是一种类似于字符串的数据类型，而完全不同于对象不在循环遍历中出现，可使用Object.getOwnPropertySymbols()获取...

这两者可以达到类似的功能，导致之前混淆了，今天发现不是一回事，记录下：扩展运算符- …用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }//等价于let baz = Object.assign({}, bar);解构- let {xx} = obj;解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋

官网JsBarcode官网JsBarcode的GitHub-WIKI普通打印页面元素内容与打印背景色丢失问题

v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。...

AXIOS:Axios 是一个基于promise网络请求库作用于node.js和浏览器中从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求自动转换JSON数据它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。node.js:JS的非浏览器运行环境 类似于tomcat 自动添加环境变量 在各命令行都能使用n.

纸上得来终觉浅，绝知此事要躬行。许多看文档查资料学到的知识，看似学会了，但往往是在实际开发中遇到问题后才真正理解的。例如：在vue3开发移动端时，使用了vant组件库的vue3版本，用到了环形进度条这里的写法换成了vue3的写法 v-model:current-rate="currentRate"以前用v-model习惯了但并未真正理解，导致直接使用出现了问题。参考文章v-bind动态地绑定一个或多个 attribute或一个组件 prop ，作为一个 DOM property 绑定而不是作

setup执行在 VUE实例的beforeCreate()与created()之前 函数抛出的逻辑内容包括数据和方法都已完成setup引入的JS逻辑: export default function TestSetup() { const getData = (param) => { //省略异步请求代码 return data; }; r

getterVuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。通俗讲就是提前将常用但抽取过程复杂的状态(数据)的逻辑封装起来，和store一起全局使用，方便取深层的状态不使用getter'computed: { doneTodosCount () { return this.$store.state.todos.filter.

概念：数据(状态)驱动视图，用户与视图交互触发动作、交互动作改变状态，数据驱动视图…单向数据流当状态(数据)背多个组件共同使用时 单向数据流容易被破坏多个视图依赖同一状态(数据)、多视图行为会更改同一状态的情况下将多视图共享状态(数据)抽离出来全局管理，所有依赖它的组件构成宏观上的巨大视图，即可解决问题使用：项目中一般用于存储登录用户的信息和状态等Vuex 应用的核心就是 store容器，它包含着你的应用中大部分的状态 (state即共享数据)Vuex 的状态存储是响应式的，不能直接改变