Vue学习

本文最后更新于：7 个月前

Vue学习

Vue 2.x 的文档: https://v2.cn.vuejs.org/v2/guide/

Vue 3 的文档: https://cn.vuejs.org/guide/introduction.html

视频：黑马程序员vue前端基础教程-4个小时带你快速入门vue

https://www.bilibili.com/video/BV12J411m7MG/

https://blog.csdn.net/cjdxyang/article/details/121122938

Vue CLI: https://cli.vuejs.org/zh/guide/
Vite 官方中文文档: https://cn.vitejs.dev/guide/

一、选择器

  1. ID选择器
  2. 类选择器
  3. 标签选择器
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">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue基础</title>
    </head>
    <body id="body">
        <div id="app" class="app">
            {{message}}
            <h3>{{message}}</h3>
            <span>{{message}}</span>
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            var app = new Vue({
                el: "#app", // ID选择器
                // el: ".app", // 类选择器
                // el: "div", // 标签选择器
                // el: "#body", // e.js:5108 [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
                data: {
                    message: "Hello, Vue!"
                }
            })
        </script>

    </body>
</html>

二、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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>data: 数据对象</title>
    </head>
    <body>
        <div id="app">
            {{message}}
            <h2>
                {{school}}
            </h2>
            <span>
                {{ school.name }}
                {{ school.mobil }}
            </span>
            <ul>
                <li>{{campus[0]}}</li>
                <li>{{campus[1]}}</li>
                <li>{{campus[2]}}</li>
            </ul>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    message: "hello,vue",
                    school: {
                        name: "北京大学",
                        mobil: "123456789"
                    },
                    campus: ["北京", "上海", "广州"]
                }
            })
        </script>

    </body>
</html>

三、vue渲染命令

1. v-text

2. v-on

v-on基础

绑定事件：click、dblclick、mouseenter

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>本地应用（指令）</title>
    </head>
    <body>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <!-- <script src="https://gcore.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <script src="./vue.js"></script>
        
        <div id="app">
            <!-- v-text -->
            <h2 v-text="message">abc</h2>
            <h2 v-text="info">abc</h2>
            <h2>{{message}}abc</h2>

            <!-- v-html -->
            <p v-text="context"></p>
            <p v-html="context"></p>

            <!-- v-on基础 -->
            <!-- 绑定事件：click、dblclick、mouseenter -->
            <input type="button" value="v-on指令" v-on:click="doIt">
            <input type="button" value="v-on简写" @click="doIt">
            <input type="button" value="双击事件" @dblclick="doIt">
            <h2 @click="changeFood">{{food}}</h2>
        </div>

        <script>
            // 创建vue实例
            var app = new Vue({
                el: "#app",
                data: {
                    message: "哈哈哈",
                    info: "123123",
                    context: "<a href='https://www.baidu.com'>百度</a>",
                    food: "西红柿"
                },
                methods: {
                    doIt: function(){
                        alert("doIt")
                    },
                    changeFood: function(){
                        // console.log(this.food)
                        this.food += "好吃"
                    }
                }
            })
        </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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>计数器</title>
    </head>
    <body>

        <div id="app">
            <div class="input-num">
                <button @click="sub">-</button>
                <span>{{num}}</span>
                <button @click="add">+</button>
            </div>
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <!-- <script src="https://gcore.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <script src="./vue.js"></script>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    num: 1
                },
                methods: {
                    add:function(){
                        // console.log("add")
                        if (this.num < 10) {
                            this.num++;
                        } else {
                            alert("别点啦，最大了");
                        }
                    },
                    sub:function(){
                        // console.log("sub")
                        if (this.num > 0) {
                            this.num--;
                        } else {
                            alert("别点啦，最小了");
                        }
                    }
                }
            })
        </script>
    </body>
</html>

3. 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
44
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-show指令</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="切换显示图片" @click="changeIsShow">
            <input type="button" value="累加年龄" @click="addAge">
            <div>
                <img src="C:\Users\chris\Downloads\Snipaste_2023-05-30_20-44-37.png" width="30%" v-show="isShow">
                <img src="C:\Users\chris\Downloads\Snipaste_2023-05-30_20-44-37.png" width="30%" v-show="age>=18">
            </div>

        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <!-- <script src="https://gcore.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <script src="./vue.js"></script>

        <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>

4. v-if

  • v-if指令的作用是：根据表达式的真假切换元素的显示状态
  • 本质是通过操纵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
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-if指令</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="切换显示" @click="toggleIsShow">
            <!-- v-if操作的是DOM元素 -->
            <p v-if="isShow">黑马程序员</p>
            <!-- v-show操作的是样式 -->
            <p v-show="isShow">黑马程序员 - v-show修饰</p>
            <h2 v-if="temperature>=35">热死啦</h2>
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <!-- <script src="https://gcore.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
        <script src="./vue.js"></script>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isShow: false,
                    temperature: 25
                },
                methods: {
                    toggleIsShow: function() {
                        this.isShow = !this.isShow;
                    }
                }
            })
        </script>
    </body>
</html>

5. v-bind

设置元素的属性（比如src, title, class）

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

作用：为元素绑定属性

简写可以省略v-bind，只保留：:属性名

6.v-for

作用：根据数据生成列表结构

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

语法：

1
(item, index) in 数组名arr

item和index可以结合其他指令一起使用

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

7.v-on补充

https://v2.cn.vuejs.org/v2/api/#v-on

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

  • 事件绑定的方法写成函数调用的形式，就可以传入自定义参数
  • 定义方法时需要定义形参接收传入的实参
  • 事件的后面跟上.修饰符可以对事件进行限制
  • .enter可以限制触发的按键为回车

8.v-model

获取和设置表单元素的值（双向数据绑定）

  • v-model指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素的值相关联
  • 绑定的数据和表单元素的值双向绑定，同步更新

四、小黑记事本

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, 数组非空)

6) 总结

  1. 列表结构可以通过v-for指令结合数据生成
  2. v-on结合事件修饰符可以对事件进行限制，比如 .enter
  3. v-on在绑定事件时可以传递自定义参数
  4. 通过v-model可以快速的设置和获取表单元素的值
  5. 基于数据的开发方式

五、网络应用

Vue结合网络数据开发应用

  • axios: 网络请求库
  • axios + vue结合
  • 天气预报案例

1. axios

官网：https://axios-http.com/

项目：https://github.com/axios/axios

功能强大的网络请求库

1
2
// 引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1
2
3
4
5
6
7
// get请求
axios.get(地址?key=value&key2=value2).then(
  function(response){
  },
  function(err){
  }
)
1
2
3
4
5
6
7
// post请求
axios.post(地址,{key:value, key2:value2}).then(
  function(response){
  },
  function(err){
  }
)
  • axios必须先导入才可以使用
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容，或错误信息

2. axios+vue

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

  • axios回调函数中的this已经改变，无法访问到data中的数据
  • 解决：在axios发送请求之前先把this保存起来，var that = this，回调函数中就可以直接使用保存的this了

3.天知道

1) 回车查询

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

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

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

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

2) 点击查询

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

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

(3) 渲染数据

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

六、综合应用

悦听音乐播放器

网易云音乐API https://binaryify.github.io/NeteaseCloudMusicApi/#/

1. 歌曲搜索

请求地址：

https://autumnfish.cn/search?keywords=

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

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

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

2. 歌曲播放

请求地址：

https://autumnfish.cn/song/url

请求方法：get

请求参数：id（歌曲id）

响应内容：歌曲的URL地址

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

(2) 歌曲地址获取(axios接口 歌曲id)

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

3. 歌曲封面

请求地址：

https://autumnfish.cn/song/detail

请求方法：get

请求参数：ids（歌曲id）

响应内容：歌曲详情，包含封面信息

(1) 点击播放(增加逻辑)

(2) 歌曲封面获取

(3) 歌曲封面设置

  • 在Vue中通过v-bind操作属性

4. 歌曲评论

热门评论获取

请求地址：

https://autumnfish.cn/comment/hot?type=0

请求方法：get

请求参数：id（歌曲id， type固定为0）

响应内容：歌曲的热门评论

(1) 点击播放(增加逻辑)

(2) 歌曲评论获取(接口 歌曲id)

(3) 歌曲评论渲染(v-for)

5. 播放动画

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

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

(3) 操作类名(v-bind 对象)

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

6. MV播放

mv地址获取

请求地址：

https://autumnfish.cn/mv/url

请求方法：get

请求参数：id（mvid，为0说明没有MV）

响应内容：MV的地址

(1) MV图标显示(v-if)

(2) MV地址获取(接口 mvid)

(3) 遮罩层(v-show v-on)

(4) MV地址设置(v-bind)

  • 不同的接口需要的数据是不同的，文档的阅读需要仔细
  • 页面结构复杂，通过审查元素的方式去快速定位相关元素

7. 获取歌词

https://music.163.com/api/song/lyric?id={歌曲ID}&lv=1&kv=1&tv=-1

https://autumnfish.cn/

Vue学习
https://chris-z-su.github.io/2023/05/13/前端/vue学习/
作者
Chris
发布于
2023年5月13日
许可协议