![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 87
夕山雨
前端的魅力,超乎你想象!
展开
-
两棵el-tree的节点跨树拖拽实现
在使用element-ui框架时,我们经常会用到el-tree组件。该组件支持在树上任意拖拽节点,但默认不支持将节点拖拽到树的外部,如一个外部div内,或另一棵el-tree上。关于如何将树上的节点拖拽到一个外部容器内(如一个设置了draggable="draggable"的div),我在 HTML5之原生拖拽 这篇博客的最后面已经给出了实现方案,感兴趣的可以参考,这里不再赘述。本文我们要探讨的是,如何将一个el-tree上的节点拖拽到另一个el-tree上。这需要依赖一些对el-tree源码的理解,我原创 2020-09-17 09:40:30 · 11616 阅读 · 38 评论 -
超详细的Vue渲染原理讲解
目录一、Vue简介1. MVVM、MVP和MVC2. Vue的基本配置二、Vue渲染原理1. HTML与模板2. Vue组件的完整渲染过程(1). Vue自身的初始化阶段(2). 组件实例的生命周期管理阶段a. 实例初始化阶段b. 组件挂载、更新和销毁阶段总结本文的主要内容是详细地介绍Vue的内部渲染原理,从而帮助大家深入掌握关于Vue Options、生命周期等概念。为了帮助Vue使用经验较少的同学快速理解Vue,我们先从Vue的简介开始,第二部分再详细介绍Vue渲染原理。一、Vue简介1. MVV原创 2020-09-07 09:41:57 · 23935 阅读 · 8 评论 -
Vue 3的设计过程(翻译自尤雨溪原文)
转载声明:本文翻译自尤雨溪微博链接原文,主要介绍了Vue 3的设计过程。对原文感兴趣的可查看原文(英文版):The process: Making Vue 3。翻译不当之处敬请参考原文予以纠正。Vue 3的设计过程重写Vue.js下个主版本的经验总结作者:尤雨溪创作日期:2020年5月在过去的一年里,Vue团队一直在开发Vue.js的下一个主版本,我们打算在2020年上半年发布它(原文注释:在写作本文时,这个工作仍在继续)。与新的Vue主版本有关的想法是在2018年底成形的,那时Vue 2的代码库翻译 2020-08-10 21:35:21 · 928 阅读 · 0 评论 -
配置打包命令动态应用主题样式
假设我们的代码里提供了蓝色、黑色和红色等多个主题风格样式,并且一个项目上只需要使用一套主题风格:假如某个项目需要使用蓝色主题,那么我们可能会在main.js中这样从theme-blue下引入对应的css文件:...import '../assets/theme-blue/index.css';...然后我们执行打包命令,蓝色主题下的样式文件就会被引入,于是项目就应用了蓝色主题。假如现在另一个项目需要生成一套红色主题该怎么办呢?非常简单,把上面的代码改成从红色主题下引入文件即可:impor原创 2020-07-30 21:30:04 · 761 阅读 · 2 评论 -
element-ui的message组件实现机制解析
在element-ui的组件中,有些组件的用法看起来比较特别,如message组件。在注册完element组件后,一般的组件是这样用的:<template> <el-button>点击我</button></template>但是message组件则是这样使用的:...this.$message.success('保存成功');...这样就会在页面上弹出一个成功的消息提示框。那么这类组件是怎么实现的呢?我们简单来看一下。...原创 2020-07-22 11:28:25 · 4480 阅读 · 0 评论 -
Vue的样式穿透(在父组件中为子组件定义样式)
在使用Vue开发前端项目时,我们经常需要引入第三方组件,比如下面的例子(假设我们已经注册了element-ui):<template> <div class="root"> <el-button type="plain">点击我</el-button> </div></template>这是一个来自element-ui的按钮组件,它会渲染成这样:那我如果我们想修改这个第三方组件的样式该怎么办呢?下面的样式并原创 2020-07-21 21:40:04 · 4945 阅读 · 0 评论 -
Vue组件交互之bus模式
目录一、bus模式简介一、bus模式简介bus模式是一种借助事件实现任意两组件交互的解决方案。通常来说,在不借助bus模式的情况下,事件的触发只会发生在父子组件之间,并且只能由子组件向父组件触发事件。它的大致实现模式如下:parent.vue<template> <child @tick="handleTick" ></child></template><script>export default { meth原创 2020-06-27 12:49:31 · 3754 阅读 · 0 评论 -
多页vue应用的单页面打包方法(内含打包模式的应用)
目录一、简介二、实现过程1. 配置打包指令(指定打包模式)2. 定义模式行为3. 定义打包逻辑三、打包模式的应用总结一、简介关于如何以及为什么要构建多页vue应用,我们在上一篇文章中已经介绍过,感兴趣的请参考构建多页vue应用。本文我们要介绍的是,对于一个多页应用,如何单独打包其中一个(或几个)页面。一般来说,多页应用不需要打包单个页面,这多个页面可以作为整个应用直接放在静态资源服务器上。不过我们也说过,多页应用的每个页面也可能会放在不同的服务器上,这时候如果往每个服务器上都放置完整的资源包,就会显得原创 2020-06-10 15:01:29 · 5987 阅读 · 2 评论 -
构建多页vue应用
目录1. 初始化2. 创建多页入口3. 配置多页入口总结一般来说,vue推荐构建单页应用,页面内容的切换是通过路由控制组件的替换来实现的。单页应用使得页面跳转变得极为迅速,不过假如两个页面在功能逻辑上是完全独立的,甚至可能需要部署到不同的服务上,这时候将其构建为多页应用可能是更好的选择。下面我们来看如何将一个单页vue应用改造为一个多页应用。为了方便,我们直接从vue-cli构建的初始化项目开始改造,已有项目的改造方案也是类似的。下面是改造过程:1. 初始化首先我们应该先初始化一个单页应用,我们使用原创 2020-06-10 13:08:55 · 3385 阅读 · 4 评论 -
单个vue组件的打包和动态引入
目录一、原理简介二、打包过程1. 创建一个webpack项目2. 编写组件和打包脚本3. 打包三、动态引入1. 在vue项目中使用2. 在普通项目中使用总结一、原理简介在使用webpack打包vue项目时,我们一般习惯以项目的main.js为打包入口,构建完整的项目依赖。依赖构建完毕后将打包后的js通过插件html-webapck-plugin引入到HTML模板中,从而实现整个项目的打包。由于webpack运行于nodejs环境下,只能识别js文件,因此如果遇到其他类型的文件,如.vue,就必须使用对原创 2020-05-31 14:20:36 · 9231 阅读 · 6 评论 -
Vuex使用指南及原理简介
目录一、Vuex用法指南1. Vue和Vuex的关系2. 核心概念介绍(1). state(2). getters(3). mutations(4). actions(5). modules3. 项目结构二、Vuex架构简介1. Vue.use(Vuex)做了什么2. new Vuex.Store({ ... })做了什么总结一、Vuex用法指南1. Vue和Vuex的关系Vuex是专为vue设计的状态管理框架,类似(并且借鉴自)React的Flux。我们知道,Vue的设计借鉴了MVVM(Model原创 2020-05-24 20:38:32 · 1063 阅读 · 2 评论 -
vue-router基本概念总结
目录一、vue-router是什么?二、基本用法1. 起步2. 动态路由3. 嵌套路由4. 命名路由5. 命名视图6. 重定向和别名7. 路由传参8. History模式总结一、vue-router是什么?要搞明白这个问题,你必须先了解什么是单页应用(或叫单页Web应用),以下解释引自百度百科:单页Web应用(single page web application,SPA),就是只有一张We...原创 2020-04-12 20:18:39 · 1497 阅读 · 0 评论 -
Vue源码笔记之虚拟DOM
什么是虚拟DOM?简单来说,虚拟DOM就是真实DOM树的一种JavaScript表达。之前在浏览器(基于Chromium)运行机制剖析这篇文章介绍过,浏览器通过HTML引擎来解析HTML文档,然后生成一棵DOM树。JavaScript可以通过DOM接口操作这棵DOM树,从而修改页面结构。但是DOM树本身并不是由JavaScript来描述的,而且它的体积通常十分庞大,再加上操作DOM经常导致网...原创 2019-09-22 22:53:48 · 1407 阅读 · 3 评论 -
Vue源码笔记之编译器
什么是编译器?如果单从Vue的角度来说,template(模板)并没有存在的必要。在Vue中,真正要使用的是从template编译生成的渲染函数,利用它可以直接生成虚拟DOM。实际上Vue向我们提供了直接书写渲染函数的能力(这样就可以不用写模板,也不需要编译器)。但是渲染函数写起来往往不那么直观,如果是一个很复杂的DOM结构,开发者很难知道如何去书写这个渲染函数。为了降低开发者学习Vue的心智负...原创 2019-09-14 17:48:29 · 2768 阅读 · 0 评论 -
Vue源码笔记之响应式系统
什么是响应式系统?Vue的响应式系统是一个精心搭建的监控系统,它负责监测项目中的数据变化,然后通知对该数据“感兴趣”的订阅者进行相关操作。我们分别来理解“数据”、“感兴趣”以及“订阅者”这三个关键词。这里指的数据,就是options中的data配置项,它通过以下两种方式定义://单文件中使用Vuevar app = new Vue({ el: "#app", data: { ......原创 2019-09-07 19:02:30 · 2226 阅读 · 1 评论 -
Vue源码笔记之初始化
概述本文主要分两部分:Vue自身的构造。主要是关于如何向Vue的原型prototype添加方法。Vue实例的初始化。即new Vue({ … })时执行的操作。Vue自身的构造过程1. 定义构造函数当我们像下面一样引入Vue.js文件时:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc...原创 2019-08-31 17:04:34 · 1293 阅读 · 0 评论 -
Vue源码笔记之项目架构
终于开启了Vue源码的阅读之旅!虽然只有三个月左右的使用经验,阅读源码时会比较吃力,但是无所谓,当我们欣赏一件“艺术品”时,重点在于是否用心去欣赏,而不在于欣赏到什么程度。本阅读笔记基于Vue 2.6.10,主要记录了自己对Vue源码的一些理解,并参考了刘博文著的《深入浅出Vue.js》一书以及csdn博主恰恰虎的Vue源码学习系列文章。由于能力有限,笔记中对源码的认识可能不够深入,如果感兴趣,...原创 2019-08-24 16:43:40 · 1601 阅读 · 1 评论 -
vue中使用mockjs模拟后台数据
概述以前的web开发中,前后端是紧密耦合在一起的,脱离了后端的前端几乎无法测试。两者的过度依赖不仅大大地提高了团队的沟通成本,还严重拖慢了项目的开发进度,非常不利于web项目的开发。于是前后端分离逐渐成为一种广为认可的开发模式。但在实际的web开发中,前后端的进度是很难做到实时同步的,因此经常会出现前端无接口可调的情况,这样前端开发很容易陷入阶段性停滞的泥潭。为了将前后端进一步解耦,前端出现了...原创 2019-08-03 14:40:03 · 2627 阅读 · 0 评论