Java初級学習

vueを使用して簡単なカレンダーデモを作成する



Write Simple Calendar Demo Using Vue



最近、プロジェクトで要件が発生しました。 vueでコンポーネントを作成します。このコンポーネントは、現在の日付と、現在の日に処理する必要のあるアイテムを表示します。処理されたアイテムの情報は、バックエンドインターフェイスの形式で返されます。

要件を確認した後、作成してここに記録しました。これで要件は単純に実現されましたが、後で変更する必要があることは確かです。



vueについて言うことはあまりありませんが、vueで使用されているのはネイティブJS

効果画像（~~基本的にスタイルなし、非常に低い）


実装されているのは第1レベルのバージョンです。コードのフォールトトレランスと一部のパフォーマンス処理は記述されていません。

言うまでもありませんが、コードは次のとおりです。

1つ目はVueのHTML構造で、これは非常に単純です。特定の使用シナリオに応じて追加または削除できる他の時間形式を追加します。

Today is year month day Last month / Next month次は、私たちのニーズを実装するJSコードの場所です。 jsコードに関しては、コード内にいくつかのコメントがあり、コードのコメントに従って解釈できますexport default { data() { return { newDate:'',//Current date information ynow:'',//Current year mnow:'',//The current month dnow:'',//Current days firstDay:'',//The first day firstnow:'',//current week m_days: [],//Number of days per month tr_str:'',//Number of lines } }, methods: { getDaysInfo() { var _this = this this.sureDate(_this) }, is_leap(year) {//Judge whether it is a leap year return (year%100==0?(year%400==0?1:0):(year%4==0?1:0)) }, //The following is a method of drawing a table, this method will draw the table we need according to the data drawTable(jsonHtml) { var _this = this var str = ` Sunday Monday Tuesday Wednesday Thursday Friday Saturday ` var idx = '',date_str = '',isRed = '',hasMsg='' for(var i = 0 i<_this.tr_str i++) { str+='' for(var k = 0 k <7 k++) { idx = i*7+k isRed = (k===0||k===6)?'isRed':'' date_str=idx-_this.firstnow+1 (date_strthis.m_days[this.mnow]) ? date_str=' ' : date_str=idx-_this.firstnow+1 date_str==_this.dnow?hasMsg=''+date_str+'':hasMsg=''+date_str+'' for(var l = 0, len = jsonHtml.length l ' date_str==_this.dnow?hasMsg=''+date_str+''+ newStr+'':hasMsg=''+date_str+''+ newStr+'' } } str+=hasMsg } str+='' } var table = document.getElementById('table') table.innerHTML = str }, //The meanings represented by the two parameters are this object and whether the current operation is being modified sureDate(_this,other) { this.newDate = new Date() this.ynow = this.newDate.getFullYear() if(!other) { this.mnow=this.newDate.getMonth() //month } this.dnow=this.newDate.getDate() //Today's date this.firstDay = new Date(this.ynow,this.mnow,1) this.firstnow=this.firstDay.getDay() this.m_days = [31,28+this.is_leap(this.ynow),31,30,31,30,31,31,30,31,30,31] this.tr_str = Math.ceil((_this.m_days[this.mnow] + this.firstnow)/7) this.showMsg() }, preMon() { var _this = this this.mnow-- this.sureDate(_this,'up') }, nextMon() { var _this = this this.mnow++ this.sureDate(_this,'next') }, //What is returned through the interface is our current month corresponding to the matters that need to be handled in the calendar showMsg() { var jsonHtml = [{ date: 2, msg:'Dine' }, { date: 3, msg:'Sleep' }, { date: 4, msg:'Play Doudou' }, { date: 6, msg:'Doudou is not at home' }, { date: 12, msg: '~~~~~' }, { date: 15, msg:'What to do~~~~' }, { date: 20, msg:'Find Doudou' }] this.drawTable(jsonHtml) } }, mounted() { //Draw the table corresponding to the number of days in the current month this.getDaysInfo() //Get the data and display it to the corresponding position }

jsコードは現在非常に多く、関数の予備的な実現に過ぎず、他には何も処理されません~~~~


特定の実装は私のgithubから入手できます- クリックしてリンクを開きます