日記を学習VUE - axiosと

Axios
Axiosは、HTTPライブラリの約束に基づいており、あなたは、ブラウザとのNode.jsを使用することができます。

特徴
1、のXMLHttpRequestsブラウザから作成
のNode.jsからのHTTPリクエスト作成2、
3、APIは、プロミスをサポートする
。4、および傍受要求に応答して
図5に示すように、変換要求データおよび応答データ
6、キャンセル要求
7、データは自動的にJSON変換される
8、クライアントを端部支持防衛XSRF

Axiosパッケージの紹介
：NPM使用して
インストールAxiosを$ NPMを

使用バウアー：
$バウアーは、インストールAxios

使用CDN：

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

axios.getアプリケーション

//为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アプリケーション

//为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はVUEで使用します

神は知っています

JSファイルVUEの例で定義され、DOM VUEによってレンダリングされるリアルタイムデータは、VUEの例では、我々は以下のコード、サーバーからサーバーとリターンデータからのデータは、私たちの例を行くために取得するつもりです。

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) { })
        }
    }
})

我々は、データを取得した後、V-ためのループの使用は、補間式の補間を使用して、李を作成するためにどのために、我々は、DOMを行くために、リアルタイムのデータをレンダリングする必要があります。コアのコードは次の通りであります：

</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>

神は知っている-クエリ]をクリックし
情報をリアルタイム応答であるため、クエリが完了し、サーバからデータを取得するときに、関数を入力します。使用している間、我々は唯一のVUEインスタンスに必要な、DOMに対応できるデータVUEの変化を。

ビュー

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>

抜粋します。https：？//Www.bilibili.com/video/BV12J411m7MGのp = 29