axios、element-ui

一、axios

1、axios的作用

axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求

2、axios实例

2.1复制js资源

• vue.min.js

获取方法可参考博客[1.2初识Vue.js]:https://blog.csdn.net/qq_43102730/article/details/127258153?spm=1001.2014.3001.5502

• axios.min.js

下载链接: https://github.com/axios/axios

2.2创建 axios.html

2.3引入js

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

2.4编写js

<div id="app">
    <table>
        <tr v-for="user in userList">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        created() { //在页面渲染之前执行
            //调用方法，得到返回json数据
            this.getList()
        },
        methods:{
            getList() {
                //使用axios方式ajax请求
                axios.get("user.json")
                    .then(response => {//请求成功
                        //console.log(response)
                        this.userList =  response.data.data.items
                        console.log(this.userList)
                    }) 
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            }
        }
    })
</script>

二、element-ui

1、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

官网： https://element.eleme.io/#/zh-CN