![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 78
Wu_967
这个作者很懒,什么都没留下…
展开
-
七、VUE基础——悦听音乐播放器案例(vue+axios)
在b站看完vue教程的悦听音乐播放器案例,有很大的收获,这里自己总结一下,由于之前不太理解弹性盒子的知识,又去b站看了另一位老师的课,也将其所给的资源下载下来发布在博客中:弹性盒子flex首先对界面功能进行分析,从上到下是搜索栏、主体部分、音频播放进度条;其中主体部分昨从到右分为音乐播放列表、黑胶碟片的歌曲图片、留言列表。一、功能总结歌曲搜索:输入歌曲的相关内容按回车键搜索数据;具体步骤为按下回车-->查询数据-->渲染数据 歌曲播放 歌曲封面 歌曲评论 播放动画 mv原创 2021-04-06 00:51:19 · 2104 阅读 · 2 评论 -
六、VUE基础——axios+vue(天知道案例)
一、vue+axios结合使用获取随机笑话在vue中使用axios发送请求,这里使用的是get请求方法,也可以使用post方法1.步骤导入vue和axios,这两个引入的先后顺序无所谓,但是一定要保证在开始写vue代码之前引入 使用v-on绑定click事件,在p标签中显示获取的笑话内容 在vue中写获取笑话的逻辑,即使用axios.get().then()方法获取随机笑话2.代码实例<!DOCTYPE html><html lang="en">.原创 2021-03-30 00:14:24 · 832 阅读 · 1 评论 -
五、VUE基础——axios基础
一、axios的作用axios是一个基于promise的http库,可以用在浏览器和node.js中axios中文文档http://www.axios-js.com/zh-cn/docs/二、axios基础使用实例1.步骤(1).导入axios(2).使用get或者post方法发送请求(3).使用then方法中的回调函数,这些函数会在请求成功或者失败时触发(4).通过回调函数的形参可以获取响应内容、错误信息2.代码实例<!DOCTYPE html&g.原创 2021-03-28 12:59:12 · 127 阅读 · 0 评论 -
四、VUE基础——记事本案例(小黑记事本)
一.分析记事本需要的功能 记事本新增事件 记事本删除事件 记事本统计事件(统计记事本中事件的数量) 记事本清空事件 记事本隐藏事件 二.记事本案例功能实现1.新增功能(1).步骤写好样式后,生成列表结构(v-for和数组) 获取用户输入(v-model) 按下回车键,新增数据(v-on.enter添加数据)(2).代码实例<!DOCTYPE html><html lang="en"><he.原创 2021-03-27 00:21:56 · 2442 阅读 · 1 评论 -
三、VUE基础——v-指令(下)
6.v-if指令(1).要点 v-if指令的作用是根**据表达式的真假切换元素的显示状态** 其本质是**通过操纵dom元素来切换显示状态** v-if表达式为true,元素存在于dom树中,为false,从dom树中移除 显示状态要频繁切换使用v-show,反之使用v-if,**前者的切换只改变display属性,消耗小;后者的切换直接将元素在dom树中删除** **(2).代码实例**(2).代码实例<!DOCTYPE html>&l...原创 2021-03-23 21:51:14 · 594 阅读 · 0 评论 -
二、VUE基础——v-指令(上)
1.v-text指令(1).要点:v-text指令用于设置标签的文本内容(textContent)v-text会替换全部的内容,使用插值表达式{{}}可以替换指定内容,一般使用插值表达式较为方便!(2).代码实例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten原创 2021-03-23 20:49:59 · 427 阅读 · 0 评论 -
一.VUE基础——初识vue
1.vue简介vue特点:JavaScript框架简化Dom操作响应式数据驱动2.第一个vue程序写vue程序所需的步骤:1.使用<script>导入vue文件,可以是下载下来的本地文件,也可以是CDN加速。本地下载网址:https://vuejs.org/js/vue.min.jsCDN加速网址:https://cdn.staticfile.org/vue/2.2.2/vue.min.js2.创建vue实例对象,设置el属性和data属性。3.使用简洁的模板原创 2021-03-21 18:34:00 · 82 阅读 · 0 评论