v-show控制页面的切换，隐藏显示
在要加事件的地方，加@click.stop.prevent="card"
在要隐藏显示组件的地方，加v-show="showCard"
如图；
export default { name: 'center', data () { return { // 折叠 fold: false, showCard: false } }, methods: { card () { this.showCard = !this.showCard //这个很重要，如果写成this.showCard = true,只能点击一次
} } }
通过操作对象的变量或者模型（data里面的数据可以称为模型），改变dom，而不是直接操作dom，间接达到vue和js的分离。
1.价格的增减功能，通过点击，数量实现改变
用到v-model双向绑定，
//part指的是循环遍历里面的part,part in res
<span @click="changeMoney(part,-1)">-</span> <!--//根据-1和+1判断用户是点击加还是法,记住此处的part和下面要绑定数据的input里面的part一样的--> <input type="text" v-model="part.productNumber"> <span @click="changeMoney(part,+1)">+</span>
//加减数量,通过传入的参数判断数量的加减， changeMoney:function(product,way){ if(way>0){ product.productNumber++; }else{ product.productNumber--; if(product.productNumber<1){ //如果减到小于1的时候，让商品至少为1，才能购买 product.productNumber=1 } } }
2.购物车的单选按钮，选中商品功能，接口里面没有字段，是监听不到的，通过$set设置一个不存在的变量，放在data里面，
两种方法，1.全局注册 Vue.set(item,"checked",true);2.局部注册 this.$set(part,"checked",true);
如果一个变量不在data里面声明或者不在对象里面，用vue监控不到属性（一个对象里面的变量不存在，解决办法）
思路：先判断商品是否选中，然后取反
注意：绑定class，一定是数组或者对象，{‘key’:}，
<!--//记得class是个对象，判断class是否存在checked指的是要判断的class，后面是他的状态，part.checked中的part指的是在遍历中的索引的对象，与上面的遍历应该一致-->
<--如果json里面有字段，应该写成v-bind:class="{'checked':part.checked}"，part指的是字段-->
<span class="checkbox fff" v-bind:class="{'checked':part.checked}" @click="selectProduct(part)"></span> //调用下面的方法，part.checked=true，即为checked:true
//选中商品的方法 selectProduct:function(part){//part是遍历里的数组 if(typeof part.checked=='undefined'){//1.通过typeof判断变量是否存在,json；里面没有字段checked是否选中，所以需要判断 // Vue.set(item,"checked",true)//第一种全局注册,全局的set就是在data里面创建，用set创建checked属性放到part变量里面，值为true，此时，part.checked=true this.$set(part,"checked",true);//局部注册,带有$符号的为局部变量，不带$全局，例如过滤器,$.set可以在遍历part里面创建 }else{ part.checked=!part.checked; //取反 } }
3.全选功能
思路：绑定class,通过判断class
都不存在的属性，如果是在item遍历的时候需要加，用$set加，如果是页面加属性，加在data里面，调用data的全局变量
@click里面可以放表达式，可以放一元表达式和三元表达式，例如：checkAllFlag==true?true:false,调用函数，不能放业务逻辑，不能写，例如var checkAllFlag=true
<!--就是将'checked':true通过一个checkAll的属性变量来传递，最终目的是使checked=true-->
<div class="checkbox-wrap left"><span class="checkbox all" :class="{'checked':checkAllFlag}" @click="checkAllFlag=true"></span>
</div>
<!-- //在data里面定义一个变量,click里面可以放表达式，可以放一元表达式和三元表达式，例如：checkAllFlag==true?true:false,调用函数，不能放业务逻辑，不能写，例如var checkAllFlag=true -->
<div class="check-text"><span class="checked-all" @click="checkAll(true)">全选</span>
<span class="unchecked-all" @click="checkAll(false)">取消全选</span></div>
data :function() { return { produceList:[], pro:'', tit:'this id ', checkAllFlag:false//一定要定义这个变量，否则不会监听 } }
//全选 checkAll:function(flag){//flag判断是全选还是取消取消 this.checkAllFlag=flag; var _this=this;//作用域发生变化， //控制当前全选按钮是否选中取消选中把当前选中的取反 // if(this.checkAllFlag){//如果选中的话，遍历商品列表 this.produceList.forEach(function(part,index){ if(typeof part.checked=='undefined'){//判断变量是否存在,json；里面没有字段checked是否选中，所以需要判断 _this.$set(part,"checked",_this.checkAllFlag);//局部注册,带有$符号的为局部变量，不带$全局，例如过滤器 }else{ part.checked=_this.checkAllFlag; //取反 } }) // } }
click事件，报错[Vue warn]: Invalid handler for event "click": got undefined，傻逼百度了好久，后来发现是methods写错了，记住是methods不是method
设置一个不存在的字段，先引用vue，在使用vue.set方法
Vue.set(this.food, 'count', 1);
通过条件判断加不同的class
<div class="content-right" :class="payClass">
<div class="pay">{{payDesc}}</div>
</div>
payClass() {
if (this.totalPrice < this.minPrice) {
return 'not-enough';
} else {
return 'enough';
}
}
饿了么不能用vm.$dispatch，可以使用vue2.0的eventBus实现兄弟组件通信，解决这个问题，这个网址讲解的还是挺仔细的http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
1.新建一个EventBus.js,js内容为以下，在goods.vue和cartcontrol.vue中，分别引用
import Vue from 'vue'; export default new Vue();
2.cartcontrol.vue
methods: { addCart(event) { // 防止多次被点击 if (!event._constructed) { return; } if (!this.food.count) { // 添加food不存在的字段时 需要调用vue.set方法添加，这样才可以通过vue观测到这个字段的变化 Vue.set(this.food, 'count', 1); } else { this.food.count++; } Bus.$emit('cart.add', event.target); },
}
3.goods.vue
created() {
Bus.$on('cart.add', el => {
this.$nextTick(() => {
this.$refs.shopcart.drop(el);
});
});
},
3.shopcart.vue
methods: {
drop(el) {
console.log(el);
}
}
会发现已打印出dom
报错Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
原因：只能有一个根节点，所以在外层要包裹一个层
打开新页面
父组件可以调用子组件的方法，子组件不能调用父组件的方法，
调用子组件的方法：
父组件：通过refs传递
<food :food="selectedFood" ref="food"> </food>
methods: { selectFood(food, event) { if (!event._constructed) { return; } this.selectFood = food; this.$refs.food.show(); //调用子组件的方法 } },
子组件food的方法：
export default {
props: {
food: {
type: Object
}
},
data() {
return {
showFlag: false
};
},
methods: {
show() {
this.showFlag = true;
}
}
};
created(),mounted()....这些生命周期钩子函数，所以要加()，
methods,coputed...这些是对象，里面还可放属性或方法，vue内部会遍历这些对象加到对应的宿主上。
data(),created() 都是 简写。
图片自适应，宽度和高度大小一样，实现高速自适应
https://segmentfault.com/a/1190000004231995
.image-header {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
over-flow:hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
报错Unexpected tab character，解决方法：在eslint.js里面加入
'no-tabs':'off',
vue对点击的li添加class,传值
在data里面定义一个i,在方法里面，让i等于index，通过判断i和index是否相等，添加class
html
<div class="news"> <ul> <li v-for='(item, index) in items' @click="toggle(item, index)" :class="{bgRed: i==index}"> <span>{{item.title}}</span> </li> </ul> </div>
js
toggle (item, index) {
this.isDetail = !this.isDetail
this.title = item
this.i = index
}
data定义i
data () { return { news: { }, isDetail: false, i: -1, title: '', items: [{ content: '标题1内容', title: '标题1' }, { content: '2 item', title: '标题2' }, { content: '3 item', title: '标题3' }] } },
