01.Vue请求数据

1.请求数据的渲染

下面展示一些 页面渲染的代码。

<div id="app" >
	//items是一个数组，item是items数组中的一个对象
    <div v-for="item in items">
        <h1>{{item.id}}</h1>
        <h2>{{item.name}}</h2>
        <img :src="item.icon">//属性绑定需要用到“:”
    </div>
</div>

2.页面引入相关文件

#这里用到vue.js和jquery.js两个插件，其中jQuery是网上引入的jQuerycdn

下面展示一些 vue.js 和 jquery.min.js。

script src="./node_modules/vue/dist/vue.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

3.编写Vue实例

下面展示一些 vue.js 和 jquery.min.js。

<script>
    let vm =new Vue({
        el:"#app",
        data:{
            items:[],//定义页面上的数组
        },
        methods:{
            getData:function () {
            //发送一个ajax请求（get）
                $.get("https://locally.uieee.com/categories",function (resp) {
                //将请求到的数组直接赋值给页面上需要用到的数组
                    vm.items=resp;//不能用this,this指代当前函数
                })
            }
        },
        created() {
        //写到生命周期函数中可以直接调用，不用其他事件
            this.getData();//调用实例中的方法时需要用到this
        }
    })
</script>

数据

这样，一个简单的数据请求就完成了！