关于上次说的用 vue.js,zepto,node.js,webpack 等技术重构 CNode 这是一个比较入门的项目, 一般你学完 vue 就可以上手了, CNode 网站有公开的 API 所以你可以获取这个网站的所有数据接口, 然后渲染到页面上, 用 CSS 等加工一下就可以了起初, 我一直感觉好难好难好难, 虽然说不出难在哪里, 就感觉好难好难好难让我细说, 不就是用 ajax 获取数据, 然后传到组件上渲染吗, 再模仿着写样式不就好了吗是不难啊, 可是为什么我心里天然觉得很难呢?
CNode 是给了我们数据接口, ajax 也就那么几个方法后来我仔细想想, 发现了内心恐惧的地方是 ajax 是啊, 给了我数据接口, 我能获取到数据, 但是你给了我什么啊? 在没用之前, 对于 ajax 获取到的数据我是未知的人总对自己未知的东西感到恐惧! 就像同学说的, ajax 我之前以为很难的啊, 后来我用起来感觉也没什么啊我想, 大部分初学者对于 ajax 的困惑往往就在于对他获取到的数据的未知性的恐惧
既然恐惧它的未知性, 那么我们不妨好好看看这个数据! 这里我用的是 zepto 的 Ajax 方法 (现学现用嘛)
- let data = {
- page: 1,
- limit: 20,// 获取 20 个
- tab: 'all',
- mdrender: true
- };
- let topics = [];
- $.get("https://cnodejs.org/api/v1/topics", data, function (res) {
- if (res && res.data) { // 如果查到数据
- topics = res.data;
- }
- })
然后在 Console 输入 topics
ajax 获取到的是 Json 格式, 如上图所示, 我们可以看到获取到了 20 个 Json 类型的对象, 每个对象有那么多个属性比如我要获取第一个对象的 title
现在你应该看穿了 ajax 获取到的那个数据了吧, 感觉这一小步迈出去后, 整个人都轻松了
趁热打铁, 简单的用 vue 渲染一个页面
- html:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="http://zeptojs.com/zepto.js"></script>
- <script src="vue.js"></script>
- </head>
- <body>
- <div id="app">
- <ul>
- <li v-for="(item,i) in items" :key="item.id">
- <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span>
- <span class="face">
- <img :src="item.author.avatar_url" alt="":title="item.author.loginname"width="80"height="80" />
- </span>
- <span class="name" :title="item.title">{{item.title}}</span></li>
- </ul>
- </div>
- <script src="Ajax-demo1.js"></script>
- </body>
- </html>
- JS:
- new Vue({
- el: '#app',
- data: {
- items: [],
- scroller: null,
- tip: {
- page: 1,
- limit: 20,
- tab: 'all',
- mdrender: true
- }
- },
- methods: {
- getData() {
- let self = this;
- $.get("https://cnodejs.org/api/v1/topics", this.tip,
- function(res) {
- if (res && res.data) { // 如果查到数据
- self.items = res.data;
- }
- })
- }
- },
- created: function() {
- this.getData();
- console.log("success");
- },
- mounted: function() {}
- })
emmmmm, 有个小问题得说下, AJAX 是异步函数 (关于异步可以去看我上一篇博客), 它的回调函数执行环境是全局作用域, 所以在 getData 中 AJAX 的 this 指向的是 window 这有两个解决方法, 一个是像我这样的用 self 把 this 存起来, 还有一种就是用箭头函数 this 绑定
很多时候, 我们往往对未知的事物感到恐惧, 而这个恐惧往往阻碍我们迈出战胜未知的那一步, 这时候咬咬牙, 迈出去就好了, 困难永远都只存在于脑子里
以上这篇 vue.js,ajax 渲染页面的实例就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
来源: http://www.jb51.net/article/134932.htm