vue.js 学习内容总结

Posted 2021-01-27 senio

总体架构：

// 实例化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);
});

}
}
})