Vue第四天网络应用

最新推荐文章于 2024-06-15 14:41:39 发布

weixin_45554672

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量60

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_45554672/article/details/120521472

版权

**axios：
功能强大的网络请求库
先导包
**
两种方式：
在这里插入图片描述
get方式：
第一个function是请求成功时触发，第二个是请求失败的时候触发
里面的参数可以获取信息
axios.get(地址？key=value&key2=value2).then(function(参数){}，function(参数))

POST方式：
axios.get(地址，{key：value，key2：value2}).then(function(参数){}，function(参数))

区别：get方法和POST方法最大的区别就是传入的值一个是keyvalue键值对形式，一个是以对象形式

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

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

<body>
    <div id="aop">
        <input type="submit"  value="获取笑话" @click="ax">
        <p>{{msg}}</p>
    </div>
    <script>
       var vu=new Vue({
           el:"#aop",
           data:{
                msg:""
           },
           methods:{
               ax:function(){
                //    再axios方法内调用不到data数据 所以只能一步一步调用
                    var that=this
                   axios.get("https://autumnfish.cn/api/joke").then
                   (function(response){
                     console.log(response.data)
                    //  没有值
                     console.log(that.msg)
                     that.msg=response.data
                   },function(err){})
               }
           }
       })
    </script>
    
</body>

天气预报（作业）：
回车查询：

在这里插入代码片

<div id="aop">
    <input type="text" value="请输入" v-model="city" @keyup.enter="aa" placeholder="请输入">
    <input type="submit" value="提交">
    <ul>
        <li v-for="itme in wis">
            {{itme}}
        </li>
    </ul>
</div>
<script>
    var v=new Vue({
        el:"#aop",
        data:{
            city:"",
            wis:[]
        },
        methods:{
            aa:function(){
                var that=this
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then
                (function(response){
                       console.log(response)
                       that.wis=response.data.data.forecast
                },function(err){})
            }
        }
       
    })
</script>

**点击查询：
自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以使用this关键字点出其他方法
**

<body>
    
    <div id="aop">
        <input type="text" value="请输入" v-model="city" @keyup.enter="aa" placeholder="请输入">
        <span @click="bb('北京')">北京</span>
        <span @click="bb('上海')">上海</span>
        <input type="submit" value="提交">
        <ul>
            <li v-for="itme in wis">
                {{itme}}
            </li>
        </ul>
    </div>
    <script>
        var v=new Vue({
            el:"#aop",
            data:{
                city:"",
                wis:[]
            },
            methods:{
                aa:function(){
                    var that=this
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then
                    (function(response){
                           console.log(response)
                           that.wis=response.data.data.forecast
                    },function(err){})
                },
                // 点击查询
                bb:function(vs){
                  this.city=vs

                  this.aa();
                }
            }
           
        })
    </script>
</body>

weixin_45554672

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第四天网络应用

**axios：功能强大的网络请求库先导包**两种方式：get方式：第一个function是请求成功时触发，第二个是请求失败的时候触发里面的参数可以获取信息axios.get(地址？key=value&key2=value2).then(function(参数){}，function(参数))POST方式：axios.get(地址，{key：value，key2：value2}).then(function(参数){}，function(参数))区别：get方法和POST方法
复制链接

扫一扫