使用vue的一些经验

虽然说VUE是数据驱动视图的框架，但有时候不得不获取DOM来获得一些样式属性，做一些操作，这时候就需要VUE获取DOM对象的方法。

vue获取DOM对象的方法：

如果是操作组件内部的DOM，可以通过给组件定义methods，这样可以通过组件内部的methods对象的方法里的默认参数e来获取组件的原生DOM对象，然后通过节点关系查找到你要的任何DOM节点和样式信息。但methods必须要绑定到某个目标元素的某种事件上。那么如果需要一加载页面就获取dom怎么办呢？

这时候可以把methods的方法在计算属性computed里调用。这样methods里的方法就能实现页面一加载就运行了。当然，正规的做法是在实例的生命周期钩子里调用。

 

不过，vue的标准搞法其实是这样的：

1、vue是数据驱动视图的框架，所以要改变组件的视图，请先改变组件的数据（所以，忘掉DOM吧）；
2、应该在组件内部实现组件自己的数据业务逻辑（也就是在组件内部实现自己的data、methods、computed、created、mounted等，然后通过props获得父组件的data做子组件自己的data的初始值，同时子组件自己的视图显示用子组件自己的data来判断和控制），这才是vue正确的搞法。为什么这样说呢？因为这样你才不会面临“在父组件中的methods要控制子组件的视图，但却操作不了当前要控制的子组件的数据”这样的问题。

这样做的好处是：后端接口可以一次发送一个订单列表的数据对象数组给你。但一次展示多少个可以由前端自己决定，同时也可以实现用this访问父组件的data，并且还可以修改子组件自己的data来决定子组件怎么显示。

    //订单卡片组件定义
    Vue.component('order-card', {
      props: ['order','statetxt','icon','getticket','delorder'],
      data:function(){
        return {
            startTime:this.order.order_time,  //倒计时开始时间，由后端给出
            minute:0,     //倒计时显示的分钟数
            second:0,     //倒计时显示的秒数
            countTime:3,   //倒计时几分钟
            state:this.order.state
        };
      },
      created: function() {
          
        // `this` 指向 vm 实例
        var that = this,
            startTime = this.startTime,
            countTime = this.countTime;
            
        if(this.state==0){
            
                if(typeof startTime == "undefined"){return};
                var now = Date.now(),timeline = countTime*60000,endtime = getFormatTime(timeline + Date.parse(startTime));
                var clock = new clocker(getFormatTime(startTime),endtime,now);
                clock.bindTimeEvent("timeout",function(){
                    that.state = 2;
                });
                clock.startAndRender(this,[null,null,"minute","second"]);
        }
      },
      template: 
    '<div class="list_card">'
    +'    <div class="card_title clearfix ft14">'
    +'        <a class="orderNumber gray fl" href="javascript:;"><b v-bind:class="icon[order.oflag]"></b><span>订单号:</span><i>{{order.order_no}}</i></a>'
    +'        <span class="order_statue gray fr" v-if="state==0||state==1">{{state[state]}}</span><b class="icon icon-del ft20 gray fr" v-if="state==2||state==3||state==4" @click="delorder"></b>'
    +'    </div>'
    +'    <div class="card_cnt">'
    +'        <div class="film_info" v-if="order.oflag == 0">'
    +'            <div class="imgBox tc fl"><img  v-bind:src="order.image[0]" /><span class="hook"></span></div>'
    +'            <p class="cutFont"><strong>片名：</strong><span>{{order.name}}</span></p>'
    +'            <p class="cutFont"><strong>开映：</strong><span>{{order.feature_time}}</span></p>'
    +'      </div>'
    +'      <!-- 图片滚动列表 STA -->'
    +'        <div class="img_scroll_box" v-if="order.oflag == 1">'
    +'            <ul class="img_list" v-bind:style="\'width:\'+(order.image.length * 70) + \'px\'">'
    +'                <li v-for="src in order.image"><img v-bind:src="src" /><span class="hook"></span></li>'
    +'           </ul>'
    +'        </div>'
    +'        <!-- 图片滚动列表 END -->'
    +'    </div>'
    +'    <div class="card_price ft14 tr">'
    +'        <span class="seatNum">共<i class="red">{{order.number}}</i>个{{ order.oflag == 0 ? "座位" : "卖品" }}</span><span class="realPrice">实付款：<i class="red">{{order.total_consume}}</i>元</span>'
    +'    </div>'
    +'    <div class="card_btm ft14 tr">'
    +'          <a class="detail fl" v-bind:href="order.url_OrderInfo"><i class="icon icon-fanhui ft14 psr"></i>详情</a>'
    +'        <span class="gray" v-if="state==0">支付剩余时间<i class="red">{{minute}}</i>分<i class="red">{{second}}</i>秒</span>'
    +'          <a class="btn btn_blue" v-bind:href="order.url_OrderInfo" v-if="state==0">付款</a>'
    +'          <a class="btn btn_blue" href="javascript:;" v-bind:tcode="order.ticket_code" v-if="state==1" @click="getticket">取票</a>'
    +'        <span class="gray" v-if="state==2">已取消</span>'
    +'          <span class="gray" v-if="state==3">已完成</span>'
    +'          <span class="gray" v-if="state==4">已退票</span>'
    +'    </div>'
    +'</div>'
    });