Vue.js--基于$.ajax获取数据并与组件的data绑定

Vue.js与jQuery不冲突？？？

90%的数据基本都是从服务器请求的，前端和后端的数据交互一般是通过ajax请求完成。

ajax的请求方式有几种？

1.原生js
2.jq
3.Vue的axios

Vue ajax，前提要装好Vue环境

import axios from "axios"; //引入
export default {
        mounted: function() {
            //保存this的指向保证是当前的vue对象
            var self = this;
            //当index被引入的时候渲染时开始发起请求
            axios({
                //接口
                url: "https://m.maizuo.com/v4/api/film/now-playing",
                //请求方式
                methods: "get",
                //请求的数据
                data: {
                    count: 10, //请求10条数据
                    page: 2, //请求的页数
                },
            }).then(function(res) {
                //成功回调
                console.log(res);
                //绑定成功请求的数据，并且绑定数据
                self.film = res.data.data.films;
                self.Pages = res.data.data.page;
            }).then(function(err) {
                //失败回调
                console.warn(err);
            });
        },
        data: function() {
            return {
                film: [],
                Pages: {},
            }
        }
    }