![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
无声的code
指尖下的代码,头顶上的星空
展开
-
vue修饰符
默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。.delete (捕获“删除”和“退格”键)自动将用户的输入值转化为数值类型。自动过滤用户输入的首尾空格。2.model修饰符。原创 2023-03-23 23:58:26 · 65 阅读 · 0 评论 -
在 Vue 里如何优雅的清除一个定时器?
前言清除定时器,相信有相当一部分人是这么写的:export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer)原创 2021-07-22 16:53:22 · 3585 阅读 · 1 评论 -
hash和history的区别
hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有底带#,外观上比hash 模式好看些hash 能兼容到IE8, history 只能兼容到 IE10;由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段)history存在中新增的pushState()和replaceState()方法...原创 2021-07-07 19:18:54 · 161 阅读 · 0 评论 -
vue mutations为什么只能同步
1.mutations 里的同步意义在于,每个mutation执行完毕之后,可以得到对应的状态,使用devtools可以跟踪状态的变化2.每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件,当触发响应类型的时候调用handker(),调用type的时候需要用到store.commit方法...原创 2021-07-07 14:37:49 · 1563 阅读 · 0 评论 -
同步与异步的详细区别
简单介绍:同步(Synchronization):任务顺序执行,在上一个任务未执行完成之前下一个任务等待执行。异步(Asynchronous ): CUP暂时搁置当前任务,等到主线程任务执行完成,再来响应该任务。运行机制:所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。主线程之外,还存在一个“任务队列”(task queue),只要异步任务有了运行结果,就在“任务队列”中放置一个事件。一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任原创 2021-06-16 11:20:03 · 1390 阅读 · 0 评论 -
eventBus实现源码
class EventBus{ constructor(){ this.event=Object.create(null); }; //注册事件 on(name,fn){ if(!this.event[name]){ //一个事件可能有多个监听者 this.event[name]=[]; }; ...原创 2020-11-19 14:48:53 · 105 阅读 · 0 评论 -
nexttick的实现方式
1.先判断Promise2.在判断MutationObserver3.在判断setImmediate4.最后setTimeout如果以上都不支持就只能用setTimeout来完成异步执行了延迟调用优先级如下:Promise > MutationObserver > setImmediate > setTimeout每次event loop的最后,会有一个UI render,也就是更新DOM只要让nextTick里的代码放在UI render步骤后面执行,就能访问到更新后的DO原创 2020-11-19 14:35:43 · 481 阅读 · 0 评论 -
常见功能:vue返回顶部操作
Vue实现返回顶部功能<template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <di原创 2020-10-27 15:20:12 · 813 阅读 · 0 评论 -
vue中 axios怎么封装?
import axios from 'axios'axios.defaults.baseURL = ...axios.defaults.timeout = 10000;axios.defaults.headers.post['Content-Type'] = 'application/json';//请求拦截axios.interceptors.request.use(config => { //可在此处登入 return config;}, error => { r原创 2020-09-16 08:25:32 · 168 阅读 · 0 评论 -
对事件总线(EventBus)的理解
通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案1.创建一个vue实例,导出这个实例import Vue from 'Vue'export default new Vue2.在两个需要通信的两个组件中分别引入这个bus.jsimport Bus from '这里是你引入bus.js的路径' // Bus可自由更换喜欢的名字3.传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据。Bus.$emit('click',data) /原创 2020-09-15 17:28:47 · 387 阅读 · 0 评论 -
表单输入控制——表单修饰符/change事件/filter/指令
1.表单修饰符如果是简单的控制输入一定是数字或者去掉用户输入的收尾空白符,可以直接使用 Vue 提供的表单修饰符 .number 和 .trim如果自动将用户的输入值转为数值类型,可以给v-model添加number修饰符:<input v-model.number="age" type="number">如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:<input v-model.trim="msg">change事件:给表单原创 2020-09-15 15:01:12 · 1459 阅读 · 0 评论 -
通过 v-bind=“$props“ 以及v-bind=“$attrs“ 实现属性透传
很多时候,我们会写一些嵌套组件,比如A的子组件是B,B的子组件是C。这个时候如果A传递props给B,B又得传递props给C,我们经常在B传给C的时候这么写:<template> <child-component :someprop1="someprop1" :someprop2="someprop2" :someprop3="someprop3" :someprop4原创 2020-09-15 14:47:35 · 2003 阅读 · 2 评论 -
前端工程化webpack
loader模块加载器(处理文件的转换):1.编译转换类,转移成js代码,css-loader,babel-loader,url-loader,html-loader,style-loader2.文件操作类:file-loader3.代码检查类:eslint-loader2. plugin插件,处理文件3.opitimization生产环境的一些优化4.devServer开发服务器(热更新,代理,热拨插)5.devtool配置webpack的source-map...原创 2020-09-11 11:15:58 · 91 阅读 · 0 评论 -
vue管理系统,后台权限的控制
权限被管理员修改后立即生效对于权限控制,需求大致为如下:1.对于大模块的限制,比如需要通过路由跳转的模块,这时需要进行路由拦截2. 对于小功能的限制,比如一个按钮,如果没有特定权限,那么这个按钮就不显示安全行考虑将存储放在localStorage中来实现长久存储,这种实现方式是很不可取的,因为hacker可以通过手动更改存储的信息来实现获取特定权限,甚至系统都没有做路由拦截,如果知道模块的路由,可以直接通过输入路由信息来直接跳转到特定模块。权限被管理员修改后立即生效我的做法是,获取到权限列表后原创 2020-09-08 10:20:45 · 224 阅读 · 0 评论 -
webpack打包优化
1、使用 HappyPack 来加速代码构建原理:(1)由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的事情只能一件一件地做,不能多件事一起做。(2)而 HappyPack 的处理思路是:将原有的 webpack 对 loader 的执行过程,从单一进程的形式扩展多进程模式,从而加速代码构建。2、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块优化原理(1)我们的项目依赖中通常会引用大量的 npm 包,而这些包原创 2020-08-18 11:19:15 · 535 阅读 · 0 评论 -
ES6常用单容易被忽略的方法
1.has(1)has方法用来拦截HasProperty操作(注意不是HasOwnProperty,即has方法不判断一个属性是对象自身的属性,还是继承的属性。),即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是in运算符。可以接受两个参数,分别是目标对象、需查询的属性名。(2)用于隐藏某些属性// 隐藏_开头的属性var handler = { has (target, key) { if (key[0] === '_') { return false;原创 2020-06-28 17:08:29 · 549 阅读 · 0 评论 -
git使用心得 &常见问题整理(不断更新中,,,)
Git 流程图Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库配置Git# 查看系统配置$ git config --list# 查看用户配置$ cat ~/.gitconfig # 查看当前项目的 git 配置$ cat .git/config# 查看暂存区的文件$ git ls-files# 查看本地 git 命令历史$ git reflog# 查看所有 git 命令$ git --help原创 2020-06-18 10:38:49 · 118 阅读 · 0 评论 -
vue绝对干货,可以早点下班约会了
1.动态组件前两天产品经理来了新的需求了,告诉我,需要根据用户的权限不同,页面上要显示不同的内容,然后我就哼哧哼哧的将不同权限对应的组件写了出来,然后再通过v-if来判断要显示哪个组件,就有了下面的代码一般都会通过v-if,v-else-if去做判断,,我感觉我的代码洁癖症要犯了,不行,这样code review过不了关,我连自己这一关都过不了,这时候就改动态组件发挥作用了。<template> <div class="info"> <component :i原创 2020-06-18 10:17:04 · 263 阅读 · 0 评论 -
VSCode( VisualStudioCode) 写vue项目一键生成.vue模版
安装一个插件,识别vue文件2.新建代码片段文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定3.粘贴入自己写的.vue模板{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template&...原创 2020-04-16 17:56:31 · 509 阅读 · 0 评论 -
vsCode配置代码格式化配置
在编译器vscode上配置ESLint、Prettier、Vetur这个三个插件,然后在编译器左上角文件的首选项中找到设置,搜索找到setting.json文件进行配置。配置如下:{“workbench.editor.enablePreview”: false, //打开文件不覆盖“search.followSymlinks”: false, //关闭rg.exe进程“editor.mi...原创 2020-04-16 17:43:50 · 1297 阅读 · 0 评论 -
vue-router里权限控制的方法
先在路由index.js文件里面初始化路由:最后在导出let vueRouter = new Router( { routes: [] }); //在此写动态加载路由的方法,也就是下面的方法 export default vueRouter;坑:1:使用vue 动态添加的路由,在页面刷新之后就会消失,所以得做本地存储,检查浏览器是否刷...原创 2020-03-17 10:21:58 · 724 阅读 · 0 评论 -
一般vue的文件目录层
基础库: vue.js、vue-router、vuex、whatwg-fetch编译/打包工具:webpack、babel、node-sass单元测试工具:karma、mocha、sinon-chai本地服务器:express目录结构├── README.md 项目介绍├── index.html 入口页面├── build ...原创 2020-03-12 14:25:32 · 120 阅读 · 0 评论 -
vue高频面试题
1.v-if 与v-showv-if初始渲染初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created,beforeMount,mounted 钩子。切换false => true依次执行 beforeCreate,created,beforeMount,mou...原创 2020-03-03 21:26:13 · 206 阅读 · 0 评论 -
vue的组件传值方式
1、路由传参①定义路由时加上参数props: true,在定义路由路径时要留有参数占位符: name『用法: to="'路径/'+value"』②在跳转到的页面加上参数props:[‘name’]③在跳转到的页面就获取到了name『用法: js中直接this. name;html中直接插值{{ name}}』2、父组件向子组件传值①父组件内设置要传的数据『data(){ id: valu...原创 2020-02-27 11:34:06 · 119 阅读 · 0 评论 -
Vue基础语法
1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile,对每个元素节点的指令进行...原创 2020-02-12 16:33:55 · 75 阅读 · 0 评论 -
js,底层处理price处理方法
/** * 处理价格,默认是元,分第二个参数传100 * dealPrice(5) => 5.00;dealPrice(500, 100) => 5.00; */export function dealPrice(x, d = 0) { let f = parseFloat(x); if (isNaN(f)) { return; } if (f == 0...原创 2020-01-07 17:21:46 · 765 阅读 · 0 评论 -
vue,底层方法scroll.js
scroll 方法汇集// import { isServer } from './index'const isServer = false;// [debounce 和 throttle](https://www.cnblogs.com/wilber2013/p/5893426.html)// const docE = document.documentElement// con...原创 2020-01-07 17:08:00 · 728 阅读 · 0 评论