前端
hi_zf
天地万物 生生不息
展开
-
前端Vue单元测试
使用方式jest功能最全配置少有断言库test-utilssinon 辅助库 创建测试替身原创 2021-03-12 19:41:26 · 183 阅读 · 0 评论 -
Vue开发工具
Vetur ESLint Prettier vue-devtoolsVeturESLintESLint 代码检查工具devtools vue浏览器插件原创 2021-03-12 19:04:07 · 200 阅读 · 0 评论 -
Vue UI组件库
Element UI / Ant Design Vue / iView原创 2021-03-12 15:21:34 · 262 阅读 · 0 评论 -
Vue Nuxt
缺点解决预渲染SSR动态渲染配置比较繁琐NuxtNuxt核心原理流程原创 2021-03-12 15:01:10 · 117 阅读 · 0 评论 -
Vue Router的使用场景
传统模式 每个url都会重新加载页面单页面模式根据url加载不同的组件vue router解决的问题使用方式路由类型底层原理原创 2021-03-12 14:45:32 · 418 阅读 · 0 评论 -
vuex核心概念和底层原理
![](https://img-blog.csdnimg.cn/20210310161805290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hpX3pm,size_16,color_FFFFFF,t_70)原创 2021-03-10 16:18:18 · 529 阅读 · 0 评论 -
vue生态-vuex
vue生态虽然没有reactc丰富,但vue技术多为官方提供,使用者不必为选型困扰vuex状态管理工具单向数据流:绿色框为vue的功能,State:响应式数据; Dispatch:派发; Mutations:更改State,在Devtools中记录数据变化,通过插件进一步调试.Action中异步操作,Mutation同步Vuex如何提供响应式数据?如何在Vue中使用Vuex创建// 创建项目 选择默认配置vue create vuex-deml1// 安装vuexcd v原创 2021-03-10 14:48:50 · 281 阅读 · 0 评论 -
vue template和JSX的对比以及它们的本质
原创 2021-03-10 12:25:58 · 671 阅读 · 0 评论 -
vue如何优雅地获取跨层级组件
组件实例,组件加载完成后都会有一个组件实例,一般情况下我们只需要操作数据,但是随着业务的复杂,也有需要操作实例的情况ref 引用信息在标签中使用ref属性标记标签,在代码中this.refs.XXX 得到引用,如果是普通标签得到的是DOM节点,如果是组件得到的是组件的实例(上图有注释)跨层获取可以通过parent/children 但是复杂的跨层就会很麻烦,如使用递归:callback ref利用钩子函数,主动通知消费者标签:组件:...原创 2021-03-10 11:31:11 · 553 阅读 · 0 评论 -
vue常用高级特性provide/inject
组件通信原创 2021-03-09 11:01:02 · 156 阅读 · 0 评论 -
使用setTimeout和clearTimeout取消输入框抖动优化体验
优化前:优化后:setTimeout是用来延迟代码执行的定时任务,clearTimeout是用来取消setTimeout的定时任务原创 2021-03-08 21:42:30 · 226 阅读 · 0 评论 -
vue的指令的本质
使用template模式就会很常用语法糖 标志位自定义指令有固定的生命周期钩子原创 2021-03-05 17:30:10 · 141 阅读 · 0 评论 -
vue组件的生命周期的应用场景和函数式组件
每个vue组件在创建的时候都会经过一系列的初始化过程,数据更新的过程也会有一系列的钩子函数执行业务代码,销毁的时候也会有钩子提供。创建和销毁只执行一次创建阶段更新阶段销毁阶段函数式组件functional: true无状态 无实例 没有this上下文 无生命周期这是一个组件借助函数式组件使用临时变量,计算属性的数据必须是响应式数据...原创 2021-03-05 15:43:22 · 159 阅读 · 0 评论 -
vue计算属性与监听器
计算属性computed减少模板计算逻辑数据缓存依赖固定的数据类型(响应式数据)计算属性只在数据改变的时候执行计算监听watch更加灵活,通用watch中可以执行任何逻辑,如函数节流,Ajax异步获取数据,甚至操作DOMvscomputed能做的,watch都能做,反之则不行能用computed的尽量用computed...原创 2021-03-05 15:22:46 · 49 阅读 · 0 评论 -
vue如何触发组件更新
如何处罚组件的更新数据驱动数据来源来自父元素的属性来自组件自身的状态如data来自状态管理器,如vuex,Vue.observable状态 data vs 属性props状态是来自组件自身的数据属性是来自父组件的数据状态的改变未必会触发更新属性的改变未必会触发更新状态不会更新的情况状态未做响应式模板未用到此状态响应式更新在数据层增加了代理层 在获取/维护数据的时候代理层代理;渲染的过程中:首先render用到的数据Data会放到Watcher里面,当这些数据原创 2021-03-05 15:02:52 · 1632 阅读 · 0 评论 -
HTML DOM
参考 :https://www.w3school.com.cn/xmldom/dom_intro.asp1.什么是 DOM?DOM 是 W3C(万维网联盟) 的推荐标准。DOM 定义了访问诸如 XML 和 XHTML 文档的标准。“W3C 文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”W3C DOM 被分为 3 个不同的部分/级别(parts / levels):核心 DOM用于任何结构化文档的标准模型XML.转载 2020-05-12 15:57:26 · 121 阅读 · 0 评论 -
window.opener
window.opener.document.all.yszh.value;定义和用法opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。当使用window.open()打开一个窗口,您可以使用此属性返回来自目标窗口源(父)窗口的详细信息。代码提示:window.opener.close()将关闭源(父)窗口。...原创 2020-04-07 19:27:18 · 99 阅读 · 0 评论