牛骨文教育服务平台(让学习变的简单)
博文笔记

用Vue.js往前端填充数据时遇到的问题

创建时间:2016-09-22 投稿人: 浏览次数:4426
绑定背景图片 v-bind:style="{ backgroundImage: "url(" + image + ")" }"


截取当前网页的参数 var message;             window.onload = main;             var src = window.location.href;             var id = src.split("?")[1].split("=")[1];

<img v-bind:src="items[$index].gameImgLogo" v-on:click="topage($index)"/>


ajax跨域访问的问题 //获取所有的游戏列表
var message;
window.onload = main;
function main(){
$.jsonp({
"url": "http://124.232.135.216:8068/gamejoynew/game/gamelist",callbackParameter: "callback",
"success": function(data) {
message = data.data;
var all = new Vue({
el:"#all",
data:{
items : message
},
methods:{
topage:function($index){
window.location = "detail.html?id=" + message[$index].gameid;
}
}
});
},
"error": function(d,msg) {
alert("获取失败,请检查您的网络设置"+msg);
}
}) }
绑定点击事件,但是用Vue的方式绑定的方法都必须写在new Vue里面

v-on:click="topage($index + 1);"


所有要用到Vue.js的都必须放在el指向的元素下,不然vue就不会执行到。


利用ajax进行后台数据访问时有时候需要跨域  ,跨域就是系统为了安全进行的一种保护措施,就是你访问的时候需要先想服务器发送请求,然后服务器再返回数据给你,这就导致了服务器返回的不是简单的json数据了,而是另外的jsonp格式的数据,用ajax直接访问时就会报错,这个时候就可以用到jQuery的一个jsonp插件可以直接处理这些数据然后返回给你json数据,只要在jQuery之后引用就可以了,一般提示说jsonp不是方法都是因为你的jsonp插件导入的位置一定要在jQuery最后一次导入之后导入。




声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。