Vue-3 网络应用

最新推荐文章于 2024-07-20 10:36:53 发布

二品翻译官

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量101

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/niubiwhat/article/details/126552258

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

Vue 渐进式JavaScript框架官网：https://cn.vuejs.org/
第一章 - Vue基础
第二章 - 本地应用
第三章 - 网络应用
第四章 - 综合应用

第三章网络应用(1/3) axios基本使用

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

 1<body> 
 2    <input type="button" value="get请求" class="get">
 3    <input type="button" value="post请求" class="post">
 4    <!-- 官网提供的 axios 在线地址 -->
 5    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 6    <script>
 7        document.querySelector(".get").onclick = function(){
 8            axios.get("https://autumnfish.cn/api/joke/list?num=6").then(
 9                function(response){
10                    console.log(response);
11                },
12                function(err){
13                    console.log(err);
14                }
15            )
16        }
17        document.querySelector(".post").onclick = function(){
18            axios.post("https://autumnfish.cn/api/user/reg",{username:"aaa"}).then(
19                function(response){
20                    console.log(response);
21                },
22                function(err){
23                    console.log(err);
24                }
25            )
26        }
27    </script>
28</body>
29

第三章网络应用(2/3) axios + vue

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

 1<body> 
 2    <div id="app">
 3        <input type="button" value="获取笑话" @click="getJoke">
 4        <p>{{ joke }}</p>
 5    </div>
 6    <!-- 官网提供的 axios 在线地址 -->
 7    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 8    <!-- 开发环境版本，包含了有帮助命令行的警告 -->
 9    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
10    <script>
11        var app = new Vue({
12            el:"#app",
13            data:{
14                joke:"你看起来很好吃"
15            },
16            methods:{
17                getJoke:function(){
18                    var that = this;
19                    axios.get("https://autumnfish.cn/api/joke").then(
20                        function(response){
21                            that.joke = response.data;
22                        },
23                        function(err){}
24                    )
25                }
26            }
27        })
28    </script>
29</body>

第三章网络应用(3/3) 天气查询

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

 1<body> 
 2    <div id="app">
 3        <input type="text" v-model="city"  @keyup.enter="weatherSearch">
 4        <a href="javascript:;" @click="changeWeather('北京')">北京</a>
 5        <a href="javascript:;" @click="changeWeather('天津')">天津</a>
 6        <a href="javascript:;" @click="changeWeather('杭州')">杭州</a>
 7        <a href="javascript:;" @click="changeWeather('重庆')">重庆</a>
 8        <ul>
 9            <li v-for="(item,index) in list">
10                {{ item.date }} {{ item.type }}{{ item.fengxiang }}
11            </li>
12        </ul>
13    </div>
14    <!-- 官网提供的 axios 在线地址 -->
15    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
16    <!-- 开发环境版本，包含了有帮助命令行的警告 -->
17    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
18    <script>
19        var app = new Vue({
20            el:"#app",
21            data:{
22                city:"苏州",
23                list:[]
24            },
25            methods:{
26                weatherSearch:function(){
27                    var that = this ;
28                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(
29                        function(response){
30                            console.log(response);
31                            that.list = response.data.data.forecast;
32                        }
33                    ).catch(
34                        function(err){}
35                    )
36                },
37                changeWeather:function(city){
38                    this.city = city;
39                    this.weatherSearch();
40                }
41            }
42        })
43    </script>
44</body>