YoloAva-优快云博客

原创 React 组件传值-子传父

【代码】React 组件传值-子传父。

2025-01-06 17:27:48 96

原创 React 组件传值-父传子

【代码】React 组件传值-父传子。

2025-01-06 17:00:25 97

原创 Git 笔记

桌面右键 => git bash1.安装https://git-scm.com/在终端测试： git 或 git --version2.创建仓库https://gitee.com/projects/new*填写信息时，Readme打勾

2022-02-09 13:06:58 326

原创 node.js和npm的安装与环境配置 + Vue创建项目

node.js:node.js和npm的安装与环境配置（2021最新版）_小绵杨-优快云博客_npm安装Vue-cli 3.0新版本脚手架--全局安装 npm install -g @vue/cli (sudo npm install -g @vue/cli)--卸载 npm uninstall @vue/cli -g vue 4.X 创建项目：去文件夹下 vue create 项目名称?please pick a preset: mannually select fe

2022-02-08 22:05:59 730

原创 VScode 插件、自定义配置快捷生成vue模板代码

1、 Chinese Language ：中文汉化包，设置后会提示重启 2、 Bracket Pair Colorizer ：设置括号颜色，方便嵌套的时候区分结构 3、 Auto rename Tag ：标签补全 5、 HTML CSS support：在编写样式表的时候，自动补全功能大大缩减了编写时间 6、 JavaScript (ES6) code snippets：提供ES6的语法支持 8、 Live server ：右键可以快速在浏览器中打开我们的...

2022-02-08 21:50:19 1038

原创 Vue项目消息页面未读变已读、传数组、处理时间的函数、页面刷新

MessageItem.vue 子组件<template> <div class="my-course-content"> <div style="width: 980px" v-if="messList && messList.length > 0"> <div class="course-main" style="width: 980px"> <div cl...

2022-02-07 19:09:55 2708 1

原创 Vue项目我的课程页面—渲染课程列表（父传子、el-tabs、封装分页器）

效果：utils > scroll-to.js （目的：重新请求数据时，自动滑动到顶部）Math.easeInOutQuad = function(t, b, c, d) { t /= d / 2 if (t < 1) { return c / 2 * t * t + b } t-- return -c / 2 * (t * (t - 2) - 1) + b}// requestAnimationFrame for Smart Animat..

2022-02-07 17:24:21 1067

原创 Vue项目用户登录状态持久存储（即使刷新）

本地存储 isLogin 登录状态并保存到vuexHeader.vue<div class="content-login-success" v-if="isLogin"> <div style="cursor: pointer">我的课程</div> <div @mouseenter="isUserInfo = true">

2022-01-31 18:46:22 1871

原创 Vue项目提交登录表单2.0 Loading动画 + aes.js + token + vuex存个人信息 + 时间戳（结束时间-当前时间）

<el-form :model="phoneForm" ref="phoneFormRef" class="demo-ruleForm" > <el-form-item prop="username" class="captcha"> <el-input ..

2022-01-31 10:49:45 823

原创 Vue项目提交登录表单1.0 正则 + token

<template> <div class="login_container"> <div class="login_box">  <div class="avatar_box"> <img src="@/assets/lanmao.png" alt="" /> </div> <!-- 登录表单区域需要去plugi.

2022-01-31 10:08:58 594

原创 Vue项目会员页字符串转对象

后端数据为字符串：[{"label":"每天免费学课程","icon":1},{"label":"W3C标准技术","icon":1},{"label":"快捷易懂的学习方式","icon":1},{"label":"在线实例测试工具","icon":1},{"label":"自律的学习模式","icon":1}]方法：item.interests = JSON.parse(item.interests);Member.vue &.

2022-01-30 11:47:37 736

原创 Vue项目课程筛选方向、分类、难度、最新、最热、价格升降

CourseMain.vue<template> <div class="coursemain"> <div class="course-main"> <section class="search-container"> <div class="search-item"> <div class="title-name">课程方向：</div> ...

2022-01-29 20:58:03 715

原创 Vue项目播放器插件 vue-video-player

vue-video-player - npm1.安装npm install vue-video-player --save2.main.js 引入>import VueVideoPlayer from 'vue-video-player'window.videojs = VueVideoPlayer.videojsrequire('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css

2022-01-29 10:51:47 625

原创 Vue项目课程列表页跳转课程详情页跳转视频播放页

课程列表页Coursemain.vue 跳转至课程详情页  <div class="container-body" v-if="courseArr && courseArr.length > 0"> <div class="newCourseContent"> <ul class="courseUl"> <li

2022-01-28 21:55:45 822

原创 Vue项目 watch监听路由地址

Header.vue<template>  <div class="header"> <div class="index-header"> <div class="header-content">  <div class="content-logo"> <img src="/

2022-01-28 17:53:59 623

原创 Vue项目 $set forEach+SwitchCase 免费/会员/收费课程接口

components>index>NavSwiper.vue<template> <div class="navswiper"> <div class="navSwiperContent"> <div class="navigation"> <ul> <li v-for="(item, index) in categorys"

2022-01-27 21:58:24 436

原创 Vue项目 App.vue引用公共样式以及一些行内样式写法

App.vue<template> <div id="app">  <!-- <h1>{{ msg }}</h1> <p> <router-link to="/">Home</router-link> | <router-link to="/about"&g

2022-01-26 21:42:47 1342

原创 Vue项目 vue.config.js配置 & request.js一次封装axios

vue.config,jsmodule.exports = { publicPath: './', lintOnSave: false,//每次保存代码的时候是否启动eslint devServer: { host: '127.0.0.1', port: 8080, open: true,//项目启动时自动打开浏览器 proxy: { '/api': {// '/api'时代理的标识，告诉node url前面的/api是使用代理的

2022-01-26 21:39:28 796

原创 Uni-app 详情页播放视频功能

逻辑：1.课程详情页加载后，用token判断用户是否登录，登录状态则调用//查询课程是够有播放的权限的接口（只传入courseId），后端会返回hasAuth为true/false2.点击某一章节时，登录状态则调用//查询课程是够有播放的权限的接口（这次要传入courseId & chapterId），后端会返回hasAuth为true/false和videoId，如果这俩都有，则跳页面到视频播放页3.跳转到视频播放页，请求课程详情接口、视频播放接口（传入courseId & c

2022-01-12 19:31:16 5366 3

原创 JS 简单的数组去重方法

//1.new Setvar arr1 = [1,2,3,2,4,1]console.log(Array.from(new Set(arr1)))console.log([...new Set(arr1)])//封装成函数var arr1 = [1,2,3,2,4,1]function unique(arr){ return [...new Set(arr)]}console.log(unique(arr1))//2.indexOfvar arr2 = [1,2,3,2,4,1].

2022-01-11 21:43:12 145

原创 Uni-app 订单页下拉加载更多

订单页面下拉加载逻辑：1.给每个Tab绑定滑动触底事件reachBottom(currentIndex)，传入了currentIndex。在函数内判断：为哪个index，并且对应数组比如orderTotal > this.orderList.length，这就说明可以加载更多，就==》pageNum++；并调用查询订单的接口this.__init()。2.接口返回200后有个判断：若pageNum=1，将请求到的list直接赋值；若pageNum>1，就用p...

2022-01-11 19:46:00 1691

原创 Uni-app 结算页支付逻辑

场景：在购物车页面，用户选中了商品，点击结算，则跳转到结算页面1.在结算页面初加载时 =》发送获取支付方式的请求前端：传商品id(token一直带在请求头里) 后端：商品信息、总价、拿到**可选的支付方式2.用户选择支付方式后，点击确认订单时 =》发送获取订单号的请求前端：传支付方式、商品id 后端：拿到**订单号orderinfo3.紧接着，在.then中判断res.meta.code===‘200’，就使用uni-app提供的uni.requestPayment...

2022-01-10 16:37:40 1881

原创 Uni-app 购物车页面获取购物车数据全选单选合计删除

shopCart.vue<template> <view class="shopCart"> <u-navbar title="购物车" class="header"> <view class="slot-wrap" slot="right" @tap="goEdit">{{rightNav}}</view> </u-navbar> <scroll-view scroll-y="true" :style=

2022-01-09 19:03:04 1910

原创 Uni-app 课程详情页获取课程详情 + 收藏 + 加入购物车

class-detail.vue ><template> <view class="class-detail">  <u-navbar title=""> <view class="header-right" slot="right"> <u-icon @tap="goCollected" v-if="isCollected" name="star-fill"

2022-01-09 11:20:29 1106

原创 Vue 组件传值父传子、子传父、兄弟传值

一.父组件 ==》子组件：父组件请求一次数据，把子组件需要的数据分别传给他们 1. 父组件：标签中传递数据 <user-detail :myName="name" /> export default { components: { UserDetail } ...... } 2. 子组件：使用props（可以是数组也可以是对象）接收即可。可以传多个属性。 ...

2022-01-08 15:22:17 438

原创 Uni-app + uview 个人信息页修改用户昵称、性别、个性签名

Profile.vue ><template> <view class="profile"> <u-navbar title="个人信息" :background="background"> </u-navbar>  <u-cell-group class="profile-content">  &l

2022-01-07 11:42:08 6829

原创 Uni-app + uview 个人信息页上传、剪裁头像至服务器

AvatarCropper 头像裁剪 | uView - 多平台快速开发的UI框架 - uni-app UI框架profile.vue ><template> <view class="profile"> <u-navbar title="个人信息" :background="background"> </u-navbar>  <u-cell-group ..

2022-01-06 19:07:23 2601

原创 Vue + echarts 实现文章类型数量统计

npm i echarts@4.9.0 --saveHandbook - Apache EChartsmain.js引入import Vue from 'vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'import router from './router/index'import echarts from

2022-01-05 20:07:22 472

原创 Uni-app 手机号+验证码登录 & 用户名密码登录登出

mine.vue > mine (tab页) 在此页面点击登陆跳转到login.vue<template> <view class="mine"> <u-navbar :is-back="false" :background="background" :border-bottom="false"> <view slot="right"> <view class="right-content">

2022-01-05 17:09:15 6291 4

原创 Vue + wangeditor 富文本提交图片文章

<template> <div> <div style="padding: 20px"> <el-button type="primary" @click="upText">提交</el-button> </div> {{ accountInfo.profile.name }} <div class="tit.

2022-01-04 17:16:37 453

原创 Uni-app 实现历史搜索和热门搜索 unshift和splice方法

<template> <view class="search"> <u-navbar> <view slot="default"> <view class="nav-center"> <u-search v-model="keyword" placeholder="Vue" :show-action="true" action-text="取消" :clearabled="fals.

2022-01-04 11:26:09 1759

原创 Vue + Js 处理时间格式

原本的时间格式如：Wed Jan 19 2022 00:00:00 GMT+0800 (中国标准时间)改为：2022-1-19代码：addUser(){ this.form.birthday = this.setTime(this.form.birthday);//调用 console.log(this.form.birthday);//Wed Jan 19 2022 00:00:00 GMT+0800 (中国标准时间) ＝》 2022...

2022-01-03 16:06:53 744

原创 Vue 父传子不能在子中直接改变父的值只能通过接收父的方法在父中改变值

父——info.vue:<template> <div class="info"> <p>账户信息：{{ accountInfo.profile.account }}</p> <p> 修改密码： <span @click="typeBoolean = true" style="color: deepskyblue"> 修改密码

2021-12-31 15:38:29 541

原创 Vuex + modules 管理导航菜单和帐号信息

请求到菜单数据后，存到vuex中，方便后期使用。home.vue组件部分代码：<template> <div> <el-container>  <el-aside style="width: auto"> <el-menu default-active="1-4-1" class="el-

2021-12-31 10:40:42 470

原创 Vuex state,getters,mutations,actions用法

首先在main.js中引入vuex:import Vue from 'vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'import router from './router/index'import store from './store/index'//全局使用Vue.use(ElementUI);new

2021-12-30 14:36:13 619

原创 Vue + 项目优化路由懒加载（含路由守卫代码）

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。1 安装 @babel/plugin-syntax-dynamic-import 包2 在 babel.config.js 配置文件中声明该插件。//这是项目发布阶段需要用到的babel插件const prodPlugins = []if (process.env.NODE_ENV === 'prod...

2021-12-27 19:02:39 281

原创 Vue + 项目优化通过externals加载外部CDN资源

问题：生成打包报告时，终端vue ui指令，通过可视化UI面板查看报告，在可视化的UI面板中，通过控制台和分析面板，看到项目中所存在的问题echarts,element-ui,quill等依赖项所占体积太大控制台中显示，第三方依赖项占项目总资源的90%体积；速度统计面板，不同网络状态下，项目打开所消耗的时间都比较长；chunk-vendor.js文件占了1.9MB ，需要缩小这个文件的大小原因：默认情况下，通过import语法导入的第三方依赖包，最终会被打包...

2021-12-27 18:28:36 552

原创 Vue + 项目优化为开发模式与生产模式指定不同的打包入口

默认情况下，vue项目的开发模式和生产模式共用一个打包的入口文件——src/main.js，为了将项目的开发过程与生产过程分离，我们可以分为两种模式，各自指定打包的入口文件：main-dev.js和main-prod.js，将src/main.js重命名为main-dev.js，并复制一份main-prod.js 在vue.config.js中通过chainWebpack节点自定义打包入口module.exports = { lintOnSave: false, chainWebpack: c

2021-12-27 18:02:36 706

原创 Vue + 项目优化 build阶段使用babel插件将console.log相关代码移除

官网：babel-plugin-transform-remove-console - npm1. npm install babel-plugin-transform-remove-console --save-dev2. 根目录下babel.config.js >module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component',

2021-12-27 17:04:39 382

原创 Vue + element-ui + echarts

<template> <div>  <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item&gt.

2021-12-27 16:39:02 624

空空如也

空空如也