vue.js,ajax渲染页面的实例
关于上次说的用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渲染页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍ajax请求+vue.js渲染+页面加载的示例，包括了ajax请求+vue.js渲染+页面加载的示例的使用技巧和注意事项，需要的朋友参考一下 1.导入js 2.body主体 3.js代码块 以上这篇ajax请求+vue.js渲染+页面加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
web-frame 模块可自定义渲染当前网页 进程: 渲染进程 例如放大当前页至 200%. 1 const {webFrame} = require('electron') 2 webFrame.setZoomFactor(2) Copied! 方法 webFrame.setZoomFactor(factor) 用途:设置页面的缩放系数 factor Number - 缩放系数 注意:缩放系数
-
渲染过程 1.最初的最初，我们要知道 ./build/webpack.base.conf.js 这个文件，是webpack打包的主要配置文件 其中 module.exports = { entry : { app: './src/main.js' // 这里就定义了vue的入口文件 } } 知道了这个打包文件，我们就可以知道接下来的事儿了。 2.找到index.html ，可
-
页面渲染设置 页面渲染功能开启后能自动加载出网页中的ajax内容 服务器中需要安装谷歌浏览器，支持linux、win系统 centos7安装chrome的命令： wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm yum localinstall google-chrome-stable_
-
本文向大家介绍Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法，包括了Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法的使用技巧和注意事项，需要的朋友参考一下 1. 引入jquery和vue.js 2. JS 3. HTML 以上这篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法就是小编分享给大家的全部内容了，希
-
我设置3个一级路由，然后想在这3个一级路由的子路由下渲染各自不同的404页面。404路径匹配不对 为什么我访问"/c/c2"路径时，匹配到的是B的404页面即 BNotFound，而不是 CNotFound。如何改正？ AI 回答的不对，我用的是最新的 vue-router 版本 4.3.0。（我已经知道解决方法了，就在之前方式加点东西搞定各种情况下的不同404页面 ） 报错：vue-router