VUE learning diary - with axios

Axios
Axios is based on the promise of a HTTP library, you can use the browser and node.js in.

Features
. 1, created from the browser with XMLHttpRequests
2, created http request from Node.js
. 3, the API supports the Promise
. 4, and in response to interception request
5, the conversion request data and response data
6, cancellation request
7, the data is automatically converted JSON
8, the client end support defense XSRF

Introducing Axios package
using NPM:
$ NPM the install Axios

Use Bower:
$ Bower install Axios

Use cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get application

//为get类的button添加点击事件，事件作用为获取特定url的信息
        document.querySelector(".get").onclick = function () {//回调函数
            axios.get("https://autumnfish.cn/api/joke/list?num=3")//url
                .then(function (response) {
                    console.log(response)//获取成功执行的操作
                }, function (err) {
                    console.log(err)//获取失败执行的操作
                }
                )
        }

axios.post application

//为post类的button添加点击事件，将post中字典的信息上传服务器
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg", { username: "FJf" })
            														//url, 上传信息字典
            .then(function (response) {
                console.log(response)
            }, function (err) {
                console.log(err)
            })
        }

axios use with vue

God knows

Defined in the js file vue example, real-time data to be rendered by the dom vue, in vue example, we're going to get data from the server and returns data from the server to go our example, the code below:

var app = new Vue({
    el: "#app",
    data: {
        city: "",//用于存储输入栏的城市信息 v-model
        weatherList: []//用于存储服务器返回的天气数组
    },
    methods: {
        searchWeather: function () {
            //保存this
            var that = this
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(//"。。。？city="+ this.city 增加返回的条件
                function (response) {
                    console.log(response.data.data.forecast)//获取response中对应的天气数组
                    that.weatherList = response.data.data.forecast//返回天气数组到weatherlist中
                }
            ).catch(function (err) { })
        }
    }
})

After we get the data, we need to render real-time data to go dom, for which the use of v-for loop to create li, using interpolation expressions interpolation. The core code is as follows:

</div>
        <ul class="weather_list">
            <li v-for="items in weatherList">
                <div class="info_type"><span class="iconfont">{{ items.type }}</span></div>
                <div class="info_temp">
                    <b>{{ items.low }}</b>
                    ~
                    <b>{{ items.high }}</b>
                </div>
                <div class="info_date"><span>{{ items.date }}</span></div>
            </li>
        </ul>
    </div>

God knows - click the query
data vue change because the information is real-time response, we only need to vue instance, can respond to the dom, while using the Enter function when the query to obtain data from the server that is complete.

view

getCity: function (city) {
            this.city = city//根据点击事件调整city的值
            this.searchWeather()//根据city的值获取服务器数据并同步渲染
        }

html

 <div class="hotkey">
                <a href="javascript:;" @click="getCity('开平')">开平</a>  <!-- 使用自义定getCity函数更改city的值 -->
                <a href="javascript:;" @click="getCity('佛山')">佛山</a>
                <a href="javascript:;" @click="getCity('广州')">广州</a>
                <a href="javascript:;" @click="getCity('深圳')">深圳</a>
            </div>

Excerpt: https:? //Www.bilibili.com/video/BV12J411m7MG p = 29