如何下载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中引入本地的...

菜鸟也能飞呀飞

4363人浏览 · 2020-04-07 22:42:27

菜鸟也能飞呀飞 · 2020-04-07 22:42:27 发布

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里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^