vue入门
John_Frod Lv4
2021-02-12 22:09:26

vue入门


一、vue基础

1.1 vue简介

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动

1.2 第一个vue程序

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

  • 导入开发版本的 Vue.js
  • 创建 Vue 实例对象，设置 el 属性和 data 属性
  • 使用简洁的模板语法把数据渲染到页面上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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:"你好，john！"
        }
    })
</script>
</body>
</html>

1.3 el：挂载点

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

Vue 实例的作用范围是什么呢？

​ Vue 会管理 el 宣子昂命中的元素及其内部的后代元素

是否可以使用其他选择器？

​ 可以使用其他选择器，但是建议使用 ID选择器

是否可以设置其他的 dom 元素呢？

​ 可以使用其他的双标签，不能使用 html 和 body

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2 id="app" class="app">
    {{message}}
    <span>{{message}}</span>
</h2>
<script>
    var app = new Vue({
        // el:"#app",
        // el:".app",
         el:"div",
        data:{
            message:"el:挂载点！"
        }
    })
</script>
</body>
</html>

1.4 data：数据对象

  • Vue 中用到的数据定义在 data 中
  • data 中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守 js 的语法即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <h2>{{school.name}} {{school.moblie}}</h2>
    <ul>
        <li>{{campus[0]}}</li>
        <li>{{campus[2]}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            message: "hello world",
            school:{
                name:"szu",
                moblie:"888888"
            },
            campus:["丽湖校区","粤海校区","沧海校区"]
        }
    })
</script>
</body>
</html>

二、本地应用

2.1 内容绑定，事件绑定

v-text

  • v-text 指令的作用时：设置标签的内容（textContent）
  • 默认写法会替换全部内容，使用差值表达式可以替换指定内容
  • 支持写表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-text="message+'!'">sz</h2>
    <h2 v-text="info+'!'">sz</h2>
    <h2>{{message+'!'}}sz</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"v-text!!!",
            info:"information"
        }
    })
</script>
</body>
</html>

v-html

  • v-html 指令的作用是：设置元素的 innerHTML
  • 内容中有 html 的结构会被解析为标签
  • v-html 指令无论内容时什么，指挥解析为文本
  • 解析文本使用 v-text，需要解析 html 结构使用 v-html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            // content:"v-html"
            content:"<a href='https://www.szu.edu.cn'>深圳大学</a>"
        }
    })
</script>
</body>
</html>

v-on

  • v-on 指令的作用是：为元素绑定事件
  • 事件名不需要写 on
  • 指令可以简写为 @
  • 绑定的方法定义在 methods 属性中
  • 方法内部通过 this 关键字可以访问定义在 data 中数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt">
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="v-on双击" @dblclick="doIt">
    <h2 @click="changeFood">{{food}}</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"西兰花炒蛋"
        },
        methods:{
            doIt:function (){
                alert("做It");
            },
            changeFood: function () {
                // console.log(this.food);
                this.food+="好好吃！";
            }
        }
    })
</script>
</body>
</html>

实例

  • 创建 Vue 实例时：el（挂载点），data（数据），methods（方法）
  • v-on 指令的作用时绑定事件，简写为 @
  • 方法中通过 this ，关键字获取 data 中的数据
  • v-text 指令的作用时：设置元素的文本值
  • v-html 指令的作用是：设置元素的 innerHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="sub">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            add:function (){
                if (this.num < 10){
                    this.num++;
                }else alert("别点了，最大了！");

            },
            sub: function () {
                if (this.num > 0){
                    this.num--;
                }else alert("别点了，最小了！");
            }
        }
    })
</script>
</body>
</html>

2.2 显示切换，属性绑定

v-show

  • v-show 指令的作用是根据表达式的真假，切换元素的显示和隐藏
  • 修改元素的 display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为 true 元素显示，值为 false 元素隐藏
  • 数据改变之后，对应元素的显示状态会同步更新
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <a href="https://www.baidu.com" v-show="isShow">baidu</a>
    <input type="button" value="累加年龄" @click="addAge">
    <a href="#" v-show="age>=18">嘿嘿嘿</a>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeIsShow:function (){
                this.isShow = !this.isShow;
            },
            addAge:function (){
                this.age++;
            }
        }
    })
</script>
</body>
</html>

v-if

  • v-if 指令的作用是：根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
  • 本质是通过操纵 dom 元素来切换显示状态
  • 表达式的值为 true，元素存在于 dom 数中，为 false，从 dom 树中移除
  • 频繁的切换 v-show，反之使用 v-if，前者切换消耗小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">hello world</p>
    <p v-show="isShow">hello world - v-show修饰</p>
    <h2 v-if="tempreature>=35">热死了</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            tempreature:20
        },
        methods:{
            toggleIsShow:function (){
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</body>
</html>

v-bind

  • v-bind 指令的作用是：设置元素的属性（比如：src，title，class）
  • 完整写法式 v-bind:属性名
  • 简写的话可以直接省略 v-bind，只保留 :属性名
  • 需要动态的增删 class 建议使用对象的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <a v-bind:href="aHref">baidu</a>
    <br>
    <a :href="aHref" :title="aTitle+'!!!'"
       :class="isActive?'active':''" @click="toggleActive">baidu</a>
    <br>
    <a :href="aHref" :title="aTitle+'!!!'"
       :class="{active:isActive}" @click="toggleActive">baidu</a>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            aHref: "https://www.baidu.com",
            aTitle:"baidu",
            isActive:false
        },
        methods:{
            toggleActive:function (){
                this.isActive = !this.isActive;

            }
        }
    })
</script>
</body>
</html>

实例

  • 列表数据使用数组保存
  • v-bind 指令可以设置元素属性，比如 src
  • v-show 和 v-if 都可以切换元素的显示状态，频繁切换用 v-show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <img :src="imgArr[index]" alt=""/>
    <a href="#" @click="prev" v-show="index != 0">上一张</a>
    <a href="#" @click="next" v-show="index < imgArr.length-1">下一张</a>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgArr:[
                "./img/00.jpg",
                "./img/01.jpg",
                "./img/02.jpg",
                "./img/03.jpg",
                "./img/04.jpg",
                "./img/05.jpg",
                "./img/06.jpg",
                "./img/07.jpg",
                "./img/08.jpg",
            ],
            index:0
        },
        methods:{
            prev:function (){
                this.index--;
            },
            next:function (){
                this.index++;
            }
        }
    })
</script>

</body>
</html>

2.3 列表循环，表单元素绑定

v-for

  • v-for 指令的作用是：根据数据生成列表结构
  • 数组经常和 v-for 结合使用
  • 语法是 (item,index) in 数据
  • item 和 index 可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" @click="add" value="添加数据">
    <input type="button" @click="remove" value="移除数据">
    <ul>
        <li v-for="(x,index) in arr">
            {{ index+1 }}深圳大学校区：{{ x }}
        </li>
    </ul>
    <h2 v-for="item in vegetable" v-bind:title="item.name">
        {{item.name}}
    </h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["丽湖","粤海","沧海"],
            vegetable:[
                {name:"西兰花炒蛋"},
                {name:"蛋炒西兰花"}
            ]
        },
        methods:{
            add:function (){
                this.vegetable.push({name:"花菜炒蛋"});
            },
            remove:function (){
                this.vegetable.shift();
            }
        }
    })
</script>
</body>
</html>

v-on 补充

传递自定义参数，事件修饰符

文档传送门：https://cn.vuejs.org/v2/api/#v-on

  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter 可以显示触发的按键为回车
  • 事件修饰符有多种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button  @click="doIt(666,'老铁')">点击</button>
    <input type="text" @keyup.enter="sayHi">
</div>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            doIt:function (p1,p2){
                console.log("做It");
                console.log(p1,p2);
            },
            sayHi:function (){
                alert("吃了没");
            }
        }
    })
</script>
</body>
</html>

v-model

  • v-model 指令的作用是便捷获取和设置表单元素的值（双向数据绑定）

  • 绑定的数据会和表单元素相关联

  • 绑定的数据:left_right_arrow:表单元素的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{message}}</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello world",
        },
        methods:{
            getM:function (){
                alert(this.message)
            },
            setM:function (){
                this.message = "byebye"
            }
        }
    })
</script>
</body>
</html>

实例（记事本）

功能：

  1. 新增：
    1. 生成列表结构（v-for 数组）
    2. 获取用户输入（v-model）
    3. 回车，新增数据（v-on.enter 添加数据）
  2. 删除：
    1. 点击删除指定内容（v-on splice 索引）
  3. 统计：
    1. 统计信息个数（v-text length）
  4. 清空：
    1. 点击清除所有信息（v-on）
  5. 隐藏：
    1. 没有数据时，隐藏元素（v-show v-if 数组非空）

重点：

  • 列表结构可以通过 v-for 指令结合数据生成
  • v-on 结合事件修饰符可以对事件进行限制，比如 .enter
  • v-on 在绑定事件时可以传递自定义参数
  • 通过 v-model 可以快速的设置和获取表单元素的值
  • 基于数据的开发方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<!--主体区域-->
<section id="todoapp">
    <!--输入框-->
    <header class="header">
        <h1>记事本</h1>
        <input v-model="inputValue" @keyup.enter="add"
               autofocus="autofocus" 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 class="destory" @click="remove(index)">x</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 class="clear-completed" @click="clear" v-if="list.length !== 0">Clear</button>
    </footer>
</section>
<!--底部-->
<footer class="info">
</footer>
<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>

三、网络应用

Vue结合网络数据开发应用

3.1 axios

功能强大的网络请求库

1
2
3
4
5
6
<script src="https://unpkg.com/axios/dist/axios.min,js"></script>

<script>
	axios.get(地址?key=value$key2=value2).then(function(respose){},function(err){});
	axios.post(地址,key=value,key2=value2).then(function(respose){},function(err){});
</script>
  • axios 必须先导入才可以使用
  • 使用 get 或 post 方法即可发送对应的请求
  • then 方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形式可以获取相应内容，或错误信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">

<script>
    document.querySelector(".get").onclick = function (){
        axios.get("https://autumnfish.cn/api/joke/list?num=6")
        .then(function (response){
            console.log(response);
        },function (err){
            console.log(err);
        });
    }
    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>

3.2 axios+vue

axios 如何结合 vue 开发网络应用

  • axios 回调函数中的 this 已经改变，无法访问到 data 中数据
  • 把 this 保存起来，回调函数中直接使用保存的 this 即可
  • 和本地应用的最大区别时改变了数据来源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>{{joke}}</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话"
        },
        methods:{
            getJoke:function (){
                var that = this;
                axios.get("https://autumnfish.cn/api/joke")
                    .then(function (response){
                        that.joke = response.data;
                    },function (err){
                        console.log(err);
                    });
            }
        }
    })
</script>
</body>
</html>

实例（天气查询）

功能：

  1. 回车查询
    1. 按下回车（v-on.enter）
    2. 查询数据（axios 接口 v-model）
    3. 渲染数据（v-for 数组 that 或使用箭头函数）
  • 应用的逻辑代码建议和页面分离，使用单独的 js 文件编写
  • axios 回调函数中 this 指向改变了，需要额外保存一份
  • 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
  1. 点击查询
    1. 点击城市（v-on 自定义参数）
    2. 查询数据（this.方法()）
    3. 渲染数据（this.方法()）
  • 自定义参数可以让代码的复用性更高
  • methods 中定义的方法内部，可以通过 this 关键字点出其他的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="wrap" id="app">
    <div class="search_form">
        <div class="logo"><h1>天知道</h1></div>
        <div class="form_group">
            <input type="text" @keyup.enter="searchWeather" v-model="city"
            class="input_txt" placeholder="请输入查询的天气">
            <button class="input_sub" @click="searchWeather">搜索</button>
        </div>
    </div>
    <div class="hotkey">
        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('广州')">广州</a>
        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
    </div>
    <ul class="weather_list">
        <li v-for="item in weatherList">
            <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
            <div class="info_temp">
                <b>{{item.low}}</b>
                ~
                <b>{{item.high}}</b>
            </div>
            <div class="info_date"><span>{{ item.date }}</span></div>
        </li>
    </ul>
</div>
<script src="./main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var app = new Vue({
    el:"#app",
    data:{
        city:"",
        weatherList:[]
    },
    methods:{
        searchWeather:function (){
            // var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
            .then((response)=>{
                // console.log(response.data.data.forecast);
                this.weatherList = response.data.data.forecast;
            },function (err){
                console.log(err);
            });
        },
        changeCity:function (city){
            this.city = city;
            this.searchWeather();
        }
    }
})

四、综合应用（播放器）

4.1 歌曲搜索

  1. 按下回车（v-on.enter）
  2. 查询数据（axios 接口 v-model）
  3. 渲染数据（v-for 数组 that 或使用箭头函数）
  • 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
  • 通过审查元素快速定位到需要操纵的元素

4.2 歌曲播放

  1. 点击播放（v-on 自定义参数）
  2. 歌曲地址获取（接口 歌曲id）
  3. 歌曲地址设置（v-bind）
  • 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

4.3 歌曲封面

  1. 点击播放（增加逻辑）
  2. 歌曲封面获取（接口 歌曲id）
  3. 歌曲封面设置（v-bind）
  • 在vue中通过 v-bind 操纵元素
  • 本地无法获取的数据，基本都会有对应的接口

4.4 歌曲评论

  1. 点击播放（增加逻辑）
  2. 歌曲评论获取（接口 歌曲id）
  3. 歌曲评论渲染
  • 在 vue中通过 v-for 生成列表

4.5 播放动画

  1. 监听音乐播放（v-on play）
  2. 监听音乐暂停（v-on pause）
  3. 操纵类名（v-bind 对象）
  • audio 标签的 play 事件会在音频播放的时候触发
  • audio 标签的 pause 事件会在音频暂停的时候触发
  • 通过对象的方式设置类名，类名生效与否取决于后面值得真假

4.6 mv播放

  1. mv图标显示（v-if）
  2. mv地址获取（接口 mvid）
  3. 遮罩层（v-show v-on）
  4. mv地址设置（v-bind）

4.7 综合应用重点

  • 不同接口需要得数据是不同的
  • 页面结构复杂之后，通过审查元素的方式取快速定位相关元素
  • 响应式的数据都需要在 data 中定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>悦听player</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper'>
          <ul class="song_list">
           <li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a>
               <b>{{ item.name }}</b>
               <span v-if="item.mvid !== 0" @click="playMV(item.mvid)"><i></i></span></li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlaying}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="musicCover" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="item in hotComments">
              <dt><img :src="item.user.avatarUrl" alt=""></dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                  {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl"
               controls autoplay loop class="myaudio" ></audio>
      </div>
      <div class="video_con" v-show="isShow" style="display: none;">
        <video :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>
    </div>
  </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 src="./js/main.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/
var app = new Vue({
  el: "#player",
  data: {
    // 查询关键字
    query: "",
    // 歌曲数组
    musicList: [],
    // 歌曲地址
    musicUrl: "",
    // 歌曲封面
    musicCover: "",
    // 歌曲评论
    hotComments: [],
    // 动画播放状态
    isPlaying: false,
    // 遮罩层的显示状态
    isShow: false,
    // mv地址
    mvUrl: ""
  },
  methods: {
    // 歌曲搜索
    searchMusic: function() {
      var that = this;
      axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
        function(response) {
          // console.log(response);
          that.musicList = response.data.result.songs;
          // console.log(response.data.result.songs);
        },
        function(err) {}
      );
    },
    // 歌曲播放
    playMusic: function(musicId) {
      //   console.log(musicId);
      var that = this;
      // 获取歌曲地址
      axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.data[0].url);
          that.musicUrl = response.data.data[0].url;
        },
        function(err) {}
      );

      // 歌曲详情获取
      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.songs[0].al.picUrl);
          that.musicCover = response.data.songs[0].al.picUrl;
        },
        function(err) {}
      );

      // 歌曲评论获取
      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.hotComments);
          that.hotComments = response.data.hotComments;
        },
        function(err) {}
      );
    },
    // 歌曲播放
    play: function() {
      // console.log("play");
      this.isPlaying = true;
    },
    // 歌曲暂停
    pause: function() {
      // console.log("pause");
      this.isPlaying = false;
    },
    // 播放mv
    playMV: function(mvid) {
      var that = this;
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.data.url);
          that.isShow = true;
          that.mvUrl = response.data.data.url;
        },
        function(err) {}
      );
    },
    // 隐藏
    hide: function() {
      this.isShow = false;
      this.mvUrl = '';
    }
  }
});
  • Post title：vue入门
  • Post author：John_Frod
  • Create time：2021-02-12 22:09:26
  • Post link：https://keep.xpoet.cn/2021/02/12/vue入门/
  • Copyright Notice：All articles in this blog are licensed under BY-NC-SA unless stating additionally.