成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue初探-日期選擇器

MAX_zuo / 3056人閱讀

摘要：之前用用面向?qū)ο蟮姆椒▽崿F(xiàn)過日期選擇器，最近在練習(xí)，現(xiàn)在用實現(xiàn)一遍。需求設(shè)定實現(xiàn)一個日期選擇器，默認顯示，高亮顯示。能夠點擊上一月下一月進行日期跳轉(zhuǎn)。實現(xiàn)日期選擇有兩個比較關(guān)鍵的方法獲取當(dāng)月天數(shù)，以便循環(huán)遍歷多少天。

之前用jquery用面向?qū)ο蟮姆椒▽崿F(xiàn)過日期選擇器，最近在練習(xí)vue，現(xiàn)在用vue實現(xiàn)一遍。發(fā)現(xiàn)vue用數(shù)據(jù)驅(qū)動的方式來實現(xiàn)，感覺還不錯。

需求設(shè)定 
1.實現(xiàn)一個日期選擇器，默認顯示，today高亮顯示。
2.能夠點擊上一月、下一月進行日期跳轉(zhuǎn)。
3.點擊某一天能夠拿到日期
思路分析

之前用jquery實現(xiàn)的時候可能會考慮將dom封裝到j(luò)s中，在js中拼接html字符串，在頁面調(diào)用的地方直接引用?？紤]到vue可以進行組件式開發(fā)，日期組件完全可以多帶帶提取出一個vue文件，所以這里直接將dom寫在html中，開發(fā)時可寫在template里。

實現(xiàn)日期選擇有兩個比較關(guān)鍵的方法：1.獲取當(dāng)月天數(shù)，以便循環(huán)遍歷多少天。2.獲取當(dāng)月第一天是星期幾，以便確定第一天顯示在哪里。

在編寫組件時，我們選擇維護三個變量nowYear,nowMonth,nowDate,即vue實例上掛在的當(dāng)前年、月、日。

在進行數(shù)據(jù)初始化，也可以看做組件初始化顯示時，首先為這三個變量附初值

var date = new Date();
this.nowYear = date.getFullYear();
this.nowMonth = date.getMonth();
this.nowDate = date.getDate();

然后，將傳統(tǒng)方法中的init函數(shù)，也就是原來的dom拼接函數(shù)，在這里僅僅操作一個數(shù)組，即維護一個數(shù)組days,存儲需要顯示的當(dāng)月日期數(shù)據(jù)。

同樣我們利用vue體統(tǒng)的@click可以很方便的綁定事件，然后進行days的更新。當(dāng)days更新時，vue的watcher就會發(fā)現(xiàn)并告訴dom更新，利用Vm.$nextTick方法，執(zhí)行回調(diào)函數(shù)。即

this.$nextTick(() => {
  this.nowDate();
  this.init();
})
效果演示

目前只實現(xiàn)到需求設(shè)定的程度，于實際應(yīng)用可能稍有差距，可以理解下思路，使用時自行實現(xiàn)

demo:(http://fehey.com/Vue-items/vu...
源碼：github源碼

博客：(http://fehey.com/)歡迎前端小伙伴交流指正~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91253.html

相關(guān)文章

  • vue初探--編寫表格組件

    摘要：容器里面包含部分，其一為提供過濾器的入口其二為表格組件。數(shù)據(jù)綁定，簡寫形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫則必須是注冊組件的語法糖。下次還是上動圖吧以后基本上碰到這種使用表格呈現(xiàn)數(shù)據(jù)的組件。 在項目當(dāng)中，經(jīng)常會有表格組件，包含2部分，其一為table-header,其二為table-content 然后在這個小demo里面涉及到了vue的個別指令: v-f...

    dabai 評論0 收藏0

  • gulp和webpack初探

    摘要：首先聲明一下，和兩者關(guān)系不大，主要是團隊之前一直用構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個組件打包在一起。 首先聲明一下，gulp和webpack兩者關(guān)系不大，主要是團隊之前一直用grunt構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的gulp和webpack這些潮流工具，于是草草研究了一天，記一些筆記。 gulp...

    jhhfft 評論0 收藏0

  • 初探vue-cli 3.0

    摘要：當(dāng)你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復(fù)用的當(dāng)你選擇保存時，被保存的將會存在用戶的目錄下一個名為的文件里。 準備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本，安裝完成后可以通過vue --version來驗證是否安裝成功 項目創(chuàng)建 vue create...

    superPershing 評論0 收藏0

  • vue 手寫一個時間選擇器

    摘要：實現(xiàn)代碼于文章末尾處構(gòu)思頁面結(jié)構(gòu)組件由輸入框和日歷面板組成，寫好頁面主體結(jié)構(gòu)。輸入框點擊顯示或隱藏日歷面板方法改變布爾值控制日歷面板的顯示隱藏。同時，當(dāng)組件銷毀時，也要及時清除該監(jiān)聽器。 最近研究了 DatePicker 的實現(xiàn)原理后做了一個 vue 的 DatePicker 組件，今天帶大家一步一步實現(xiàn) DatePicker 的 vue 組件。 原理 DatePicker 的原理是—...

    sf_wangchong 評論0 收藏0

  • 開發(fā)中遇到的問題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    wenshi11019 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<