基于Vue&Axios制作音乐播放器(bilibili黑马程序员Vue入门学习记录)

目录

使用Vue制作一个音乐播放器

前言

Vue

Vue导入

Vue挂载

Vue指令

v-text

v-html

v-on

v-show

v-if

v-bind

v-for

v-model

axios 

axios导入

axios使用

音乐网站代码 

HTML

CSS

JS

---

使用Vue制作一个音乐播放器

前言

第一次写，如有不足请指正！

音乐播放器效果展示音乐播放器（密码：He371226）（域名出了点问题，临时使用）

学习链接：黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili

Vue

Vue导入

将vue导入进项目

Vue挂载

通过el挂载点将Id相互绑定起来，data为其中个人定义的一些值，methods中为个人定义的函数，Vue会管理el选项命中的元素及其内部的后代元素，不能使用HTML和BODY

Vue指令

v-text

通过v-text可以设置标签的文本值（textContent）有两种写法：1.v-text="(data中的message)" 2.{ { data中的message }}，第一种替换全部，都可采用字符串拼接。

      
      
西安{
  { message + "! "}}
    

v-html

设置标签的innerHTML，内容中有html结构会被解析为标签

其中       v-on:click="sayHello"    也可以用  @click="sayHello"    代替

@click.revent   可以阻止默认事件，比如a标签的跳转

@click.stop  可以阻止事件冒泡

@click.once 指定点击行为只能使用一次

v-show

根据表达值的真假,切换元素的显示和隐藏，原理是修改元素的display,实现显示隐藏，值为true元素显示,值为false元素隐藏，数据改变之后,对应元素的显示状态会同步更新

      //显示
      //不显示
    

v-if

根据表达值的真假,切换元素的显示和隐藏，本质是通过操纵dom元素来切换显示状态，表达式的值为true,元素存在于dom树中,为false,从dom树中移除

      我是一个p标签
//显示
      <