總體架構：

// 實例化vue對象（MVVM中的View Model）
new Vue({
// vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析
el:‘#app‘,
data:{
// 數據 （MVVM中的Model）
name:"",
price:"",
num:"",
pic:""
},
//頁面加載執行方法
created: function () {
　　　　　　 //設置請求路徑
var url = "http://www.tptp.com/";
// 發送請求:將數據返回到一個回到函數中
_this= this;
// 並且響應成功以後會執行then方法中的回調函數
axios.get(url).then(function(result) {
// result是所有的返回回來的數據
// 包括了響應報文行
// 響應報文頭
// 響應報文體
console.log(result.data.data.goods_pic);
_this.name = result.data.data.goods_name;
_this.price = result.data.data.goods_price;
_this.num = result.data.data.goods_num;
_this.pic = url+‘uploads‘+‘/‘+result.data.data.goods_pic;
});
},
//事件
methods:{
jia:function(){
this.num++
},
jian:function(){

if(this.num >1){
this.num--;
}else{
alert("請求出錯");
}
},
addtocar:function() {
var url = "http://www.tptp.com/index/Index/addtocar";
var num = _this.num;
var price = _this.price;
// post有兩個參數
//參數1:請求的路徑
//參數2:提交的參數
//提交參數的兩種形態:
// 1.可以直接傳入字符串 name=張三&age=19
// 2.可以以對象的形式傳入{name:"三",age:19}
axios.post(url,{num:num}).then(function(res) {
console.log(res);
});

}
}
})

vue.js 學習內容總結