https://github.com/vuejs/vue-devtools#vue-devtools
之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。
在之前的几篇文章里阐述过关于七牛云云存储文件上传的一些操作:python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储;使用Tornado配合七牛云存储api来异步切分上传文件,得益于七牛云完备的文档体系,没遇到什么大坑,现在来介绍一下业内和七牛云齐名的云服务平台又拍云,本站的全球cdn服务就是使用又拍云:关于又拍云免费cdn全网加速服务的长期评测(各种踩坑),因为又拍云的免费流量比七牛云多出大概5g左右,当然了得加入一个所谓的又拍云联盟:https://www.upyun.com/league,本次文章记录一下使用python3.7+Django2.0.4配合vue.js2.0实现又拍云(upyun.cm)存储的异步拖拽文件上传功能。
Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装。
基于 Vue 和 SpringBoot 的智能化人事系统能够为公司提供良好的公司事务管理信息界面,方便公司对自己结构层次,人事处理进行修改、维护、检索信息。采用 SpringBoot + Vue + MySQL 设计实现智能化人事系统,其主要功能职位管理、职称管理、部门管理、操作员管理、员工管理、工资管理、个人中心等七大模块。职位模块有添加职位,删除职位,修改职位等功能,职称管理包括添加职称,删除职称和修改职称等功能,部门模块有查询部门,添加部门和删除部门等,操作员管理包括添加操作员,删除操作员,修改操作员信息的功能,员工管理包括添加员工,删除员工,搜索员工等功能,工资管理包括修改工资,工资套账等功能,个人中心包括修改个人信息和修改密码等功能。
Js中:用document.getElement之类的语句来操作dom; vue:使用vue提供的api,用 ref 来获取节点;
最近在工作之余一直学习Vue3.0相关知识,虽然Vue3.0至今还是rc版,但这并不影响我们去学习。今天这篇文章是我关于Vue3.0的第四篇文章。在前文中我们讲解了如何通过vite和vuecli搭建Vue3.0开发环境,然后介绍了Vue3.0中的setup,reactive,ref等,今天这篇文章主要讲解了以下内容:
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器。 Vue.js安装 安装方式有两种: 1、直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告) 2、使用cdn方法引入 3、npm安装 npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs 附上一小段nvm使用的命令: $ nvm
jQuery的杰出的DOM操作能力相信已经深入每一个前端Coder,在使用Vue之前我并不能习惯数据驱动的概念,仍然幻想着把jQuery引入到Vue中,直到深入使用Vue以后才发现,原来许多jQ操作DOM的方法都不需要,数据驱动比手工操作DOM方便快捷许多。尽管如此,Vue仍然给了我们原生DOM控制的能力。 环境是由Vue-Cli搭建的webpack模板,省略CSS部分 HTML部分 <div clas09vue3.0 Composition API 上手初体验 函数组件的开发与使用在上一节中,我们讨论了普通组件的开发与使用,其实相比较 vue 2.0 来说,差别并不大。01Vue父子组件生命周期执行顺序及钩子函数的个人理解(转载)先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。03初探 Vue 3.0 的组装式 API(一)Vue3 已经更新到 RC9,正式发布在即,其中让人倍加关注的重大更新:组装式 API (Composition API) 到底是什么,相比 Vue2 又有什么优势呢?02Vue2.0 Vuex初始化及歌手数据的配置本次的系列博文的知识点讲解和代码,主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可03Reactjs vs. Vuejs这里要讨论的话题,不是前端框架哪家强,因为在 Vue 官网就已经有了比较全面客观的介绍,并且是中文的。 📷 上图是二月份前端框架排名,React 位居第一,Vue 排名第三。还清晰记得,16 年十月份00[Vue 牛刀小试]:第十一章 - Vue 中 ref 的使用在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据。难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的功能。本章,我们就来学习 Vue 中 ref 的相关使用。03Vue3.0 新特性全面探索 - 基于 Composition Api 快速构建实战项目建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件食用Ψ( ̄∀ ̄)Ψ。03vuejs中封装axios请求集中管理在vuejs中,使用axios请求数据,一般会封装一个请求方法,然后在每个页面中调用,这样就造成代码冗余,导致代码可读性差,维护困难。03Vue2.0 scroll 组件的抽象和应用本次的系列博文的知识点讲解和代码,主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可04Vue3.0入门 + Vant3.0移动端实践(二)轮播图模块封装及首页完善接着上一篇的来,上一篇介绍了环境搭建及做好了底部的导航栏模块,接下来继续完善首页。02Vue2.0组件写法vue2.0组件是一个vue文件 其中 <template lang="html">表示组件的html <script>组件的vue对象 <style lang="css">组件的样式文件 如下例实现父子组件通信02vue3.0 Composition API 上手初体验 神奇的 setup 函数 (三) 生命周期函数通过前面两讲,我相信大家对于 vue 3.0 双向绑定数据,已经有了一些了解了。但是,对于生命周期函数,还是一脸懵逼的。02VUE3.0和VUE2.0语法上的不同前言:本篇文章只做VUE3.0和VUE2.0语法上的不同分析,不做性能和源码架构等的分析。02使用Vue3.0,我收获了哪些知识点(一)近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的阅读,你将可以自己完成Vue3.0环境搭建,同时还会对Vue3.0的一些新的特性进行了解,方便自己进行Vue3.0的学习。本文首发于公众号【前端有的玩】,关注===会了,还有更多面试题等你来刷哦。02vue 3.0 pre-alpha一个月前尤大大公布了 vue 3.0 的源码,目前还是 pre-alpha 状态,预计年后会发布正式版本。听到这个消息的第一反应是学习好累呀,在知乎上瞄了一眼尤大大对功能简单的介绍,感觉难,直接放弃了学习。 冷静了一段时间之后,认真的看了看,好像也不是很难。慢慢学,慢慢看,不着急。慢一点或许到达的更好一点06vue的video插件vue-video-player 在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp403第一篇:一文看懂 Vue.js 3.0 的优化我们的课程是要解读 Vue.js 框架的源码,所以在进入课程之前我们先来了解一下 Vue.js 框架演进的过程,也就是 Vue.js 3.0 主要做了哪些优化。02Vue 2.0 学习总结,精华全在这里了摘要:年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! 1Vue 介绍 Vue 是什么? https://vuefe.cn/guide vue也是一个数据驱动框架,做spa页面的 vue如果不做页面可以当做一个单独使用的js库,做双向数据绑定用 vue的核心库只关注视图层,但是vue并不只关注视图,和angular一样也有指令,过滤器这些东西 vue有非常强大的单文件组件 就是css+html+js都写在一个.vue文件中,这样定义的组件很简洁,清晰,组件化分的很彻底 而angula011Vue.js前端开发快速入门与专业应用1.一个Vue实例相当于一个MVVM模式中的ViewModel,在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生命周期勾子等选项02Vue.js 3.x 优化概览Vue.js 从 1.x 到 2.0 版本,最大的升级就是引入了虚拟 DOM 的概念。02Vue3.0 beta版学习笔记https://github.com/vuejs/vue-next03使用Vue和SpringBoot开发实验室耗材智能运维系统本项目是基于 Vue 和 Spring Boot 的实验室耗材智能运维系统,包括了耗材档案、耗材采购入库、耗材领用出库三大核心业务,另外还支持申请耗材、审核申请单、用户管理、文件云盘、组织架构、日志、数据字典、修改密码、个人中心等扩展功能。本系统主要面向高校实验室管理日常耗材所用,降低实验室管理人员的工作量,提高耗材库存的管理水平。01推荐!ant-simple-pro2.0正式发布,助力vue3社区今天给大家推荐一个我朋友开源的项目ant-simple-pro。在2月份发布v1.0版本,到现在已近有一段时间了,并且也在github上收获了100+star, 接下来笔者就来带大家一起介绍一下这款开源项目。012021 年 JavaScript 大事记大家好,我是 ConardLi,不知不觉中,2021 年已经接近尾声了,不知道在 2021 这一年,你收获了什么?又失去了什么呢?01Vue实现登录功能代码地址:https://github.com/Snowstorm0/vue-login-mock03Vue2.0原理篇2.VueComponent的__proto__,指向Vue的原型对象01推荐:非常详细的vue3.0开发笔记(7k字)当将当前的技术栈从Vue 2.0升级到Vue 3.0时,有许多值得考虑的理由。以下是10个升级到Vue 3.0的理由:02【Vuejs】339- Vue.js 组件通信精髓归纳由 vue-router 产生的每个页面,它本质上也是一个组件( .vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。02这个vue3的应用框架你学习了吗?如果每次新建一个项目得时候,我们都得手动去处理以上这些问题,那么将是一个重复性操作,而且还要确保团队一致,那么还得考虑约束能力03适合Vue用户的React教程,你值得拥有(二)上周小编我写了 适合Vue用户的React教程,你值得拥有,得到了小伙伴们的一致好评,今天这篇文章是这一系列的第二篇文章。今年的9月18日是九一八事变89周年,同时在这一天,Vue3.0正式版发布了。相信很多小伙伴已经看过了Vue3.0相关的很多文章了。今天这篇文章将会对Vue2,Vue3,React的一些用法进行对比,方便小伙伴们学习。02nextTick的使用场景和基本用法写在前面 这篇文章有点划水,因为只是讲了一个vue里很简单的一个知识点,但是还是要写,因为vue的知识点还是要写完的,趁着这几天不上班,将之前欠下来的知识点全部补充上来,后面可能就不再更新关于vue2.0的东西了,今天这篇文章写的是关于vue中nextTick的使用以及他的使用场景和他的作用 使用场景和作用 nextTick是vue提供出来更新视图之后回调的函数,也就是说我们在操作dom更新视图的时候,由于vue的视图渲染是异步的,可能会导致一些视图已经更新了,但是我们获取到的视图数据信息不是最新的0144. Vue使用ref获取dom元素以及组件引用在普通的js操作中,一般都是直接操作dom元素,但是对于Vue.js框架来说,一般是不允许直接操作dom元素的。0142. Vue使用ref获取dom元素以及组件引用在普通的js操作中,一般都是直接操作dom元素,但是对于Vue.js框架来说,一般是不允许直接操作dom元素的。01瞄一眼Vue3.0中的响应式编程言归正传,我们先用一个简单的例子来直观感受一下所谓的响应式编程和原来2.0时代的区别:02Vue.js系列之入门手册整理webpack简介,webpack是一个前端资源加载/打包工具,将各种js/css/html代码最后打包编译到一起。vuejs已经集成02Vue.js入门手册整理webpack简介,webpack是一个前端资源加载/打包工具,将各种js/css/html代码最后打包编译到一起。vuejs已经集成05VueConf China 2021 《Vue3生态进展-尤雨溪》 Reaction上面的数据是截止到今年 4 月份的,与去年同期相比,增长很可观,整个的前端开发市场还在不断扩大。02Vue & ElementVue 是一套前端框架,免除原生 JavaScript 中的 DOM 操作,简化书写。Vue 基于 MVVM(Model-View-View-Model) 思想,实现数据的双向绑定,将编程的关注点放在数据上。01推荐:非常详细的vite开发笔记(7k字)当将当前的技术栈从Vue 2.0升级到Vue 3.0时,有许多值得考虑的理由。以下是10个升级到Vue 3.0的理由:00奇怪的知识又增加了,梳理一遍都有哪些loader上篇文章简单介绍了一下loader API,那么除了我们常用的css-loader,sass-loader,style-loader,url-loader,vue-loader之外,还有哪些loader呢,我们一起来梳理一下。02
在上一节中,我们讨论了普通组件的开发与使用,其实相比较 vue 2.0 来说,差别并不大。
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。
Vue3 已经更新到 RC9,正式发布在即,其中让人倍加关注的重大更新:组装式 API (Composition API) 到底是什么,相比 Vue2 又有什么优势呢?
本次的系列博文的知识点讲解和代码,主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可
这里要讨论的话题,不是前端框架哪家强,因为在 Vue 官网就已经有了比较全面客观的介绍,并且是中文的。 📷 上图是二月份前端框架排名,React 位居第一,Vue 排名第三。还清晰记得,16 年十月份
在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据。难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的功能。本章,我们就来学习 Vue 中 ref 的相关使用。
建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件食用Ψ( ̄∀ ̄)Ψ。
在vuejs中,使用axios请求数据,一般会封装一个请求方法,然后在每个页面中调用,这样就造成代码冗余,导致代码可读性差,维护困难。
接着上一篇的来,上一篇介绍了环境搭建及做好了底部的导航栏模块,接下来继续完善首页。
vue2.0组件是一个vue文件 其中 <template lang="html">表示组件的html <script>组件的vue对象 <style lang="css">组件的样式文件 如下例实现父子组件通信
通过前面两讲,我相信大家对于 vue 3.0 双向绑定数据,已经有了一些了解了。但是,对于生命周期函数,还是一脸懵逼的。
前言:本篇文章只做VUE3.0和VUE2.0语法上的不同分析,不做性能和源码架构等的分析。
近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的阅读,你将可以自己完成Vue3.0环境搭建,同时还会对Vue3.0的一些新的特性进行了解,方便自己进行Vue3.0的学习。本文首发于公众号【前端有的玩】,关注===会了,还有更多面试题等你来刷哦。
一个月前尤大大公布了 vue 3.0 的源码,目前还是 pre-alpha 状态,预计年后会发布正式版本。听到这个消息的第一反应是学习好累呀,在知乎上瞄了一眼尤大大对功能简单的介绍,感觉难,直接放弃了学习。 冷静了一段时间之后,认真的看了看,好像也不是很难。慢慢学,慢慢看,不着急。慢一点或许到达的更好一点
在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4
我们的课程是要解读 Vue.js 框架的源码,所以在进入课程之前我们先来了解一下 Vue.js 框架演进的过程,也就是 Vue.js 3.0 主要做了哪些优化。
摘要:年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! 1Vue 介绍 Vue 是什么? https://vuefe.cn/guide vue也是一个数据驱动框架,做spa页面的 vue如果不做页面可以当做一个单独使用的js库,做双向数据绑定用 vue的核心库只关注视图层,但是vue并不只关注视图,和angular一样也有指令,过滤器这些东西 vue有非常强大的单文件组件 就是css+html+js都写在一个.vue文件中,这样定义的组件很简洁,清晰,组件化分的很彻底 而angula
1.一个Vue实例相当于一个MVVM模式中的ViewModel,在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生命周期勾子等选项
Vue.js 从 1.x 到 2.0 版本,最大的升级就是引入了虚拟 DOM 的概念。
https://github.com/vuejs/vue-next
本项目是基于 Vue 和 Spring Boot 的实验室耗材智能运维系统,包括了耗材档案、耗材采购入库、耗材领用出库三大核心业务,另外还支持申请耗材、审核申请单、用户管理、文件云盘、组织架构、日志、数据字典、修改密码、个人中心等扩展功能。本系统主要面向高校实验室管理日常耗材所用,降低实验室管理人员的工作量,提高耗材库存的管理水平。
今天给大家推荐一个我朋友开源的项目ant-simple-pro。在2月份发布v1.0版本,到现在已近有一段时间了,并且也在github上收获了100+star, 接下来笔者就来带大家一起介绍一下这款开源项目。
大家好,我是 ConardLi,不知不觉中,2021 年已经接近尾声了,不知道在 2021 这一年,你收获了什么?又失去了什么呢?
代码地址:https://github.com/Snowstorm0/vue-login-mock
2.VueComponent的__proto__,指向Vue的原型对象
当将当前的技术栈从Vue 2.0升级到Vue 3.0时,有许多值得考虑的理由。以下是10个升级到Vue 3.0的理由:
由 vue-router 产生的每个页面,它本质上也是一个组件( .vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。
如果每次新建一个项目得时候,我们都得手动去处理以上这些问题,那么将是一个重复性操作,而且还要确保团队一致,那么还得考虑约束能力
上周小编我写了 适合Vue用户的React教程,你值得拥有,得到了小伙伴们的一致好评,今天这篇文章是这一系列的第二篇文章。今年的9月18日是九一八事变89周年,同时在这一天,Vue3.0正式版发布了。相信很多小伙伴已经看过了Vue3.0相关的很多文章了。今天这篇文章将会对Vue2,Vue3,React的一些用法进行对比,方便小伙伴们学习。
写在前面 这篇文章有点划水,因为只是讲了一个vue里很简单的一个知识点,但是还是要写,因为vue的知识点还是要写完的,趁着这几天不上班,将之前欠下来的知识点全部补充上来,后面可能就不再更新关于vue2.0的东西了,今天这篇文章写的是关于vue中nextTick的使用以及他的使用场景和他的作用 使用场景和作用 nextTick是vue提供出来更新视图之后回调的函数,也就是说我们在操作dom更新视图的时候,由于vue的视图渲染是异步的,可能会导致一些视图已经更新了,但是我们获取到的视图数据信息不是最新的
在普通的js操作中,一般都是直接操作dom元素,但是对于Vue.js框架来说,一般是不允许直接操作dom元素的。
言归正传,我们先用一个简单的例子来直观感受一下所谓的响应式编程和原来2.0时代的区别:
webpack简介,webpack是一个前端资源加载/打包工具,将各种js/css/html代码最后打包编译到一起。vuejs已经集成
上面的数据是截止到今年 4 月份的,与去年同期相比,增长很可观,整个的前端开发市场还在不断扩大。
Vue 是一套前端框架,免除原生 JavaScript 中的 DOM 操作,简化书写。Vue 基于 MVVM(Model-View-View-Model) 思想,实现数据的双向绑定,将编程的关注点放在数据上。
上篇文章简单介绍了一下loader API,那么除了我们常用的css-loader,sass-loader,style-loader,url-loader,vue-loader之外,还有哪些loader呢,我们一起来梳理一下。
领取专属 10元无门槛券
手把手带您无忧上云