Vue（三）

博主： Xherlock
发布时间：2022 年 03 月 29 日
489 次浏览
暂无评论
4914字数
分类： Vue Web前端

# Vue（三）

## 本地应用

### 记事本

具有添加、删除、统计、清空、隐藏的功能

~~~html
<!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>
    <section id="todoapp">
        <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)">
                            X
                        </button>
                    </div>
                </li>
            </ul>
        </section>
        <footer class="footer" v-show="list.length!=0">
            <span class="todo-count">
                <strong>{{ list.length }}</strong> items left
            </span>
            <button class="clear-completed" @click="clear">
                Clear
            </button>
        </footer>
    </section>
    <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>
~~~

## 网络应用

网络请求库：axios

### axios的基本使用

~~~html
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <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:"xherlock"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>
</body>
~~~

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

### axios+vue

axios结合vue开发网络应用

随机获取一条笑话

~~~html
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <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){
                        console.log(response);
                        that.joke = response.data;
                    },function(err){
                        console.log(err);
                    })
                }
            },
        })
    </script>
</body>
~~~

![image-20220329195330865.png](http://xherlock.top/usr/uploads/2022/03/2741970099.png)

### 天知道——应用

~~~html
<body>
    <div id="app">
        <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的地区">
        <button class="input_sub" @click="searchWeather">搜索</button>
        <br>
        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('成都')">成都</a>
        <a href="javascript:;" @click="changeCity('郑州')">郑州</a>
        <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="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        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(function(response){
                        console.log(response.data.data.forecast);
                        that.weatherList = response.data.data.forecast
                    })
                    .catch(function(err){})
                },
                changeCity:function(city){
                    this.city = city;
                    this.searchWeather();
                }
            },
        })
    </script>
</body>
~~~

![image-20220329202431516.png](http://xherlock.top/usr/uploads/2022/03/1848654233.png)

* 应用的逻辑代码建议和页面分离，使用单独的js文件编写
* axios回调函数中this指向改变，需要额外保存一份
* 服务器返回的数据比较复杂需要注意层级结构
* 自定义参数可以让代码的复用性更高
* methods中定义的方法内部，可以通过this关键字点出其他的方法

## 综合应用

音乐播放器

### 歌曲搜索

~~~js
searchMusic:function(){
    var that = this;
    axios.get("https://autumnfish.cn/search?keywords="+this.query)
        .then(function(response){
        // console.log(response.data.result.songs);
        that.musicList = response.data.result.songs;
    },function(err){})
},
~~~

### 播放歌曲

~~~js
playMusic:function(musicId){
    // console.log(musicId);
    var that = this;
    axios.get("https://autumnfish.cn/song/url?id="+musicId)
        .then(function(response){
        // console.log(response);
        that.musicUrl = response.data.data[0].url;
    },function(err){})
}
~~~

最后修改：2022 年 03 月 29 日