vue
文章平均质量分 93
niuyueyang
这个作者很懒,什么都没留下…
展开
-
前端录屏工具开发--可用于工程化错误回放
rrwebhttps://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.mdhtml页面直接引入,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2021-02-09 22:48:48 · 510 阅读 · 0 评论 -
vue3.0学习文档
删除的apion,on,on,off,$once$on,$off,$once被删除实例方法。应用程序实例不再实现事件发射器接口vue2.X版本eventBus.jsconst eventHub = new Vue()export default eventHubchildComponent.vue// ChildComponent.vueimport eventHub from './eventHub'export default { mounted() { //原创 2020-09-21 17:38:32 · 845 阅读 · 0 评论 -
vue dom diff算法
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom diff算法</title></head><body> <div id="root"></div> <script src="js/element.js"></scri原创 2020-06-02 14:33:51 · 167 阅读 · 0 评论 -
实现一个小型的watcher
watch.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script src="watch.js"></script> <script> let vm = new.原创 2020-05-29 19:07:44 · 148 阅读 · 0 评论 -
实现一个可拖拽的vue指令
代码drag.jsimport Vue from 'vue'Vue.directive('dragx',(el, binding, vnode) => { // 默认参数 let defaultOpts = { dragDirection: 'n, e, s, w, ne, se, sw, nw, all', // 东 e 西 w 南 s 北 n 东北ne 东南 se 西南 sw 西北 nw 全部 all dragContainerId: '',原创 2020-05-27 15:11:15 · 642 阅读 · 0 评论 -
iframe微前端架构
项目介绍项目可以分为两部分,一部分是统一的登陆注册入口,一分部是主要的管理内容区。我计划是登陆注册部分、内容管理区的header和aside作为一个基础的框架项目(后续称之为父级项目),内容区(也是表格的那部分)根据业务来划分不同的子项目,然后用户访问不同的业务,父级项目通过 iframe 将不同的子项目加载进来。预计目标将一个大项目拆分成多个小项目,降低项目的维护复杂度使各个业务最大...原创 2020-04-12 19:11:22 · 3649 阅读 · 4 评论 -
vueCli pwa模式增加
vue-cli2X或者vue-cli3X文档见官网我们不用配置就可以跑起来,但是配置里面有些地方需要注意的而且不能乱改,自行看文档。配置常用的是:caches(默认全部缓存,也可以自己设置),externals(数组形式,表示其他资源如cdn),excludes(数组形式,除了哪些不能被缓存),autoUpdate(多久后更新,默认一小时)我们使用offline-plugin这个插件,只需要...原创 2020-03-29 00:36:48 · 1561 阅读 · 4 评论 -
前端微服务
框架 https://github.com/niuyueyang/weifuku解释点子项目按照 vue-cli 3 的 library 模式进行打包,以便后续主项目引用注:在 library 模式中,Vue 是外置的。这意味着包中不会有 Vue,即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用,它将尝试通过打包器以依赖的方式加载 Vue;否则就会回退到一个全局的 Vue 变量...原创 2020-03-26 17:21:25 · 498 阅读 · 0 评论 -
简易版vue
index.html<!DOCTYPE html><html lang="en"> <body> <div id="app"> <input v-model="name" /> <h1>{{ name }}</h1> <h1>{{ age }}&l...原创 2020-01-14 15:19:44 · 192 阅读 · 0 评论 -
断点上传(未完)
思路对文件进行切片将切片传输给服务器<template> <div class="home"> <input type="file" @change="handleFileChange"/> <el-button @click="handleUpload">上传</el-button> </div&...原创 2020-01-13 16:03:54 · 162 阅读 · 0 评论 -
vue watch实现
vue双向绑定是建立在,给每个属性建立了getter与setter,在属性被改变的同时,触发视图再渲染getter是一种获取属性值的方法,setter是一种设置属性值的方法。当属性,a = 1被触发时,setter被触发,console.log(a)则getter被触发实现setter与getterObject.defineProperty方式Object.definePropert...原创 2020-01-12 12:35:45 · 189 阅读 · 0 评论 -
vue-router源码实现
标准使用npm install vue-router --save在src目录下,新建router文件夹,分别新建routes.js,index.js文件routes.js代码如下所示:import Home from './../views/Home';import About from './../views/About';export default [ { ...原创 2020-01-02 09:53:28 · 408 阅读 · 1 评论 -
vuex源码
https://blog.csdn.net/qq_36407748/article/details/102778062原创 2019-12-28 13:12:56 · 202 阅读 · 0 评论 -
vue翻牌动画
应用场景常用于大屏订单数量展示原理利用css writing-mode: vertical-rl 使数字垂直排列利用css transform 使数字滚动实现思路根据css先让数字垂直排列,总共设置8列根据组件传递的数值,如果不满8位,递归补零补零之后,循环根据 translate(-50%, -${numberArr[index] * 10}%,查看动画<tem...原创 2019-12-14 19:11:18 · 1735 阅读 · 0 评论 -
vue骨架屏
skeleton.vue<template> <div class="skeleton-wrapper"> <div class="skeleton-content"> <Item :paragraph="paragraph" :active="active"></Item> ...原创 2019-11-18 11:57:37 · 97 阅读 · 0 评论 -
前端埋点
指令式埋点//统计点击按钮Vue.directive('stat', { bind(el, binding) { el.addEventListener('click', () => { const data = binding.value; console.log(data) }, false); }});// 调用 <bu...原创 2019-11-01 20:42:22 · 191 阅读 · 0 评论 -
vue-cli加入骨架屏(转发)
https://blog.csdn.net/u012878818/article/details/81216272转载 2019-05-21 22:29:50 · 239 阅读 · 0 评论 -
vue传递值传递,slot
通过on,on,on,emit传值具体实现方式var Event=new Vue();Event.$emit(事件名,数据);Event.$on(事件名,data => {});实现示例a.vue <template> <div> <button @click="send">发送a</button>...原创 2019-05-30 22:01:33 · 7771 阅读 · 0 评论 -
vue SSR
解释基本用法var vue=require('vue');const app=new vue({ template:'<div>app</div>'})const render=require('vue-server-renderer').createRenderer();render.renderToString(app).then(html=>{...原创 2019-06-24 13:51:18 · 217 阅读 · 0 评论 -
vue组件发布
主要参考 https://www.imooc.com/article/34178以下几点需要注意:在根目录下面新建index.js,将src/components/index.js里面内容复制一遍,这样可以在全局使用,同时复制过程中注意修改路径...转载 2019-07-09 23:27:01 · 111 阅读 · 0 评论 -
vuecli3.0优化
https://segmentfault.com/a/1190000019499007https://www.jianshu.com/p/8f4d968de32c转载 2019-07-18 22:08:45 · 350 阅读 · 0 评论 -
vue单元化测试(vue-cli3)
chaiequal(4+5).to.be.equal(9);equal(4+5).to.be.not.equal(10);//判断4+5不等于10equal({foo:'bar'}).to.be.deep.equal({foo:'bar'});//判断类型equal(true).to.be.ok;//判断是trueequal(false).to.not.be.ok;//判断false...原创 2019-08-07 16:40:27 · 1093 阅读 · 0 评论 -
vue优化实践
vue优化v-if 和 v-show 区分使用场景v-if是真正条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。v-show 就简单得多, 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 display 属性进行切换。所以,v-if 适...原创 2019-08-25 18:42:09 · 165 阅读 · 0 评论 -
树形组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>树形组件</title> <style> *{ margin: 0; padding: 0; ...原创 2019-09-12 17:42:07 · 583 阅读 · 0 评论 -
vue骨架屏方案及vue-cli3优化
https://github.com/niuyueyang/gujiaping原创 2019-09-16 21:42:56 · 369 阅读 · 0 评论