Vue基础
学习B站UP “老陈打码” 的“VUE3最新最全实战项目2021课程”做的笔记
链接:https://www.bilibili.com/video/BV1E64y1t7te
Zhichao_97
文章对您有用的话,还麻烦老哥们点点免费的关注和赞呀~
展开
-
【ECharts】仪表盘指针自定义形状
【ECharts】仪表盘指针自定义形状原创 2023-10-16 18:30:34 · 3454 阅读 · 0 评论 -
【vue】this.$alert、this.$confirm的简单使用
【vue】this.$alert、this.$confirm的简单使用原创 2023-06-14 14:16:19 · 8960 阅读 · 0 评论 -
判断el-input和el-input-number绑定的值是否为空
判断el-input和el-input-number绑定的值是否为空原创 2023-06-14 11:51:21 · 617 阅读 · 0 评论 -
【CSS】超出长度显示省略号
【CSS】超出长度显示省略号原创 2023-06-14 11:18:15 · 317 阅读 · 0 评论 -
使用axios将表单数据提交flask后台 案例
使用axios将表单数据提交flask后台 案例原创 2023-05-19 16:27:13 · 220 阅读 · 0 评论 -
【vue 基础】房贷计算器案例(无样式)
【vue 基础】房贷计算器案例(无样式)原创 2023-05-18 10:42:39 · 660 阅读 · 0 评论 -
【vue 基础】12 watch侦听属性的基本使用
【vue 基础】12 watch侦听属性的基本使用原创 2023-05-17 13:40:40 · 83 阅读 · 0 评论 -
【vue 基础】11 computed计算属性的基本使用
【vue 基础】11 computed计算属性的基本使用原创 2023-05-17 11:44:34 · 207 阅读 · 0 评论 -
【vue 基础】10 v-model的基本使用
一、在单行/多行文本中使用二、在复选框中使用三、在单选框中的使用四、在下拉框中的使用五、修饰符原创 2023-05-17 10:56:25 · 166 阅读 · 0 评论 -
【vue 基础】09 v-for的基本使用
【vue 基础】09 v-for的基本使用原创 2023-05-17 09:22:32 · 108 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-10-Search模块中商品分类与过渡动画
【Vue 基础】尚品汇项目-10-Search模块中商品分类与过渡动画原创 2023-05-05 14:57:46 · 454 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-09-三级联动的路由跳转和传参
【Vue 基础】尚品汇项目-09-三级联动的路由跳转和传参原创 2023-05-05 10:37:51 · 161 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-08-三级联动动态背景颜色
【Vue 基础】尚品汇项目-08-三级联动动态背景颜色原创 2023-05-04 18:04:47 · 152 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-07-动态展示三级联动数据
【Vue 基础】尚品汇项目-07-动态展示三级联动数据原创 2023-05-04 16:10:46 · 493 阅读 · 1 评论 -
【Vue 基础】尚品汇项目-06-vuex模块式开发
【Vue 基础】尚品汇项目-06-vuex模块式开发原创 2023-05-04 14:17:39 · 481 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-05-nprogress进度条的简单使用
【Vue 基础】尚品汇项目-05-nprogress进度条的简单使用原创 2023-05-04 10:25:09 · 123 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-04-axios二次封装
【Vue 基础】尚品汇项目-04-axios二次封装原创 2023-05-04 09:50:40 · 106 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-03-home首页搭建(全局组件与局部组件)
【Vue 基础】尚品汇项目-03-home首页搭建(全局组件与局部组件)原创 2023-04-27 10:32:00 · 526 阅读 · 0 评论 -
【Vue 基础】尚品汇项目-02-路由组件的搭建
【Vue 基础】尚品汇项目-02-路由组件的搭建原创 2023-04-26 15:07:57 · 664 阅读 · 0 评论 -
【Vue 基础】vue-cli初始化项目及相关说明
1. 创建项目2. 项目文件介绍3. 项目的其它配置3.1 项目运行时,让浏览器自动打开3.2 关闭eslint校验功能3.3 src文件夹简写方法原创 2023-04-26 10:20:29 · 953 阅读 · 0 评论 -
【Vue 基础】08-键盘事件
【Vue 基础】08-键盘事件原创 2023-04-25 19:24:23 · 669 阅读 · 0 评论 -
【Vue 基础】07-事件修饰符
【Vue 基础】07-事件修饰符原创 2023-04-25 18:53:15 · 76 阅读 · 0 评论 -
【Vue 基础】06-按钮点击事件
【Vue 基础】06-按钮点击事件原创 2023-04-25 15:46:10 · 789 阅读 · 0 评论 -
【Vue基础】05-理解MVVM
【Vue基础】理解MVVM原创 2023-04-25 14:52:24 · 101 阅读 · 0 评论 -
【Vue 基础】04-挂载与data两种写法
【Vue 基础】04-挂载与data两种写法原创 2023-04-25 14:20:56 · 228 阅读 · 0 评论 -
【Vue 基础】03-数据绑定
【Vue 基础】03-数据绑定原创 2023-04-25 13:37:59 · 275 阅读 · 0 评论 -
【Vue 基础】02-模板语法
【Vue 基础】02-模板语法原创 2023-04-25 11:48:49 · 76 阅读 · 0 评论 -
【Vue 基础】01-初识Vue
【Vue 基础】01-初识Vue原创 2023-04-25 11:16:54 · 80 阅读 · 0 评论 -
vue 音乐软件完结篇
效果:基于vue的音乐软件程序资源:musicapp源程序-Javascript文档类资源-CSDN下载原创 2022-04-13 21:58:09 · 397 阅读 · 0 评论 -
vue 跳转链接前进行判断
例子:比如,现在想进入“个人中心”前判断用户是否登录,登录就直接进入/me,未登录就进入/login代码:import { createRouter, createWebHistory } from 'vue-router'import HomeView from '../views/HomeView.vue'import store from '@/store/index.js'const routes = [ { path: '/me', name: 'me原创 2022-04-12 19:55:39 · 1165 阅读 · 0 评论 -
vue input回车执行
// v-model实现表单数据searchKeyword的双向绑定// @keydown.enter表示回车执行saveKeyWord方法<input type="text" v-model="searchKeyword" :placeholder="placeholder" @keydown.enter="saveKeyWord"> data:function () { return { searchKeyw.原创 2022-03-25 17:12:45 · 5513 阅读 · 0 评论 -
vue 切换元素样式
比如我要通过点击按钮来实现图片是否在旋转,效果如下:实现::class="{active: 布尔值}"<img class="playImg" :class="{active: isPlay}" :src="playDetail.al.picUrl">然后设置两个不同的css:.playImg{ width: 3.4rem; height: 3.4rem; border-radius: 1.7rem; position: absolute;原创 2022-03-24 20:24:19 · 1103 阅读 · 0 评论 -
获取Promise{<pending>}的值
问题:我使用如下代码let lyric = getLyric(this.$store.state.songId);console.log(lyric)获取到的结果:如果直接console.log(lyric.data),会输出undefined解决:let lyric = getLyric(this.$store.state.songId);let a = lyric.then((res)=>{ console.log(res.data)});.原创 2022-03-24 13:51:34 · 4441 阅读 · 3 评论 -
实现音乐播放 (音乐app项目-第11步)
在上一节(全局播放控件 (音乐app项目-第10步))基础上,继续实现音乐播放的效果如下:音乐播放器流程:1.修改全局变量(index.js):import { createStore } from 'vuex'export default createStore({ state: { playlist:[ { name:"卡农(音乐盒版)", id:29802386, al...原创 2022-03-23 17:18:33 · 637 阅读 · 0 评论 -
全局播放控件 (音乐app项目-第10步)
在上一节播放控件 (音乐app项目-第9步)的基础上,希望播放控件能够在所有页面显示,效果如下:流程:1.修改index.html加上如下代码,防止postion:fixed失效:<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">2.增加store>index.js,用于存储全局变量 播...原创 2022-03-23 14:10:02 · 1065 阅读 · 0 评论 -
Vue 修改和使用全局变量
在如下路径中新建index.js用于存储全局变量:index.js代码如下,这里定义了两个变量,playlist和playCurrentIndex,import { createStore } from 'vuex'export default createStore({ state: { playlist:[ {al:{},} ], playCurrentIndex:0, }, getters: { }, mutation.原创 2022-03-22 21:25:51 · 4208 阅读 · 0 评论 -
播放控件 (音乐app项目-第9步)
在上一节(歌单详情内容-播放列表 (音乐app项目-第8步))基础上继续实现播放控件,效果如下:流程:1.新建组件playController.vue:playController.vue:<template> <div class="playController"> <div class="left"> <img class="songPhoto" :src="playlist...原创 2022-03-22 19:44:09 · 350 阅读 · 0 评论 -
歌单详情内容-播放列表 (音乐app项目-第8步)
在上一节歌单详情内容-图标列表 (音乐app项目第7步)的基础上,继续实现歌单详情内容-播放列表,效果如下图标注区域所示:流程:1.新建组件playList.vueplayList.vue:<template> <div class="playlist"> <div class="playlist-top"> <div class="left"> ...原创 2022-03-22 14:48:28 · 436 阅读 · 0 评论 -
歌单详情内容-图标列表 (音乐app项目-第7步)
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示:流程:1.在iconfont官网添加所需图标至项目2.点击复制上图中更新后的链接,替换在index.html中链接3.修改listViewTop.vue,代码如下:<template> <div class="listViewTop"> <img cla...原创 2022-03-21 20:23:29 · 581 阅读 · 0 评论 -
歌单详情内容-顶部 (音乐app项目-第6步)
上一节:歌单详情内容-顶部-滤镜处理 (音乐app项目-第5步)_Zhichao_97的博客-CSDN博客本节要实现的效果如下图所示:流程:继续修改listViewTop.vue的代码如下:<template> <div class="listViewTop"> <img class="bg" :src="playlist.coverImgUrl"> <div class="listViewTop..原创 2022-03-21 18:35:08 · 247 阅读 · 0 评论