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<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是否相等，添加classhtml

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

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

来源：https://www.cnblogs.com/summerXll/p/6561619.html

标签

vue