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