Vuejs学习
文章平均质量分 70
CharmDeer
就像那公园里的桃花,你若盛开,花香迷怀,蝴蝶自来。
展开
-
Vuejs压缩十倍优化后图片上传,图片质量无损,ElementUI上传组件
这个逻辑是上传图片前由前端进行压缩后再上传图片,在开发中,能更大的利用带宽,实现多人访问上传不会出现阻塞情况,压缩后的图片在保存上也不需要很多空间,很大程度节省了存储空间,适合商城项目这种图片需求量大的项目开发使用,即使你储存OSS或COS也可以更大的节省存储空间,何乐不为。原创 2022-05-14 22:07:55 · 598 阅读 · 0 评论 -
前端ES6语法的几个重要知识点
什么是ES6ECMAScript6.0(以下简称ES6,ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本),是JavaScript语言的下一代标准,2015年6月正式发布,从ES6开始的版本号采用年号,如ES2015,就是ES6。ES2016就是ES7。ECMAScript是规范,JS的规范的具体实现。let&&constvar在{}之外也起作用let在{}之外不起作用var多次声明同一变量不会报错,let多次声明会报错,只能声明一次。var 会原创 2022-05-14 17:49:06 · 181 阅读 · 2 评论 -
Vue路由跳转之非父子组件关系页面间传参(并自定义跳转目标)
在做Vue项目之前呢,不知道怎么进行非父子组件关系页面之间的传参,使用的方法也很笨,是改变VueX的值来达到页面跳转监听。大致思路也就是:点击某个按钮跳转某个页面,点击该按钮的同时去改变VueX的值并在新页面接收,为什么要这样做能,因为我得到的需求是通过一个跳板页面来跳转目标页面,而跳板页面一进入就会发生计时任务,计时任务只能放到mounted里面这样才能一进入页面就执行,带来的问题就是怎么也接收不到VueX的变化值,后来也用了个笨方法解决,写个定时方法:这样在created钩子函数中是能够接收到原创 2022-01-04 17:41:15 · 640 阅读 · 0 评论 -
【Vue】如何更好的封装组件?几个小技巧助你成为组件封装达人,让我们封装的组件更加优雅易用
目录一、$attrs二、$listeners一、$attrs我们在使用组件的过程中,有时需要给被封装的子组件传递Prop例如:<template> <el-input v-model="innerVal" placeholder="placeholder" @input="$emit('input',$event)" > </el-input></template><script> expo原创 2021-11-29 22:40:42 · 5414 阅读 · 6 评论 -
Vue如何配置代理绕过跨域问题
跨域产生的原因?由于浏览器的 同源策略,在出现 域名、端口、协议有一种不一致时,就会出现跨域,属于浏览器的一种安全限制。解决跨域的方案jsonp 跨域:动态创建script,再请求一个带参网址实现跨域通信.缺点就是只能实现 get 一种请求function jsonp(url, jsonpCallback, success) { let script = document.createElement('script') script.src = url script.async = tr原创 2021-11-19 22:11:53 · 1500 阅读 · 0 评论 -
网页的灵魂,游荡在人机之间的互动——Vuejs动画体验
目录一、使用过渡类名实现动画二、自定义v-前缀三、钩子函数实现半场动画的介四、钩子函数实现小球半场动画五、小球动画每次重新开始的位置六、使用transition-group元素实现群体动画七、实现列表删除和删除时候的动画八、transition-group中appear和一、使用过渡类名实现动画返回目录图解vue动画:我们先看看不使用动画的显示与消失的效果<!DOCTYPE html><html lang="en"><head>原创 2021-11-13 23:30:35 · 1020 阅读 · 0 评论 -
Vue知识课堂第三课——Web前端Vue动画
待更新原创 2021-10-28 21:44:02 · 193 阅读 · 0 评论 -
Vue知识小课堂第二课——vue与Velocity实现过渡和动画
✍上期回顾第一课之监听窗口滑动事件以及某具体元素内部监听滑动Velocity介绍Velocity.js插件的作用Velocity.js是一个简单易用,高性能且功能丰富的轻量级JavaScript动画库,它拥有颜色动画,转换动画(transforms)、循环、缓动、SVG动画、和滚动动画等特色功能支持Chaining链式动画,当一个元素连续应用多个velocity()时,动画以队列的方式执行案例演示:第一步安装:npm install velocity-animate@beta第二步页原创 2021-10-28 15:45:27 · 788 阅读 · 0 评论 -
Vue小课堂开课啦——第一课之监听窗口滑动事件以及某具体元素内部监听滑动
给窗口添加滑动事件第一步,在mounted函数中声明我们要进行监听的事件以及回调函数:mounted() { window.addEventListener("scroll", this.scrollChange)//写法一 document.addEventListener("scroll", this.scrollChange)//写法二第二步在methods中定义我们刚刚写的scrollChange方法,并实现输出功能 methods: { scrollChange() { .原创 2021-10-27 23:25:09 · 388 阅读 · 0 评论 -
解决Vue项目history模式下打包部署到云服务器,访问路径,重复点击路由,刷新报404异常的问题!!!
history模式下打包部署的访问路径以下步骤皆以Tomcat为例部署位置是Tomcat的webapps包下(可以自己配存放位置,这里不是重点)打包路径问题一,保证Vue的路由路径与我们部署在webapps包下的路径一致问题二,在项目目录下新建vue.config.js文件,增加配置:module.exports = { publicPath: './', assetsDir:'static', lintOnSave: true, productionSourceMap: fa原创 2021-10-22 20:49:43 · 1788 阅读 · 0 评论 -
知道为什么HTML页面在电脑上和手机上的布局不同吗?这篇文章带你走进Element UI的简单适配
引言之前的文章介绍过bootstrap的响应式布局,帮助我们在手机上适配电脑上的页面,当然媒体查询也是一个很不错的适配方法今天带你们了解Element UI的适配方法Element的栅格系统bootstrap的栅格系统为12栏,而Element UI划分的更细一点,它拥有24栏那么怎么划分栏呢,方法非常简单,<el-row></el-row>标签定义一行,也就是24栏在这一行中进行划分,<el-col></el-col>定义换分出来的份数,我们原创 2021-10-18 20:12:30 · 1584 阅读 · 1 评论 -
你还在用古老的HTML和CSS吗?还在手敲吗?那么你是时候打开新前端的大门了————Element-UI全面详解
目录1、Element-UI简介element-ui,一套为开发者,设计师和产品经理准备的基于Vue的桌面端组件库,使用前端框架封装的代码帮助工程师快速开发Element-UI的特点:丰富的组件element-ui的组件分为六大类:分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好的满足大部分PC端to B业务开发需求成熟的生态element-ui是国内做Vue的UI框架中最早,也最成熟的一家。用户群体多,遇到问题基本都能解决优秀原创 2021-10-16 18:02:50 · 6162 阅读 · 8 评论 -
Vuejs第七篇(网络封装axios)
一、网络请求模块的选择-axios(了解)二、axios框架的基本使用(掌握)三、axios发送并发请求(掌握)四、axios的配置信息相关(掌握)五、axios的实例和模块封装(掌握)六、axios的拦截器的使用(掌握)...原创 2021-10-06 12:04:39 · 187 阅读 · 0 评论 -
Vuejs第六篇(Vuex详解)
一、vuex-Vuex概念和作用解析(掌握)二、vuex-单界面到多界面状态管理切换(掌握)三、vuex-devtools和mutations(掌握)四、vuex-state单一状态树的理解(掌握)五、vuex-getters的使用详解(掌握)六、vuex-mutations的携带参数(掌握)七、vuex-mutations提交风格(掌握)八、vuex-数据的响应式原理(掌握)九、vuex-mutations的类型常量(掌握)十、vuex-actions的使用(掌握)十一、vuex-mo原创 2021-10-06 11:58:53 · 234 阅读 · 0 评论 -
Vuejs第五篇(vue-router路由和tabbar)
一、vue-router-安装和配置方式二、路由映射配置和呈现出来三、路由的默认值和修改为history模式四、router-link的其他属性补充五、通过代码跳转路由六、vue-router-动态路由的使用七、vue-router-打包文件的解析八、vue-router-路由懒加载的使用九、vue-router-路由的嵌套使用十、vue-router-参数传递一十一、vue-router-参数传递二十二、vue-router-router和route的由来十三、vue-router原创 2021-10-06 11:50:58 · 846 阅读 · 0 评论 -
Vuejs第四篇(Vue CLI详解)
一、vuecli脚手架的介绍和安装(理解)二、vuecli-CLI2初始化项目过程(掌握)三、vuecli-CLI2的目录结构解析(掌握)四、知识回顾(了解)五、安装CLI错误和ESLint规范(掌握)六、runtime-compiler和runtime-only的区别(理解)七、VueCLI3创建项目和目录结构(掌握)八、VueCLI3配置文件的查看和修改(掌握)九、箭头函数的使用和this指向(掌握)十、什么是路由和其中映射关系(理解)十一、前端渲染后端渲染和前端路由后端路由(理解)原创 2021-10-06 11:35:36 · 625 阅读 · 0 评论 -
Vue第三篇(组件化开发与webpack详解)
待更新原创 2021-10-04 23:51:29 · 531 阅读 · 0 评论 -
iview学习笔记(vue部分)
待更新原创 2021-09-13 01:17:22 · 100 阅读 · 0 评论 -
Vuejs第二篇(Vue基础语法)
一、内容概述:插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例v-model二、插值操作-mustache语法(掌握)如何将data中的文本数据,插入到HTML中呢?我们已经学习过了,可以通过Mustache({{}})语法(也就是双大括号)Mustache:胡子/胡须mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式<!DOCTYPE html><html lang="en"><head> <原创 2021-09-19 16:59:19 · 771 阅读 · 11 评论 -
Vuejs第一篇(邂逅Vuejs)
一、内容概述:文档:https://cn.vuejs.org/v2/guide/Vuejs安装方式CDN引入下载和引入NPM安装管理Vuejs初体验Hello VuejsVue列表展示案例:计数器Vuejs的MVVMVue中的MVVM二、Vuejs的安装方式(了解)使用一个框架,我们第一步要做什么呢?下载安装它安装Vue的方式很多方式一: 直接CDN引入你可以选择引入开发环境版本还是生产环境版本<!--开发环境版本,包含了有帮助的命令行警告-->&原创 2021-09-19 15:07:40 · 200 阅读 · 1 评论 -
Vue学习介绍笔记
待更新原创 2021-07-04 01:00:55 · 123 阅读 · 0 评论