5个案例快速入门Vue.js(2)

转载

mob604756fbd94e 2021-08-15 14:48:00

文章标签 ios 数据 html fish 数组 文章分类 Vue.js 前端开发

承接上一个

v-model

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据↔表单元素的值

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-15 09:09:18
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-15 09:18:39
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>v-model实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model双向绑定 文本框里输入的值会和msg一起动态变化 -->
        <input type="text" v-model="msg" @keyup.enter="getM">
        <h2>{{msg}}</h2>
        <input type="button" value="修改msg" @click="changeM">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               msg:"欢迎阅读"
            },
            methods:{
                getM:function(){
                    alert(this.msg)
                },
                changeM:function(){
                    this.msg = "再见！"
                }
            }
        })
    </script>
</body>

</html>

　　第三个例子——记事本

功能和思路

增加
- 生成列表结构(v-for数组)
- 获取用户输入(v-model)
- 回车，新增数据(v-on.enter添加数据)　
- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

　　 2. 删除

- splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
- 点击删除指定内容(v-on splice 索引)　
- 数据改变，和数据绑定的元素同步改变
- 事件的自定义参数
- splice()方法的使用

　　　3. 统计　　

- 统计信息个数（{{item.length}}）
- 基于数据的开发方式
- v-text指令的作用

　　4. 清空　

- 把数据设置为空

　　5. 隐藏　

- 没有数据时，把底部隐藏
- 使用v-show/v-if 数组非空

记事本

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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-15 09:31:58
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-15 10:20:30
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>记事本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 主体区域 -->
    <div id="app">
        <!-- 输入框 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- v-model="content"添加双向绑定数据 @keyup.enter="add"敲回车键数据渲染到下面的列表中 -->
            <input v-model="content" @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>
                        <!-- remove()里加index是获取索引，点击哪个删除哪个 -->
                        <button class="destory" @click="remove(index)"></button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer">
            <!-- v-if/v-show在这里的作用是长度不为0的时候显示，为0不显示 -->
            <span class="todo-count" v-if="list.length!=0">
                <strong>{{list.length}}</strong>
                项任务
            </span>
            <button class="clear-completed" @click="clear" v-show="list.length!=0">
                清空
            </button>
        </footer>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               list:["敲代码","写日志","传博客"],
               content:"好好看视频，好好敲代码"
            },
            methods:{
                add:function(){
                    // push添加数据 获取输入框添加的content
                    this.list.push(this.content);
                },
                remove:function(index){
                    console.log("删除");
                    console.log(index);
                    // splice删除数据 第一个值代表索引 第二个值代表要删除的个数
                    this.list.splice(index,1)
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>

</html>

　　第三章网络应用

axios

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数中的形参可以获取响应内容或错误信息

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-15 10:28:48
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-15 11:02:30
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>axios的基本使用</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <!-- 引入axios CDN地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script>
        // 获取.get元素 请求随机笑话接口地址 get请求
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")  //随机笑话地址 num 后面写几就获取几条数据
            .then(function(response){  //响应成功触发
                console.log(response);
            },function(err){  //响应错误触发
                console.log(err);
            })
        }
 
        // 获取.post元素 请求用户注册接口地址  post请求
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg123", //加个123返回错误警告
            {username:"lll"})
            .then(function(response){
                console.log(response)
            },function(err){
                console.log(err);
            })
        }
    </script>
</body>

</html>

axios+vue

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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-15 12:29:25
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-15 12:33:02
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>axios+vue的实例</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入axios CDN地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               joke:"这个笑话好搞笑"
            },
            methods:{
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        console.log(response)
                    },function(err){
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>

</html>

　　第四个例子——天气查询

功能和思路

回车查询

- 按下回车(v-on .enter)
- 查询数据(axios接口 v-model)　
- 渲染数据(v-for 数组 that)　　　　　　　
  - 应用的逻辑代码建议和页面分离，使用单独的js文件编写
  - axios回调函数中的this指向变了，需要额外保存一份that
  - 服务器返回的数据比较复杂时，获取的时候需要注意层级结构

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-15 12:41:57
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-15 13:01:44
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>天气预报回车查询</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入axios CDN地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="city" placeholder="请输入要查询的天气" @keyup.enter="sw">
            <button>搜索</button>
            
            <div>
                <a href="#">北京</a>
                <a href="#">上海</a>
                <a href="#">广州</a>
                <a href="#">深圳</a>
            </div>
            
            <ul>
                <li v-for="item in wList">
                    <div>
                        <span>
                            {{item.type}}
                        </span>
                    </div>
                    <div>
                        <b>
                            {{item.low}}
                        </b>
                        ~
                        <b>
                            {{item.high}}
                        </b>
                    </div>
                    <div>
                        <span>
                            {{item.date}}
                        </span>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                city:"",
                wList:[]
            },
            methods:{
                sw:function(){
                    // console.log("天气查询");
                    // console.log(this.city);
                    // 调用接口
                    // 保存this
                    var that = this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="
                    +this.city)
                    .then(function(response){
                        console.log(response.data.data.forecast);
                        that.wList = response.data.data.forecast;
                    })
                    .catch(function(err){
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>

</html>

　　2. 点击查询

- 点击城市（v-on 自定义参数）
- 查询数据（this.方法()）
- 渲染数据（this.方法()）
  - 自定义参数可以让代码的复用性更高
  - methods中定义的方法内部，可以通过this关键字点出其他方法
  - 添加了一个changeCity方法

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-15 12:41:57
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-15 13:15:55
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>天气预报点击查询</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入axios CDN地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="city" placeholder="请输入要查询的天气" @keyup.enter="sw">
            <button>搜索</button>
            
            <div>
                <a href="#" @click="changeCity('北京')">北京</a>
                <a href="#" @click="changeCity('上海')">上海</a>
                <a href="#" @click="changeCity('广州')">广州</a>
                <a href="#" @click="changeCity('深圳')">深圳</a>
            </div>
            
            <ul>
                <li v-for="item in wList">
                    <div>
                        <span>
                            {{item.type}}
                        </span>
                    </div>
                    <div>
                        <b>
                            {{item.low}}
                        </b>
                        ~
                        <b>
                            {{item.high}}
                        </b>
                    </div>
                    <div>
                        <span>
                            {{item.date}}
                        </span>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                city:"",
                wList:[]
            },
            methods:{
                sw:function(){
                    // console.log("天气查询");
                    // console.log(this.city);
                    // 调用接口
                    // 保存this
                    var that = this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="
                    +this.city)
                    .then(function(response){
                        console.log(response.data.data.forecast);
                        that.wList = response.data.data.forecast;
                    })
                    .catch(function(err){
                        console.log(err)
                    })
                },
                changeCity:function(city){
                    this.city = city;
                    this.sw();
                }
            }
        })
    </script>
</body>

</html>

　　第五个例子——音乐案例

功能和思路

歌曲搜索
1. 按下回车（v-on .enter）
2. 查询数据 (axios接口 v-model)
3. 渲染数据（v-for 数组 that）　
  1. 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
  2. 通过审查元素快速定位到需要操纵的元素　　
歌曲播放
1. 点击播放（v-on自定义参数）
2. 歌曲地址获取（接口歌曲id）
3. 歌曲地址设置 (v-bind)
  1. 　　歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注
歌曲封面
1. 点击播放(增加逻辑)
2. 歌曲封面获取(接口歌曲id)
3. 歌曲封面设置(v-bind)
  1. 在vue中通过v-bind操纵属性
  2. 本地无法获取的数据，基本都会有对应的接口
歌曲评论
1. 点击播放(增加逻辑)
2. 歌曲评论获取(接口歌曲id)
3. 歌曲评论渲染(v-for)
  1. 在vue中通过v-for生成列表　　
播放动画
1. 监听音乐播放(v-on play)
2. 监听音乐暂停(v-on pause)
3. 操纵类名(v-bind 对象)
  1. audio标签的play事件会在音频播放时触发
  2. audio标签的pause事件会在音频暂停时触发
  3. 通过对象的方式设置类名，类名生效与否取决于后面值的真假
mv播放
1. mv图标显示(v-if)
2. mv地址获取(接口 mvid)
3. 遮罩层(v-show v-on)
4. mv地址设置(v-bind)

　　总结：

不同的接口需要的数据是不同的，文档的阅读需要仔细
页面结构复杂之后，通过审查元素的方式去快速定位相关元素
响应式的数据都需要定义在data中

　　js代码

<script>
        let vm = new Vue({
            el: "#app",
            data: {
                // 查询关键字
                query: "",
                // 歌曲数组
                mList: [],
                // 歌曲地址
                musicUrl:"",
                // 歌曲封面
                musicCover:"",
                // 歌曲评论
                hotComments:[],
                // 动画播放状态
                idPlay:false,
                // 遮罩层的显示状态
                isShow:false,
                // mv地址
                mvUrl:""
            },
            methods: {
                // 歌曲搜索
                sMusic: function () {
                    // 保存that代替this
                    var that = this;
                    axios.get("https://autumnfish.cn/search?keywords=" + this.query)
                        .then(function (response) {
                            // console.log(response)
                            this.mList = response.data.result.songs;
                            console.log(response.data.result.songs)
                        }, function (err) {
                            console.log(err)
                        })
                },
                // 歌曲播放
                pMusic:function(musicId){
                    // console.log(musicId)
                    var that = this
                    // 获取歌曲地址
                    axios.get("http://autumnfish.cn/song/url?id=" + musicId)
                    .then(function(response){
                        // console.log(response);
                        // console.log(reaponse.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(tesponse);
                        console.log(response.data.hotComments);
                        that.hotComments = response.data.hotComments;
                    },function(err){})
                },
                // 歌曲播放
                play:function(){
                    this.isPlay = true;
                },
                // 歌曲暂停
                pause:function(){
                    this.isPlay = false;
                },
                // 播放mv
                playMv:function(mvid){
                    var that = this;
                    axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
                    .then(function(response){
                        console.log(response.data.data.url);
                        that.isShow = true;
                        that.mvUrl = response.data.data.url;
                    },function(err){})
                },
                // 隐藏
                hide:function(){
                    this.isShow = false;
                }
            }
        })
    </script>