Vue快速入门

参考官方教程： https://cn.vuejs.org/v2/guide/

视频： https://www.bilibili.com/video/BV12J411m7MG?p=1

音乐播放器源码： https://gitee.com/koulinyi/music-player

文章目录

Vue快速入门
一、Vue基础
二、本地应用
三、网络应用
四、综合应用

一、Vue基础

1. 第一个vue程序

导入开发版本的Vue.js

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

创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
</head>
<body>
    <div id="app">
        {
   
   { message }}
    </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!"
            }
        })
    </script>
</body>
</html>

2. el挂载点

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

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

Vue会管理el选项命中的元素及其内部的后代元素。

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

效果如图：

在这里插入图片描述

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

可以使用其他的选择器,但是建议使用ID选择器。

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

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

3. data数据对象

Vue中用到的数据定义在data中。
data中可以写复杂类型的数据。
渲染复杂类型数据时，遵循js的语法即可。

<body>
    <div id="app">
        {
   
   { message }}
        <h2> {
   
   { school.name }} {
   
   { school.phone }} </h2>
        <ul>
            <li>{
   
   { campus[0] }}</li>
            <li>{
   
   { campus[1] }}</li>
            <li>{
   
   { campus[2] }}</li>
            <li>{
   
   { campus[3] }}</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:"黑马程序员",
                    phone:"400-618-9090"
                },
                campus:["北京","上海","广州","深圳"]
            }
        })
    </script>
</body>

二、本地应用

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

(一) 内容绑定，事件绑定

1. v-text

v-text作用：设置标签的文本值（textContent）
默认写法会替换全部内容，使用差值表达式 {undefined{}} 可以替换指定内容。（如本例中”深圳的显示”）
内部支持写表达式（如字符串拼接）

<body>
    <div id="app">
        <!-- 全部替换 -->
        <h2 v-text="message + '!'">深圳</h2>
        <h2 v-text="info + '!'">深圳</h2>
        <!-- 部分替换 -->
        <h2>深圳：{
   
   { message + '!'}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                message:"黑马程序员",
                info:"前端培训"
            }
        })
    </script>
</body>

2. v-html

v-html指令的作用是：设置元素的 innerHTML
内容中有html结构会被v-html指令解析为标签；v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<body>
    <div id="app">
        <!-- 内容中有html结构会被解析为标签 -->
        <p v-html="content"></p>
        <!-- 只能解析为文本 -->
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                content:"<a href='v-text.html'>黑马程序员</a>"
            }
        })
    </script>
</body>

3. v-on基础

v-on指令的作用是：为元素绑定事件
事件名不需要写on；指令可以简写为@；绑定的方法定义在methods属性中
vue中不需要考虑如何更改DOM元素，重点放在更改data中的数据即可，因为数据更新后，使用数据的元素会同步更新。方法内部通过this关键字可以访问定义在data中数据

<body>
    <div id="app">
        <input type="button" value="v-on:click" v-on:click="doIt">
        <input type="button" value="v-on:click简写" @click="doIt">
        <input type="button" value="双击事件" v-on:dblclick="doIt">
        <h2 @click="changeFood">{
   
   { food }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                food:"西兰花炒蛋"
            },
            methods:{
      
      
                doIt:function () {
      
      
                    alert("做IT");
                },
                changeFood:function () {
      
      
                    // console.log(this.food);
                    this.food+="好好吃！"
                }
            }
        })
    </script>
</body>

4. 案例：计数器

思路：

在这里插入图片描述

总结：

（1）创建Vue示例时：el(挂载点)，data(数据)，methods(方法);

（2）v-on指令的作用是绑定事件，简写为@；

（3）方法中通过this，关键字获取data中的数据；

（4）v-text指令的作用是：设置元素的文本值简写为{ {}}；

（5）v-html指令的作用是：设置元素的innerHTML

代码：

<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>
        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 > 1) {
      
      
                        this.num--;
                    } else {
      
      
                        alert("超过最小值");
                    }
                }
            }
        })
    </script>
</body>

(二) 显示切换，属性绑定

1. v-show

v-show指令的作用：根据真假切换元素的显示状态。原理是修改元素的display，实现显示隐藏
后面的内容，最终都会解析为布尔值；值为true元素显示，值为false元素隐藏
改变之后，对应元素的显示状态会同步更新

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge"><br/>
        <!--<img v-show="false" src="../img/tx.jpg" width="250" height="250">-->
        <img v-show="isShow" src="../img/zhuzi.jpg" width="250" height="250">
        <img v-show="age>=18" src="../img/tx.jpg" width="250" height="250">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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>

2. v-if

v-if指令的作用是：根据表达式的真假切换元素的显示状态。本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中；为false，从dom树中移除
频繁的切换使用v-show，反之使用v-if，前者的切换消耗小
v-if和v-show的区别：v-show直接修改display，而v-if是直接抹除标签

（1）true时显示：

在这里插入图片描述

（2）false时显示：

在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="更改显示" @click="changeShow">
        <input type="button" value="增加年龄" @click="addAge"><br>
        <p v-if="isShow">黑马程序员</p>
        <p v-show="isShow">黑马程序员 - v-show修饰</p>
        <p v-if="age>=18">年龄满足</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                isShow:false,
                age:17
            },
            methods:{
      
      
                changeShow:function () {
      
      
                    this.isShow = !this.isShow;
                },
                addAge:function () {
      
      
                    this.age++;
                }
            },
        })
    </script>
</body>

3. v-bind

v-bind指令的作用是：为元素绑定属性（比如：src，title，class）
完整写法是 v-bind:属性名=表达式
简写的话可以直接省略v-bind，只保留 :属性名
需要动态的增删class建议使用对象的方式

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active{
      
      
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" :title="imgTitle"><br>
        <img :src="imgSrc" :title="imgTitle + '!!!'" :class="isActive?'active':''" @click="toggleActive"><br>
        <img :src="imgSrc" :title="imgTitle + '!!!'" :class="{active:isActive}" @click="toggleActive"><br>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods:{
      
      
                toggleActive:function () {
      
      
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

4. 案例：图片切换

分析：

在这里插入图片描述

代码：略
总结：

（1）列表数据使用数组保存
（2）v-bind指令可以设置元素属性，比如src
（3）v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

(三) 列表循环，表单元素绑定

1. v-for

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是 ( item,index ) in 数据
item和index可以结合其他指令一起使用；数组长度的更新会同步到页面上，是响应式的

<body>
    <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>
        <!-- 对象元素 -->
        <h4 v-for="item in vegetable">
            {
   
   { item.name + "，生产日期：" + item.year }}
        </h4>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                arr:["北京","上海","广州","深圳"],
                vegetable:[
                    {
      
      name:"西兰花炒蛋",year:"3月4日"},
                    {
      
      name:"蒜苔炒肉",year:"2月14日"},
                ]
            },
            methods:{
      
      
                add:function () {
      
      
                    // 添加元素(最右)
                    this.vegetable.push({
      
      name:"酸汤水饺",year:"6月11日"});
                },
                remove:function () {
      
      
                    // 移除元素(最左)
                    this.vegetable.shift();
                }
            }
        })
    </script>
</body>

2. v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接收传入的实参
事件的后面跟上修饰符可以对事件进行限制，enter可以限制触发的按键为回车
事件修饰符有多种：https://cn.vuejs.org/v2/api/#v-on

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            methods:{
      
      
                doIt:function(p1,p2) {
      
      
                    console.log("做it");
                    console.log(p1+ "，" +p2);
                },
                sayHi:function () {
      
      
                    alert("吃了没");
                }
            }
        })
    </script>
</body>

3. v-model

v-model：获取和设置表单元素的值（双向数据绑定）
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联（绑定的数据←→表单元素的值）

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <input type="button" v-model="message" @click="setMessage">
        <h4>{
   
   { message }}</h4>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                message:"沙丁鱼"
            },
            methods:{
      
      
                getMessage:function () {
      
      
                    alert(this.message);
                },
                setMessage:function () {
      
      
                    this.message = "小猫咪";
                }
            }
        })
    </script>
</body>

4. 案例：小黑记事本

新增：
- 生成列表结构(v-for和数组)
- 获取用户输入(v-model)
- 回车,新增数据(v-on .enter 添加数据)
删除：
- 数据改变，和数据绑定的元素同步改变
- 事件可以接收自定义的参数
- splice的作用：根据索引删除对应元素
统计：
- 基于数据的开发方式
- v-text指令是设置文本，也可以用插值表达式{undefined{}}
清空：
- 基于数据的开发方式清空数组即可
隐藏：
- 没有数据时，隐藏元素（数组非空时v-if v-show ）

<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 class="destroy" @click="remove(index)">
                            del
                        </button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer" v-show="list.length!=0">
          <span class="todo-count" v-show="list.length!=0">
            <strong>{
   
   {list.length}}</strong> items left
          </span>
            <button v-show="list.length!=0" class="clear-completed" @click="clear">
                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) {
      
      
                    console.log("删除");
                    console.log(index);
                    this.list.splice(index, 1);
                },
                clear: function () {
      
      
                    this.list = [];
                }
            },
        })
    </script>
</body>

三、网络应用

1. axios基本使用

axios是功能强大的网络请求库。axios必须先导入才可以使用，使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发；通过回调函数的形参可以获取响应内容，或错误信息
文档传送门：https://github.com/axios/axios
axios官网文档：http://www.axios-js.com/zh-cn/docs/

<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")
            .then(function (response) {
      
      
                console.log(response);
            },function (err) {
      
      
                console.log(err);
            })
        }
    </script>
</body>

2. axios与vue结合使用

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源

<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
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        var app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                joke:"很好笑的笑话"
            },
            methods:{
      
      
                getJoke:function () {
      
      
                    // console.log(this.joke); // 很好笑的笑话
                    var that = this; // 因为axios回调函数中的this会发生变化，所以这里进行一次存储
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function (response) {
      
      
                        // console.log(response);
                        console.log(response.data);
                        // console.log(this.joke); // undefined
                        that.joke = response.data; // 把服务器返回的数据直接设置给数据
                    },function (err) {
      
      
                        console.log(err);
                    })
                }
            }
        })
    </script>
</body>

3. 案例：天知道

回车查询 + 点击查询

按下回车(v-on .enter)
查询数据(axios 接口 v-model )
渲染数据(v-for 数组 that)

（1）应用的逻辑代码建议和页面分离，使用单独的js文件编写；

（2）axios回调函数中this指向改变了，需要额外的保存一份；

（3）服务器返回的数据比较复杂时，获取的时候需要注意层级结构。

四、综合应用

1.歌曲搜索

按下回车(v-on .enter)
查询数据(axios 接口 v-model )
渲染数据(v-for 数组 that)

2.歌曲播放（点击按钮播放）

点击播放(v-on 自定义参数)
歌曲地址获取
歌曲地址设置(v-bind)

3.歌曲封面

接口有问题，我直接用了固定图片

4.歌曲评论

在vue中通过v-for生成列表

5.播放动画

监听音乐播放(v-on play)
监听音乐暂停(v-on pause)
操纵类名(v-bind 对象)
audio标签的play事件会在音频播放的时候触发，pause事件会在音频暂停的时候触发

6.mv播放

mv图标显示(v-if)
mv地址获取(接口 mvid)
遮罩层(v-show v-on)
mv地址设置(v-bind)

转自视频评论：
悦听接口现在的调用方式是直接把歌曲的id 替换到
https://music.163.com/song/media/outer/url?id=id.mp3这个地址，比如歌曲id为 33894312
那么歌曲url的地址为
https://music.163.com/song/media/outer/url?id=33894312.mp3
把这个地址直接设置给audio标签的src属性即可