vue
分享
扫一扫
文章平均质量分 61
实战开发 学习更多vue开发
优惠券已抵扣
余额抵扣
还需支付
¥299.90
¥399.90
购买须知?
本专栏为图文内容，最终完结不会低于15篇文章。
订阅专栏，享有专栏所有文章阅读权限。
本专栏为虚拟商品，基于网络商品和虚拟商品的性质和特征，专栏一经购买无正当理由不予退款，不支持升级，敬请谅解。
随风小薇
听闻远方有你，动身跋涉千里；我吹过你吹过的风，这算不算相拥
展开
-
使用vue3.2x + element-plus + ts + vite + vue-router@4.x + vuex@4.x搭建的后台管理系统
功能用户管理 登录 注册权限验证 页面权限 按钮权限多环境发布 开发环境 测试环境 预发布环境 生产环境全局功能 字体svg + elementIcon 动态面包屑 动态侧边栏 ScreenFull全屏 动态换肤 多语言 快捷导航栏 错误日志 引导页 Echarts图表 全局Loading指令编辑器 富文本 Markdown JSONExcal 导出 导入 前端可视化 导出zip原创 2022-04-19 14:31:20 · 1319 阅读 · 0 评论
-
vue 自定义指令简单记录
vue自定义指令的简单学习原创 2023-09-04 16:36:33 · 529 阅读 · 0 评论 -
vue实现本地excel文件转化为json文件并下载
vue实现本地excel转json并下载原创 2022-09-23 16:41:02 · 678 阅读 · 0 评论 -
项目开发规范配置
前端项目开发规范基础配置原创 2022-07-13 15:02:24 · 179 阅读 · 0 评论 -
vue创建动态路由的两种方式（超详细哦）
vue创建动态路由的两种方式（超详细哦）原创 2022-07-13 10:01:00 · 4983 阅读 · 0 评论 -
vue3必学技能--自定义Hooks让vue3更加畅快
vue3必学技能--自定义Hooks让vue3更加畅快转载 2022-07-12 11:56:52 · 6703 阅读 · 3 评论 -
micro-app微前端数据通信
micro-app微前端数据通信原创 2022-04-26 10:13:18 · 1624 阅读 · 0 评论 -
搞懂 Vue3 的 7 种组件通信方式
本篇文章是全部采用的 <script setup> 这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档[1]对两种方式的描述。本篇文章将介绍如下七种组件通信方式：props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具)举一个栗子demo.gif上图中，_列表_和_输入框_分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。转载 2022-03-26 12:45:06 · 193 阅读 · 0 评论 -
micro-app微前端数据通信
micro-app微前端数据通信原创 2022-02-28 17:10:06 · 1076 阅读 · 0 评论 -
TypeScript+Vue3+Vite+VueRouter+Pinia的项目搭建
TypeScript+Vue3+Vite+VueRouter+Pinia的项目搭建原创 2022-02-24 14:19:52 · 899 阅读 · 0 评论 -
vue项目封装中websoket以及数据的加密传送和解密
vue中使用websoket，数据aes加密解密，sha236加密原创 2022-01-14 15:53:59 · 461 阅读 · 0 评论 -
vue表单校验功能（uni-app）
uni-app表单校验原创 2021-12-28 15:50:16 · 1209 阅读 · 0 评论 -
常用加密解密函数封装----AES加解密
常用加密解密函数封装----AES加解密！原创 2021-12-09 11:25:18 · 256 阅读 · 0 评论 -
vue项目中将页面生成图片或者PDF文档
vue中页面快速导出成图片或者PDF文档实现效果图image实现代码将页面html转换成图片或者PDF文档在需要导出的页面引入在util文件夹下创建htmlToPdf.js文件在main.js导入htmlToPdf.js在页面中使用项目demo地址：实现效果图image实现代码将页面html转换成图片或者PDF文档npm install html2canvas --savenpm install jspdf --save在需要导出的页面引入import html2canvas from ‘原创 2021-08-04 14:20:59 · 1105 阅读 · 0 评论 -
H5实现人脸抓拍
近期遇到个需求，要求是在H5网页上实现人脸抓拍。这可咋搞噢。无法，硬着头皮开干咯。实现目标：检测到人脸并自动抓拍<!DOCTYPE html><html lang=en style="font-size: 37.5px"><head> <meta charset=utf-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=原创 2020-10-22 13:58:22 · 2771 阅读 · 0 评论 -
vue工作开发总结（七）----手动挂载组件
在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过命令式调用，就像elementui的this.$message而不是在模板中通过状态切换，这种实现方式真是太糟糕了。对吧来个简单的例子：import Vue from 'vue'improt Message from '/message.vue'//1构造子类let MessageConstructor = Vue.extend(Message)//实例化组件let message...原创 2020-06-02 13:14:49 · 838 阅读 · 0 评论 -
vue工作开发总结（六）----事件化的监听器
一般使用：exportdefault{mounted(){this.timer=setInterval(()=>{console.log(newDate())},1000)},berforeDestroy(){clearInterval(this.timer)}}使用$on$once监听页面生命周期销毁解决export default{...原创 2020-06-02 13:13:17 · 289 阅读 · 0 评论 -
vue工作开发总结（五）----自定义组件的双向绑定
组件model：允许一个自定义组件在使用v-model时定制prop和event默认情况下，一个组件上的v-model会吧value用作prop且把input用作event，但是一些输入类型比如单选框复选框按钮可能想要使用valueprop来表达不同的目的。使用model选项可以回避这些情况产生的冲突input默认作为双向绑定的跟新事件，通过$emit可以更新绑定的值<my-switch v-model="val" />export detault { pr...原创 2020-06-02 13:11:47 · 966 阅读 · 0 评论 -
vue工作开发总结（四）----事件参数$event
$event是事件对象的特殊变量，在一些场景可以帮我们实现提供更多可用参数###原生事件在原生事件中表现和默认事件对象相同<template> <div> <input type="text" @input-"inputhandler('hello',$event)" /> </div></template>export default { methods:{ in..原创 2020-06-02 13:10:09 · 1001 阅读 · 0 评论 -
vue工作开发总结（三）---- 样式穿透
在开发过程中修改第三方样式很常见，但由于scoped属性的样式隔离，可能需要去除scoped或宁起一个style，这样的做法会带来副作用（组件样式污染，不够优雅），样式穿透在css预处理器中使用才生效。我们可以使用>>>或者/deep/解决这个问题：<style scoped>外层 >>> .el-chedkbox{ display:block; font-size:20px; .el-chexkobx__...原创 2020-06-02 13:05:21 · 554 阅读 · 0 评论 -
vue工作开发总结（二）---- 函数式组件
函数式组件是无状态的，无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加functional声明即可。一般适合只依赖外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。组件需要得一切都是通过context参书传递。它是一个上下文对象。这里的props是一个包含所有绑定属性的对象。函数式组件定义：<template functional> <div class="list"> <div class="item" v-f原创 2020-06-02 13:03:49 · 480 阅读 · 0 评论 -
vue工作开发总结（一）---- 路由参数解耦
一般在组件内使用路由参数，大多数人会这样做：export default{ methods:{ getParamsId(){ return this.$route.params.id }}在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了他的灵活性正确的做法应该是使用props解耦：const router =new VueRouter({ routes:[.原创 2020-06-02 13:01:04 · 804 阅读 · 2 评论 -
Vue中图片失效替补图片的制作方法
Vue中图片失效替补图片的制作方法 在我们工作中，有些图片失效，为了让页面不至于太难看。我们需要让他显示一张替补图片。 制作一张替补图片，如果会ps 你可以自己制作一张优雅的图片，但是尽量不要用彩色（你懂得~ . ~）或者直接在网上找一张图片 将图片放到相应的位置我们把图片命名为erroring.png放在src/assets/images/下然后我们在有图片的...原创 2018-08-13 11:27:10 · 667 阅读 · 0 评论 -
vue传参之params传参query传参
vue编程式导航，在这里我们必须要明白一个知识点，就是params和query传参的用法。 params传参，路径不能使用path，只能使用name，不然取不到传的数据。this.$router.push({name:'Good',params:{goodsId:id}})取数据时用params获取this.$route.params.goodsId query传...原创 2018-08-13 11:38:54 · 1057 阅读 · 0 评论 -
二次封装axios，根据参数来实现多个请求多次拦截
二次封装axios，根据参数来实现多个请求多次拦截1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑import Vue from 'vue'import axios from 'axios'//取消请求let CancelToken = axios.CancelToken//设置默认请求头，如果不需要可以取消这一步axios.defaults.headers...转载 2018-08-21 16:00:31 · 3265 阅读 · 0 评论 -
vue路由的mode和404页面的构建
路由的属性mode的应用mode有两个值：1.history：:当你使用 history 模式时，URL 就像正常的 url，例如 http://localhost：8080/gotu，也好看！2.hash: :默认’hash’值，但是hash看起来就像无意义的字符排列，例如http://localhost：8080/#/gotu 在router/index.js文件中...原创 2018-08-21 17:43:29 · 821 阅读 · 0 评论 -
vue开发之全屏事件
在项目中有需求相应浏览器全屏，写了个案例代码先看看效果吧全屏显示： html代码： <!-- el-tooltip 文字提示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" ...原创 2018-08-10 10:49:19 · 16456 阅读 · 16 评论 -
vue 购物车逻辑代码
<template> <div class="hello"> <div class="main"> <div v-if="hasList"> <div class="cart-box"> <div class=&qu原创 2018-08-07 15:07:09 · 1367 阅读 · 0 评论 -
vue 路由之左右滑动效果
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，我们要把它也包裹在transition标签内，否则页面将重新渲染，切换的动画也会卡顿<transition :name="transitionName"> <keep-alive> <router-view cla...原创 2018-09-14 11:07:25 · 4221 阅读 · 1 评论 -
vue2.0 proxyTable配置，解决跨域
vue浏览器跨域问题及解决办法当浏览器报如下错误时，说明请求跨域。localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-...原创 2018-09-14 12:00:16 · 4195 阅读 · 1 评论 -
Vue基础教程视频：
Vue基础教程视频：https://www.bilibili.com/video/av25142267https://www.bilibili.com/video/av25143408https://www.bilibili.com/video/av25144006https://www.bilibili.com/video/av25148349https://www.bilibili.com/v...原创 2018-10-08 10:29:22 · 1721 阅读 · 0 评论 -
uni-app列表导航组件
列表导航组件的简单封装 实现组件的公用效果图 点击可以跳转页面 图片资源http://www.iconfont.cn/search/index?q=%E7%94%A8%E6%88%B7 组件名 uni-common-go.vue<template> <view class="text-row" @tap="goto(params)...原创 2018-12-05 17:22:51 · 12001 阅读 · 2 评论 -
vue组件传值
vue组件传值-------总结1·父组件传值子组件父组件通过 :paramsName1="params1" :paramsName2="params2"的方式将值传递给子组件子组件通过 props接收参数 props{ paramsName1{ type:string, default:"默认参数1" ...原创 2018-12-06 14:08:37 · 568 阅读 · 0 评论 -
vue路由切换之淡入淡出
路由跳转的淡入淡出在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计 想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性<transition name="fade" mode="in...原创 2018-08-21 17:29:16 · 7987 阅读 · 2 评论