vue初學實踐之路——vue簡單日歷組件(2)

上一篇我們已經實現了基本的日歷顯示功能，這一次我們要加上預定的功能

廢話不多說，上代碼

<div id="calendar">
    <!-- 年份 月份 -->
    <div class="month">
        <ul>
            <!--點擊會觸發pickpre函數，重新刷新當前日期 @click(vue v-on:click縮寫) -->
            <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
            <li class="year-month" @click="pickYear(currentYear,currentMonth)">
                <span class="choose-year">{{ currentYear }}</span>
                <span class="choose-month">{{ currentMonth }}月</span>
            </li>
            <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
        </ul>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li style="color:red">六</li>
        <li style="color:red">日</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
        <!-- v-for循環 每一次循環用<li>標簽創建一天 -->
        <li  v-for="dayobject in days" style="height: 120px;">
            <!--本月-->
            <!--如果不是本月  改變類名加灰色-->

            <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>

            <!--如果是本月  還需要判斷是不是這一天-->
            <span v-else>
          <!--今天  同年同月同日-->
                <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">{{ dayobject.day.getDate() }}</span>
                <span v-else>{{ dayobject.day.getDate() }}</span>
            </span>
            <!--顯示剩余多少數量-->
            <p v-if="leftobj[dayobject.index]">剩余：<span style="color: red" >{{leftobj[dayobject.index].count}}</span></p>
            <!---->
            <button @click="order(dayobject)" v-if="leftobj[dayobject.index]">預定</button>
        </li>
    </ul>
</div>

js代碼

<script>
    var myVue=new Vue({
        el: '#calendar',
        data: {
            currentDay: 1,
            currentMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            leftobj:[    //存放剩余數量
                {count:1},
                {count:2},
                {count:3},
                {count:4},
                {count:5},
            ],

        },
        created: function() {  //在vue初始化時調用
            this.initData(null);
        },
        methods: {
            order:function (day) {  //預定函數
                if(this.leftobj[day.index].count>=1)
                    this.leftobj[day.index].count--;
                else
                    alert('已經沒有位置了')
            },
            initData: function(cur) {
                var leftcount=0; //存放剩余數量
                var date;
                var index=0;   //控制顯示預定的天數 ，比如下面設置只能預定三天的
                //this.initleftcount(); 每次初始化更新數量
                //有兩種方案  一種是每次翻頁 ajax獲取數據初始化   http請求過多會導致資源浪費
                // 一種是每次請求 ajax獲取數據初始化    數據更新過慢會導致缺少實時性
                //還可以setTimeout 定時請求更新數據  實現數據刷新（可能會更好）


                if (cur) {
                    date = new Date(cur);
                } else {
                   var now=new Date();
                    var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
                    d.setDate(35);
                    date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;

                this.currentWeek = date.getDay(); // 1...6,0
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第7個位置，前面6個
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);

                    var dayobject={};
                    dayobject.day=d;
                    var now=new Date();
                    if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
                    {
                        dayobject.index=index++;//從今天開始顯示供預定的數量
                    }
                    else  if(index!=0&&index<3)
                        dayobject.index=index++;//從今天開始3天內顯示供預定的數量

                    this.days.push(dayobject);//將日期放入data 中的days數組 供頁面渲染使用


                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject={};
                    dayobject.day=d;
                    var now=new Date();
                    if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
                    {
                        dayobject.index=index++;
                    }

                   else if(index!=0&&index<3)
                        dayobject.index=index++;
                    this.days.push(dayobject);
                }

            },
            pickPre: function(year, month) {

                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒數第二天
                // setDate(dx) 參數dx為 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickNext: function(year, month) {
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(35);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickYear: function(year, month) {
                alert(year + "," + month);
            },

            // 返回 類似 2016-01-02 格式的字符串
            formatDate: function(year,month,day){
                var y = year;
                var m = month;
                if(m<10) m = "0" + m;
                var d = day;
                if(d<10) d = "0" + d;
                return y+"-"+m+"-"+d
            },


        },
    });

</script>

 

 原理就是使用v-if判斷當前日期是否具有index屬性，如果有，就說明當前天是可供預定的。

在vue data中加入leftobj對象數組，存放每一天剩余數量count的值。

 這里有個問題，為什么不直接用一個數組存放每一天的值呢。例如：leftcount:[1,2,3];這樣多簡便

原因就牽扯到vue 的響應式原理：

看vue的官方介紹

如何追蹤變化

把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是僅 ES5 支持，且無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。
用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制台在打印數據對象時 getter/setter 的格式化並不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。
每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

 

 

意思就是vue會給data中的每一個對象加上getter/setter屬性，由於上面舉例leftcount數組中的值都為基本數據類型，無法添加getter/setter屬性，所以vue無法渲染它們。

所以我們應該使用對象數組的方式，vue就可以給數組中的每一個對象添加getter/setter屬性。

這是一個需要注意的地方。

關於用戶預定的這一部分就是這樣，下一篇再說管理員設置的部分。

github此項目地址：https://github.com/herozhou/vue-order-calendar