使用vue的一些经验
2017-02-10 17:40 盛世游侠 阅读(3109) 评论(1) 编辑 收藏 举报虽然说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来决定子组件怎么显示。
1 //订单卡片组件定义 2 Vue.component('order-card', { 3 props: ['order','statetxt','icon','getticket','delorder'], 4 data:function(){ 5 return { 6 startTime:this.order.order_time, //倒计时开始时间,由后端给出 7 minute:0, //倒计时显示的分钟数 8 second:0, //倒计时显示的秒数 9 countTime:3, //倒计时几分钟 10 state:this.order.state 11 }; 12 }, 13 created: function() { 14 15 // `this` 指向 vm 实例 16 var that = this, 17 startTime = this.startTime, 18 countTime = this.countTime; 19 20 if(this.state==0){ 21 22 if(typeof startTime == "undefined"){return}; 23 var now = Date.now(),timeline = countTime*60000,endtime = getFormatTime(timeline + Date.parse(startTime)); 24 var clock = new clocker(getFormatTime(startTime),endtime,now); 25 clock.bindTimeEvent("timeout",function(){ 26 that.state = 2; 27 }); 28 clock.startAndRender(this,[null,null,"minute","second"]); 29 } 30 }, 31 template: 32 '<div class="list_card">' 33 +' <div class="card_title clearfix ft14">' 34 +' <a class="orderNumber gray fl" href="javascript:;"><b v-bind:class="icon[order.oflag]"></b><span>订单号:</span><i>{{order.order_no}}</i></a>' 35 +' <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>' 36 +' </div>' 37 +' <div class="card_cnt">' 38 +' <div class="film_info" v-if="order.oflag == 0">' 39 +' <div class="imgBox tc fl"><img v-bind:src="order.image[0]" /><span class="hook"></span></div>' 40 +' <p class="cutFont"><strong>片名:</strong><span>{{order.name}}</span></p>' 41 +' <p class="cutFont"><strong>开映:</strong><span>{{order.feature_time}}</span></p>' 42 +' </div>' 43 +' <!-- 图片滚动列表 STA -->' 44 +' <div class="img_scroll_box" v-if="order.oflag == 1">' 45 +' <ul class="img_list" v-bind:style="\'width:\'+(order.image.length * 70) + \'px\'">' 46 +' <li v-for="src in order.image"><img v-bind:src="src" /><span class="hook"></span></li>' 47 +' </ul>' 48 +' </div>' 49 +' <!-- 图片滚动列表 END -->' 50 +' </div>' 51 +' <div class="card_price ft14 tr">' 52 +' <span class="seatNum">共<i class="red">{{order.number}}</i>个{{ order.oflag == 0 ? "座位" : "卖品" }}</span><span class="realPrice">实付款:<i class="red">{{order.total_consume}}</i>元</span>' 53 +' </div>' 54 +' <div class="card_btm ft14 tr">' 55 +' <a class="detail fl" v-bind:href="order.url_OrderInfo"><i class="icon icon-fanhui ft14 psr"></i>详情</a>' 56 +' <span class="gray" v-if="state==0">支付剩余时间<i class="red">{{minute}}</i>分<i class="red">{{second}}</i>秒</span>' 57 +' <a class="btn btn_blue" v-bind:href="order.url_OrderInfo" v-if="state==0">付款</a>' 58 +' <a class="btn btn_blue" href="javascript:;" v-bind:tcode="order.ticket_code" v-if="state==1" @click="getticket">取票</a>' 59 +' <span class="gray" v-if="state==2">已取消</span>' 60 +' <span class="gray" v-if="state==3">已完成</span>' 61 +' <span class="gray" v-if="state==4">已退票</span>' 62 +' </div>' 63 +'</div>' 64 });