(一)黑马vue快速入门自学笔记

01-02.vue基础-简介

1.javascript框架

2.简化Dom操作

3.响应式数据驱动`

03.vue基础-第一个vue程序

1.文档传送门:https://cn.vuejs.org

2.步骤

(1)导入开发版本的vue.js;
(2)创建Vue实例对象,设置el属性和data属性;
(3)使用简洁的模板语法把数据渲染到页面上

<body>
    <div id="app">
        {{message}}
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>
</body>

在这里插入图片描述

04.vue基础-el挂载点

el是用来设置Vue实例挂载(管理)的元素

1.vue的作用范围

在el命中的元素内部可以被渲染
Vue会管理el选项命中的元素及其内部的后代元素

<body>
    {{message}}
    <div id="app">
        {{message}}
        <span>{{message}}</span>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>
</body>

在这里插入图片描述

2.是否可以选用其他的选择器

可以,但建议使用id选择器

3.是否可以设置其他的dom元素

可以使用其他的双标签,不能使用HTML和BODY


<body>
    {{message}}
    <div id="app" class="app">
        {{message}}
        <span>{{message}}</span>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       // el:"#app",
       // el:".app",
        el:"span",
        data:{
            message:"Hello Vue!"
        }
    })
</script>
</body>

在这里插入图片描述

05.vue基础-data数据对象

1.Vue中用到的数据定义在data中

2.data中可以写复杂类型的数据

3.渲染复杂类型数据时,遵循js的语法即可

<body>
    <div id="app">
        {{message}}
       <h2> {{school.name}} {{school.mobile}}</h2>
       <ul>
           <li>
               {{campus[0]}}
           </li>
           <li>
            {{campus[1]}}
        </li>
       </ul>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            //添加data数据对象
            data:{
                message:"你好,小黑!",
                //对象
                school:{
                    //属性
                    name:"黑马程序员",
                    mobile:"13394116601"
                },
                //数组
                campus:["北京校区","深圳校区"]
            }
        })
    </script>
</body>

在这里插入图片描述

06.本地应用-介绍

1.通过Vue实现常见的网页效果

2.学习Vue指令,以案例巩固知识点

3.Vue指令指的是,以v-开头的一组特殊语法

07.本地应用-v-text

1.v-text指令的作用:设置标签的内容(textContent)

2.默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。(如本例中”深圳的显示”)

3.内部支持写表达式(如字符串拼接)

<body>
    <div id="app">
        <h2 v-text="message+'!'">深圳</h2>
        <h2>{{message+'!'}}深圳</h2>
        <h2 v-text="info">深圳</h2>
    </div>
     <!-- 开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                message:"黑马程序员",
                info:"前端与移动教研部"
             }
         })
     </script>
</body>

在这里插入图片描述

08.本地应用-v-html指令

1.v-html指令的作用是:设置元素的innerHTML

2内容中有html结构会被解析为标签

3.v-text指令无论内容是什么,只会解析为文本

4.解析文本使用v-text,需要解析html结构使用v-html

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               content:"<a href='https://mp.csdn.net/console/home'>黑马</a>"  
             }
         })
     </script>
</body>

在这里插入图片描述

09.本地应用-v-on指令基础

1.v-on指令的作用是:为元素绑定事件

2.事件名不需要写on

3.指令可以简写为@

4.绑定的方法定义在methods属性中

5.方法内部通过this关键字可以访问定义在data中数据

<body>
    <!-- 2.html结构 -->
    <div id="app">
       <input type="button" value="v-on单击" v-on:click="doIt">
       <input type="button" value="v-on双击" v-on:dblclick="doIt">
       <input type="button" value="v-on简写" @click="doIt"> 
       <input type="button" value="v-on双击" @dblclick="doIt">
       <h2 @click="changeFood">{{food}}</h2>
    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 food:"西兰花炒蛋"
             },
            methods:{
                doIt:function(){
                    alert("执行v-on");
                },
                changeFood:function(){
                    console.log(this.food);
                    this.food+="好吃!"
                }
            },
         })
     </script>
</body>

在这里插入图片描述

在这里插入图片描述

10-本地应用-计数器

1.思路

在这里插入图片描述

  1. data中定义数据:比如num
  2. methods中添加两个方法:比如add(递增),sub(递减)
  3. 使用v-text将num设置给span标签
  4. 使用v-on将add,sub分别绑定给+,按钮
  5. 累加的逻辑:小于10累加,否则提示6.递减的逻辑:大于0递减否则提示

2.总结

  1. 创建Vue示例时:el(挂载点),data(数据),methods(方法);
  2. v-on指令的作用是绑定事件,简写为@;
  3. 方法中通过this,关键字获取data中的数据;
  4. v-text指令的作用是:设置元素的文本值简写为{{}};
  5. v-html指令的作用是:设置元素的innerHTML;
<body>
       <!-- 2.html结构 -->
    <div id="app">
       <!-- 计数器功能区 -->
       <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
       </div>
    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 编码 -->
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               num:1
             },
             methods:{
                 add:function(){
                    //  console.log("add");
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("超过10啦");
                    }
                 },
                 sub:function(){
                    //  console.log("sub");
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("到底啦");
                    }
                 }
             }
         })
     </script>
</body>

在这里插入图片描述
在这里插入图片描述

11本地应用-v-show指令

1.show指令的作用

根据真假切换元素的显示状态原理是修改元素的display,实现显示隐藏

2.后面的内容,最终都会解析为布尔值

3.true元素显示,值为false元素隐藏

4.改变之后,对应元素的显示状态会同步更新

 <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="../vue_code/img/touxiang1.jpg" alt="">
        <img v-show="age>=18" src="../vue_code/img/touxiang1.jpg" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:14
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
</script>

12本地应用-v-if指令

1.v-if指令的作用是:根据表达式的真假切换元素的显示状态

2.本质是通过操纵dom元素来切换显示状态

3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除

4.频繁的切换v-show,反之使用v-if,前者的切换消耗小

   <div id="app">
        <p v-if="true">我是一个p标签</p>
        <p v-if="isShow">我是一个p标签</p>
        <p v-if="表达式">我是一个p标签</p>

    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:false
            }
        })
    </script>

13-本地应用-v-bind指令

1.v-bind:属性名=表达式

2.v-bind指令的作用是:为元素绑定属性

3.完整写法是v-bind:属性名

4.简写的话可以直接省略v-bind,只保留:属性名

5.需要动态的增删class建议使用对象的方式

模板

<body>
     <div id="app">
         <img v-bind:src="imgSrc">
         <img v-bind:src="imgTitle"+'!!!'>
         <img  v-bind:class="{active:isActive}">
     </div>
	 <!-- 开发环境版本,包含了有帮助的命令行警告 -->
	 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 imgSrc:"图片地址",
                 imgTitle:"黑马程序员",
                 isActive:false
             }
         })
     </script>
</body>

代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13-2-本地应用-v-bind指令.html</title>
    <style>
        .active{
            border: 2px solid red;
        }
    </style>
</head>
<body>
      <!-- 2.html结构 -->
      !--:class="{active:isActive}":active是否生效取决于isActive的值 -->
      <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" :title="imgTitle+'显示'" :class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" :title="imgTitle+'显示'" :class="{active:isActive}" @click="toggleActive">
    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               imgSrc:"../img/touxiang1.jpg",
               imgTitle:"头像",
               isActive:false
             },
             methods:{
                 toggleActive:function(){
                     this.isActive=!this.isActive;
                 }
             }
         })
     </script>
</body>
</html>

14-本地应用-图片切换

思路

在这里插入图片描述

1.列表数据使用数组保存
2.v-bind指令可以设置元素属性,比如src
3.v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14-本地应用-图片切换</title>
    <link rel="stylesheet" href="../css/index.css" />
    <style>
        .active{
            border:6px solid green;
        }
    </style>
</head>
<body>
      <!-- 2.html结构 -->
      <div id="mask">
          <img :src="imgArr[index]" alt="头像">
          <br>
          
          <span class="prev" v-show="index!=0" @click="prev"><</span>
          <span class="next"  v-show="index<imgArr.length-1" @click="next">></span>
      </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#mask",
             data:{
               imgArr:[
                   "../img/touxiang1.jpg",
                   "../img/touxiang2.jpg",
                   "../img/touxiang3.jpg",
                   "../img/touxiang4.jpg",
                   "../img/touxiang5.jpg",
                   "../img/touxiang6.jpg",
               ],
               index:0,
             },
             methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
             }
         })
     </script>
</body>
</html>

15-本地应用-v-for

模板

<div id="app">
          <ul>
             <li v-for="(item,index) in arr" :title="item">
             {{ index }}{{ item }}
            </li>
             <li v-for="(item,index) in objArr">
             {{ item.name }}
            </li>
          </ul>
</div>

var app = new Vue({
            el: "#app",
            data: {
              arr: [1, 2, 3, 4, 5],
              objArr: [
                { name: "jack" }, 
                { name: "rose" }
                ]
            }
          })

1.v-for指令的作用是:根据数据生成列表结构

2.数组经常和v-for结合使用

3.语法是( item,index ) in数据

4.item和index可以结合其他指令- -起使用

5.数组长度的更新会同步到页面上,是响应式的

  <!-- 2.html结构 -->
      
    <div id="app">
        <input type="button" value="添加数据"  @click="add">
        <input type="button" value="移除数据"  @click="remove">
       <ul>
           <li v-for="(it,index) in arr">{{index+1}}黑马程序员校区:{{it}}</li>
       </ul>
       <h2 v-for="it in vegetables" v-bind:title="it.name">{{it.name}}</h2>
    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               arr:["北京","上海","深圳"],
               vegetables:[
                   {name:"西兰花炒蛋"},
                   {name:"蛋炒西兰花"}
               ]
             },
             methods:{
                 add:function(){
                     this.vegetables.push({name:"西红柿炒鸡蛋"});
                     console.log("西兰花炒蛋");
                 },
                 remove:function(){
                     this.vegetables.shift();
                 }
             }
         })
     </script>

效果:
在这里插入图片描述

16-本地应用-v-on补充

1.事件绑定的方法写成函数调用的形式,可以传入自定义参数

2.定义方法时需要定义形参来接收传入的实参

3.事件的后面跟上.修饰符可以对事件进行限制

4. .enter可以限制触发的按键为回车

###5.事件修饰符有多种:https://cn.vuejs.org/v2/api/#v-on

模板

<div id="app">
              <input type="button" @click="doIt(p1,p2)" />
              <input type="text" @keyup.enter="sayHi">
      </div> 
var app = new Vue({
                el: "#app",
                methods: {
                  doIt: function(p1,p2) {},
                  sayHi:function(){}
                }
              })

使用:


  <!-- 2.html结构 -->
    <div id="app">
       <input type="button" value="点击" @click="doIt(666,'a')">
       <input type="text" @keyup.enter="sayHi">

    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             methods:{
              doIt:function(p1,p2){
                  console.log("做it");
                  console.log(p1,p2);
              },
              sayHi:function(){
                  alert("吃了没");
              }
             }
         })
     </script>

在这里插入图片描述

17-本地应用-v-model

### 1.v-model:获取和设置表单元素的值(双向数据绑定)
### 2.v-model指令的作用是便捷的设置和获取表单元素的值
### 3.绑定的数据会和表单元素值相关联
### 4.绑定的数据←→表单元素的值

   <!-- 2.html结构 -->
    <div id="app">
       <input type="text" v-model="message" @keyup.enter="getMessage" />
       <input type="button" v-model="message" @click="setMessage" />
       <h3>{{message}}</h3>
    </div>
     <!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               message:"黑马程序员"
             },
             methods:{
                 getMessage:function(){
                     alert(this.message)
                 },
                 setMessage:function(){
                     this.message="直接修改message的值";
                 }
             }
         })
     </script>

在这里插入图片描述
在这里插入图片描述

18-23本地应用-小黑记事本

1.新增

1. 生成列表结构(v-for和数组)
2. 获取用户输入(v-model)
3. 回车,新增数据(v-on .enter 添加数据)
4.总结
  1. v-for指令的作用
  2. v-model指令的作用
  3. v-on指令,事件修饰符
  4. 通过审查元素快速定位

2.删除

1.数据改变,和数据绑定的元素同步改变
2.事件可以接收自定义的参数
3.splice的作用:根据索引删除对应元素

3.统计

1.基于数据的开发方式
2.v-text指令是设置文本,也可以用插值表达式{{}}

4.清空

1.基于数据的开发方式-清空数组即可

5.隐藏

没有数据时,隐藏元素(数组非空时v-if v-show )

6.总结

1. 列表结构可以通过v-for指令结合数据生成
2. v-on结合事件修饰符可以对事件进行限制,比如.enter
3. v-on在绑定事件时可以传递自定义参数
4. 通过v-model可以快速的设置和获取表单元素的值
5. 基于数据的开发方式
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <input
        v-model="inputValue"
        @keyup.enter="add"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo"v-for="(item,index) in list">
            <div class="view">
              <span class="index">{{ index+1 }}.</span> 
              <label>{{item}}</label>
              <button @click="remove(i)" class="destroy"></button>
            </div>
          </li>
          
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count" v-show="list.length!=0" > <strong>{{ list.length }}</strong> items left </span>
        <button v-if="list.length!=0" @click="clear" class="clear-completed">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.itheima.com/"
          ><img src="./img/black.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭饭","睡觉觉"],
                inputValue:"好好学习,天天向上"
            },
            methods:{
                add:function(){
                    this.list.push(this.inputValue)
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })
    </script>

  </body>
</html>

24-网络应用-介绍

1.Vue结合网络数据开发应用

2.axios-网络请求库

3.axios+vue-结合Vue一起

4.天气预报案例

25-网络应用- axios基本使用

要点

1.axios:功能强大的网络请求库
2.axios必须先导入才可以使用
3.使用get或post方法即可发送对应的请求
4.then方法中的回调函数会在请求成功或失败时触发
5.通过回调函数的形参可以获取响应内容,或错误信息
6.文档传送门:https://github.com/axios/axios
7.axios官网文档:http://www.axios-js.com/zh-cn/docs/
在这里插入图片描述

模板:

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>25-网络应用- axios基本使用</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
         document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"阿香"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

    </script>
</body>
</html>

26-网络应用- axios与vue结合使用

1.axios回调函数中的this已经改变,无法访问到data中数据

2.把this保存起来,回调函数中直接使用保存的this即可

3.和本地应用的最大区别就是改变了数据来源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>26-网络应用- axios与vue结合使用</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
       var app=new Vue({
           el:"#app",
           data:{
               joke:"笑话显示区域",
               
           },
           methods:{
               
               getJoke:function(){
                   console.log(this.joke);
                  var that=this;
                   axios.get("https://autumnfish.cn/api/joke")
                   .then(function(response){
                       console.log(response);
                       console.log(response.data);
                       console.log(this.joke);
                       that.joke=response.data;
                   },function(err){
                       console.log(err);
                   })
               }
           }
       })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

27-网络应用-天知道-回车查询

注:

27-29为网络应用-天知道,代码后期整理打包到gitee再放到此处
在这里插入图片描述

1. 按下回车(v-on .enter)

2. 查询数据(axios 接口 v-model )

3. 渲染数据(v-for 数组 that)

应用的逻辑代码建议和页面分离,使用单独的js文件编写
axios回调函数中this指向改变了,需要额外的保存一份
服务器返回的数据比较复杂时,获取的时候需要注意层级结构

28-网络应用-天知道-点击查询

1. 点击城市(v-on 自定义参数)

2. 查询数据(this.方法())

3. 渲染数据

自定义参数可以让代码的复用性更高
methods中定义的方法内部,可以通过this关键字点出其他的方法

30-综合应用(音乐播放器)-介绍

注:

30-31综合应用-音乐播放器
代码地址:https://gitee.com/pan-maoxiang/music_vue.git

介绍

1.歌曲搜索
2.歌曲播放(点击按钮播放)
3.歌曲封面
4.歌曲评论
5.播放动画
6.mv播放

31-综合应用-歌曲搜索

1. 按下回车(v-on .enter)

2. 查询数据(axios 接口 v-model )

3. 渲染数据(v-for 数组 that)

31-综合应用-歌曲播放

1. 点击播放(v-on 自定义参数)

点击播放按钮:播放歌曲的本质就是设置歌曲的src,切换歌曲就是更换不同的src,歌曲的地址从network查看,歌曲地址是通过接口获取到的,获取歌曲地址后找到歌曲播放地址,将播放地址存到data的musicUrl字段中,再传给给audio标签;
注:点击时需要传入参数,从接口获得的歌曲的点击事件才会才会被绑定。

2. 歌曲地址获取:

根据接口确定一个传递的参数(歌曲id),搜索出的歌曲时服务器返回的结果数组中每一项都有歌曲id,不同歌曲id不同,但查询逻辑是一样的;(总:接口调用,把所需的参数传过去)

3. 歌曲地址设置(v-bind)

data中增加歌曲属性,歌曲id依赖与歌曲的搜索结果,v-bind绑定到播放条中。

32-综合应用-歌曲封面

35-综合应用-播放动画

1. 监听音乐播放(v-on play)

核心:增删一个类
播放时碟片旋转,暂停时停时旋转,检测动画的播放状态,在对应的事件中增删类名,

2. 监听音乐暂停(v-on pause)

3. 操纵类名(v-bind 对象)

audio标签的play事件会在音频播放的时候触发
audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名,类名生效与否取决于后面值的真假

36-综合应用-播放mv

1. mv图标显示(v-if)

2. mv地址获取

3. 遮罩层

4. mv地址设置

Logo

前往低代码交流专区

更多推荐