Vue怎麼和AJAX和其他的方法結合在一起呀？

是這樣？還有如何解決和JQ的衝突呀？

$.ajax({

url : 「" ,

success : function(data){

new Vue({

el: "#app",

data: data

})

}

})

---

建議把ajax寫在vue的methods里

var vm = new Vue({
el: "#app",
data: {
data: {}
},
methods:{
getData: function(){
$.ajax({
success: function(data) {
vm.data = data;
}
})
}
}
});
vm.getData();


---

做大型項目的時候肯定會配合 vue-router 和 vue-loader 之類

所以實際上一個vue 組件應該是這樣

&

....

&

&

export default {

name:"",

data:{},

ready() {},

attached(){},

methods:{

}

}

&

所以 完全可以在 methods 裡面寫一個方法 getData 然後 賦值給 data 里的 某個數據模型

在ready 裡面 調用 getData 這個方法

這樣當這個組件載入時便會自動去getData 了

---

為什麼不用vue-resource啊

---

直接使用axios吧，現在官方都推薦使用它了，注意解決跨域問題就好了（如果不能再服務端設置的話，就試試withCredentials: true）。另外，非要使用jQuery的話，可以使用npm install jQuery後，在入口main.js中引入import $ from "jquery"，這可能會與common.js衝突，然後在webpack.config.js中添加

plugins: [
// new webpack.optimize.CommonsChunkPlugin("common.js"),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],


基本上就能夠使用了。

---

本人也是新手，愚見：可以試試vue-resource，當然更推薦axios。語法很簡單，和jq的ajax類似。

這是 vue-resource

this.$http.post("url", data)
.then(response =&> {
//success do something
//可以在data里定義一個變數來接response的返回值。
//在created（vue1是ready）里調用可以在渲染完成前獲取到數據。
}, response =&> {
//error do something
})


---

可以將ajax寫在ready中,通過$.set設置data裡面的數組，不過要處理好this的衝突問題

var app = new Vue({

el: "#app",

ready: function () {

var that = this; //將this變數賦值給that，防止於ajax裡面的this衝突

$.ajax({

type: "get",

url: "book.json",

dataType: "json",

success: function (val) {

that.$set("books", val);

}

});

},

data: {

books: ""

}

})

---

推薦閱讀：