vue 懒人_vue项目中常用的

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

-

+

//加减数量,通过传入的参数判断数量的加减，

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’:}，

//调用下面的方法，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

全选

取消全选

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

{{payDesc}}

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传递

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

• {{item.title}}

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'}]

}

},