使用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>'
     });