- 博客(21)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 聊聊keep-alive组件的使用及其实现原理
说明【本文转载自：https://github.com/answershuto/learnVue】keep-alivekeep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。具体内容可以参考官网。使用用法<keep-alive> <component></compo
2020-09-29 18:11:38
647
转载 从template到DOM(Vue.js源码角度看内部运行机制)
说明【本文转载自：https://github.com/answershuto/learnVue】从new一个Vue对象开始let vm = new Vue({ el: '#app', /*some options*/});很多同学好奇，在new一个Vue对象的时候，内部究竟发生了什么？究竟Vue.js是如何将data中的数据渲染到真实的宿主环境中的？又是如何通过“响应式”修改数据的？template是如何被编译成真实环境中可用的HTML的？Vue指令又是如何执行的？带
2020-09-29 17:24:25
483
转载 Vue.js异步更新DOM策略及nextTick
说明【本文转载自：https://github.com/answershuto/learnVue】操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样：<template> <div> <div ref="test">{{test}}</div> <button @click="handleClick">tet</button> </div><
2020-09-29 17:12:32
766
转载 聊聊 vue.js 的 template 编译
说明【本文转载自：https://github.com/answershuto/learnVue】$mount首先看一下mount的代码/*把原本不带编译的$mount方法保存下来，在最后会调用。*/const mount = Vue.prototype.$mount/*挂载组件，带模板编译*/Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { el
2020-09-29 16:54:53
626
转载 VirtualDOM与diff (vue.js 实现)
说明【本文转载自：https://github.com/answershuto/learnVue】VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最简单粗暴的方法就是
2020-09-29 16:35:13
286
转载 VNode 节点 (vue.js 实现)
说明【本文转载自：https://github.com/answershuto/learnVue】抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最简单粗暴的方法就
2020-09-29 16:27:29
1490
1
转载 vue.js 事件机制
说明【本文转载自：https://github.com/answershuto/learnVue】Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是$on，$once，$off，$emit。初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：{ eventName: [func1, func2, func3]}存放事件名以及对应执行方法。/*初始化事件*/export function initEvents (v
2020-09-29 16:04:13
430
转载 从 vue.js 源码角度再看数据绑定
说明【本文转载自：https://github.com/answershuto/learnVue】数据绑定原理前面已经讲过Vue数据绑定的原理了，现在从源码来看一下数据绑定在Vue中是如何实现的。首先看一下Vue.js官网介绍响应式原理的这张图。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0DZdKTf-1601365299586)(https://cn.vuejs.org/images/data.png)]这张图比较清晰地展示了整个流程，首先通过一次渲染操作
2020-09-29 15:42:04
297
转载 vue.js 依赖收集
说明【本文转载自：https://github.com/answershuto/learnVue】为什么要依赖收集先看下面这段代码new Vue({ template: `<div> <span>text1:</span> {{text1}} <span>text2:</span> {{text2}} <div>`, data: {
2020-09-29 15:32:08
554
转载 vue.js 响应式原理
说明【本文转载自：https://github.com/answershuto/learnVue】关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一
2020-09-29 15:28:20
296
原创 vue里filters为什么获取不到this？
问题<div>{{auditResult | auditResultNameFilter}}</div>data() { return { auditResultOptions: [...] } },filters: { auditResultNameFilter(status) { let [obj] = this.auditResultOptions.filter(item => item.value === status
2020-09-28 18:19:15
4689
转载 一张脑图带你掌握Git命令
说明参考文章：【「一劳永逸」一张脑图带你掌握Git命令】–TianTianUp【您必须知道的 Git 分支开发规范】 - 稻草叔叔git 命令脑图git 命令脑图链接基本概念基于上面的图，我们就有接下来一些概念版本库 .git当我们使用git管理文件时，比如 git init 时，这个时候，会多一个 .git 文件，我们把这个文件称之为版本库。.git 文件另外一个作用就是它在创建的时候，会自动创建 master 分支，并且将 HEAD 指针指向 master 分支。工作区本
2020-09-17 18:43:29
265
原创 Snipaste：简单、强大的截图、取色工具
简介Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上！下载并打开 Snipaste，按下 F1 来开始截图，再按 F3，截图就在桌面置顶显示了。就这么简单！你还可以将剪贴板里的文字或者颜色信息转化为图片窗口，并且将它们进行缩放、旋转、翻转、设为半透明，甚至让鼠标能穿透它们！如果你是程序员、设计师，或者是大部分工作时间都在电脑前，贴图功能将改变你的工作方式、提升工作效率。Snipaste 使用很简单，但同时也有一些较高级的用法可以进一步提升你的工作效率。感兴趣的话，请抽空读一读
2020-09-17 17:36:01
3390
转载 JavaScript 运算符优先级 - 汇总表
说明本文摘抄自：[【运算符优先级 - JavaScript | MDN】(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)运算符的优先级决定了表达式中运算执行的先后顺序，优先级高的运算符最先被执行。关联性关联性决定了拥有相同优先级的运算符的执行顺序。考虑下面这个表达式：a OP b OP c;左关联（左到右）：相当于把左边的子表达式加上小括号 (a
2020-09-17 11:02:51
2181
原创 vue里使用axios的时候返回数据少了status的问题
问题封装的 axios 里，业务组件请求 api 时，发现返回的数据没有 status 状态码但是按理应该返回下面这种数据格式才对解决问题出现的原因就是发现项目里面有两个不同文件都封装全局的 axios， 然后他们在响应拦截器都做了下面的处理，return 了 response.data，第一个拦截器执行完第二个拦截器再执行，传的值就会进行 data.data 的处理。import axios from 'axios';// 添加响应拦截器axios.interceptors.respo
2020-09-16 21:10:47
1830
原创 09 # 图像标签
说明网道HTML 教程学习笔记1、<img><img>标签用于插入图片。它是单独使用的，没有闭合标签。<a href="example.html"> <img src="foo.jpg"></a>1.1 src 属性指定图片的网址1.2 alt 属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。1.3 width 属性，height 属性图片默认以原始大小插
2020-09-15 18:22:30
190
原创 vuecli3打包报警告：chunk chunk-common [mini-css-extract-plugin] Conflicting order.
问题运行 npm run build 时，报下面的 warning解决方案我们在 vue.config.js 配置文件里添加下面的 css 配置，用于打包时禁用顺序检查https://github.com/vuejs/vue-cli/issues/3771css: { extract: process.env.NODE_ENV === 'production' ? { ignoreOrder: true, } : false,}我用的解决方式就是这一种，其他的我试过一些
2020-09-11 18:32:51
12249
原创 vue里怎么使用pdf.js实现pdf文件的预览功能
你首先得准备一个pdf插件包，比如我这边的项目包里的public文件夹的lib文件夹下面就有一个pdf的插件包，里面包含build以及web两个文件夹。行，从而确定链接的参数file参数就是我们需要的pdf文件路径参数。其实实现这个预览代码量很少，核心代码就一行，接下来我介绍一下这个实现过程。比如我这边的写法就是下面的样子，这个就是预览的核心代码。我们打开viewer.js，有个默认的配置项。下载一个稳定版本的就行，目录大致如下。，直接访问浏览器就会下载该pdf。...
2020-09-10 20:40:18
11067
3
原创 实现一个容器上下左右居中对齐
实现如下实现效果参考 element 的布局效果<div class="box-wapper"> <div class="wapper"> <!--写你要实现的内容比如：图片--> </div></div>.md-box-wapper { width: 100%; height: 100%; text-align: center; &::after { content: ""; d
2020-09-10 19:26:29
557
转载 vue-cli3优化配置
说明本文转载自：张雪冬前端工程师学习园地-vue-cli3优化配置1.使用cdn引入不改变的第三方库const cdn = { // 忽略打包的第三方库 externals: { vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', axios: 'axios' }, // 通过cdn方式使用 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.ru
2020-09-10 19:09:00
1838
流沙：用于 CSDN 博客网站的暗黑和明亮主题切换的 chrome 浏览器插件。
2022-08-15
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
2022-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人