如何下载vue-resource.js

1.vue-resource是干嘛用的

Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

2.怎么下载

浏览器打开https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js这个网址,然后Ctrl+s保存到本地就可以了,然后js中引入本地的路径。

当然也可以使用在线的,直接在js中引入,如下:

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

如何发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{weather}}</h3>
        <h3>{{address}}</h3>
    </div>
    
</body>
<script>
    //如果我们通过全局配置了,请求的数据接口 根域名,则 在每次单独发起http 请求的时候,请求的url路径,应该以相对路径开头,前面不能带 /,否则不会启用根路径做拼接
    Vue.http.options.root = 'https://free-api.heweather.net/';
    
    var vm = new Vue({
        el:"#app",
        data: {
            weather:'',
            address:'',
        },
        created(){
            this.getInfo()
        },
        methods: {
            getInfo(){
                this.$http.get('s6/weather/now?location=beijing&key=daef4fb5807d4faa96d1b7dab16d981d').then(result => {
                    var result = result.body
                    console.log(result.HeWeather6[0])
                    this.weather = result.HeWeather6[0].now.cond_txt
                    this.address = result.HeWeather6[0].basic.admin_area
                })
                // this.$http.post('https://free-api.heweather.net/s6/weather/now',{location:'beijing',key:'daef4fb5807d4faa96d1b7dab16d981d'}).then(result => {
                //     var result = result.body
                //     console.log(result.HeWeather6[0])
                //     this.weather = result.HeWeather6[0].now.cond_txt
                //     this.address = result.HeWeather6[0].basic.admin_area
                // })
            }

        },

    })
</script>
</html>

你可能感兴趣的:(VUE,vue)