多啦的博客

Vue3学习笔记-10 Vuex

Vue3学习笔记-09 Vue Router

Vue3学习笔记-08 无障碍

Vue3学习笔记-07 TypeScript支持

Vue3学习笔记-06 深入响应式原理

Vue3学习笔记-05 渲染函数

Vue3学习笔记-04 插槽

Vue3学习笔记-03 从Vue2迁移

Vue3学习笔记-02 响应式API

Vue3学习笔记-01 组合式API

Vue3.0尝鲜

使用Vue2.6 + TypeScript3.5.3创建了一个项目，总结了一些我的经验。

插件Vuex的插件就是一个函数，接收store作为唯一参数，通过subscribe对store每次的mutation进行监听：const myPlugin = store => { // 当store初始化后调用 store.subscribe((mutation, state) => { // 每次 mutation 之后调用 // mutation 的格...

Vuex快速上手笔记。

Vue中对原始数据对象的访问，只是简单的代理访问（也就是引用了同一个地址的数据），所以当一份数据被多个实例共享，不必维护多份数据，只需要维护一份即可。但是这会带来调试上无法辨别何人何时改变过数据的问题，为了解决这个问题，可以引入store模式var store = { debug: true, state: { message: 'Hello!' }, setMessa...

Vue router 路由懒加载学习笔记。

Vue router 提高技巧

Vue Router导航守卫学习笔记。

Vue Router基础学习笔记

如果使用了Webpck进行了文件的组织、编译，就可以使用require.context令组件实现自动化注册。这个过程需要在创建Vue实例之前（new Vue({})）之前完成，例如src/main.jsrequire.contextWebpack解析带有表达式的require语句时，会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入。...

基础混入 (mixins) 是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。例子：（使用Vue.extend()）// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { ...

v-model可以实现双向绑定：<input v-model='text'>实际上它是一个语法糖，等价于：<input :value="text" @input="text = $event.target.value">也可以用在组件上，当用在组件上时，相当于：<Comp :value="text" @input="text = val"&amp

Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式 (后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v...

路由的懒加载当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组件的懒加载。如下的方法可以定义一个能够被 Webpack 自动代码分割的异步组件const Foo = () => import('....

在某些场景下你可能需要render渲染函数带来的完全编程能力来解决不太容易解决的问题，特别是要动态选择生成标签和组件类型的场景。动态标签根据props来生成标签的场景<template> <div> <div v-if="level === 1"> <slot></slot> </div> &am

总结在VueRouter中提供了两种模式：hash模式history模式hash模式的基础是当URL的#后的参数改变时浏览器不会发送请求history模式的基础是pushState和replaceState修改浏览器的历史栈后浏览器不会立即发送请求前端路由前端路由是通过改变URL，在不重新刷新整体页面的情况下，更新页面视图。目前浏览器实现这一功能主要通过两种方式：利用URL...

原文地址 - 从零开始 - Vue 响应式原理白话响应式过程简单来说，依赖收集的过程是：在组件init的过程中，将data中的属性添加getter/setter方法在组件渲染过程中（render函数执行时），每个组件实例内部会实例化一个Watcher对象，data中的属性会被touch，触发getter方法，记录组件和属性的对应关系当属性更新时，访问setter方法，会调用对应的wa...

Vue是如何检测到DOM更新完成的其实这个问题和“nextTick的原理”是相同的。实际上，Vue并没有检测Dom的更新，而是利用了JS的事件队列的机制来实现nextTick的首先，Vue触发的DOM更新也是通过nextTick实现，将DOM的更新（而非DOM的渲染）放到了一个队列的末尾，所以只需要将nextTick中的任务放到该队列的末尾执行即可了所以Vue首选的方案就是利用Promis...

已同步到个人博客，欢迎访问。又更新了2019.2月，大年三十，Vue在时隔一段时间后发布了新的版本Vue2.6，版本号是Macross（超时空要塞）真是，不让人过好年啊。学不动了。吐槽归吐槽，该学还是得学习。相对来说Vue的文档和教程是最平易近人、最易理解的了，而且尤雨溪还亲自发表文章介绍了Vue2.6的更新情况，更没有不跟进的理由了。Slots：新语法，性能优化，准备接轨3.0语...

一个由更改Vue打包后路径引发的一系列问题。引入字体文件在Vue中，想要引入字体文件，需要，使用@font-face来引入本地的字体h1 { background: url('./assets/images/logo.png');}然后再App.vue中引入并使用<style> @font-face { font-family: 'hello'; ...

Vue中的数据使用{{}}插值插入DOM中，如果数据中含有标签或者换行符\n时，是无法正常被解析为HTML标签的，而是解析为纯文字的要想正常换行有一下几个解决方法：v-html使用v-html会将数据内容作为HTML标签插入到DOM中，这时候就可以用<br>来代替\n进行换行，这个时候就可以换行成功了white-space使用v-html要注意防范XSS攻击，我们也可以直接使...

插件和组件的区别（1）组件分为全局注册和局部注册，全局注册使用Vue.component('componetName', component)实现，全局注册后可以在Vue系统中任意使用，局部注册的组件每次使用都需要import，然后在组件的componentes中注册，它的目的是复用模板和逻辑，影响的范围大多数是组件自身范围内（2）插件的范围和能力比组件更大，插件内可以包含多个组件，可以在插件...

以前收藏了一篇自己动手实现日期选择器的插件，最近没什么事，就想着仿照ElementUI的DatePicker，自己也写了一个简易的日期选择器，本以为不会很麻烦，实际动手才发现有很多问题需要解决。并且在写完之后，才发现可扩展性很差，距离ElementUI的水平差的很远，下一步就是把ElementUI的源码学习一下，看清楚自己的差距。结构我将这个日期选择做成了Vue的插件的形式，有三个文件：- ...

Vue中组件通信的方法。

详解 vue 的 diff 算法。

组件名为多个单词除了根组件App之外，组件名应该始终是多个单词的，这样做可以避免和现有的以及未来的HTML元素冲突组件的data必须是一个函数如果不是函数，那么会在组件的所有实例之间共享，导致会被随意修改，且无法维护。Vue.component('some-comp', { data: { foo: 'bar' }})export default {...