Vue中UI组件库之Vuex与虚拟服务器初识

一、日历组件

new Date()的月份是从0开始的。

下面表达式是：2018年6月1日new Date(2018, 5, 1);下面表达式是：2018年5月1日new Date(2018, 4, 1);或new Date(2018, 5-1, 1);下面表达式是：2018年5月31日（得到上个月的最后一天）new Date(2018, 5 , 0);日的参数可以是0，也可以是负数，表示上个月底的那一天。下面表达式是：2018年7月01日new Date(2018, 5, 31);

lApp.vue父组件：

<template> <div> <MonthView :year="year" :month="month"></MonthView> </div></template><script> import MonthView from "./components/MonthView.vue"; export default { data(){ return { year : 2018 , month : 8 , } }, components : { MonthView }, methods : { } }</script>

lMonthView.vue子组件

<template><div> 月视图{{year}} {{month}} {{arr}} </div></template><script> export default { props : ["year" , "month"], computed : { arr(){ //计算日历的数组：三要素 //本月1号星期几 var this1DayWeek = new Date(this.year, this.month - 1, 1).getDay(); // 本月有几天 var thisMonthDay = new Date(this.year, this.month, 0).getDate(); // 上月有多少天 var prevMonthDay = new Date(this.year, this.month - 1, 0).getDate(); console.log(benyue1haoxingqiji) console.log(benyueyoujitian) console.log(shangyueduoshaotian) } } }</script>

l显示在页面：

<template> <div> <table> <tr v-for="i in 6"> <td v-for="j in arr.slice((i-1) * 7, i * 7)">  {{j}} </td> </tr> </table> </div></template><script> export default { props:["year","month"], computed : { arr(){ var _arr = []; //存储42天的数组 // 计算日历的数组：三要素 //本月1号星期几，根据星期几得到上个月剩余天数 var this1DayWeek = new Date(this.year, this.month-1, 1).getDay(); //上个月有多少天 var prevMonthDay = new Date(this.year, this.month-1, 0).getDate(); //本月有几天 var thisMonthDay = new Date(this.year, this.month, 0).getDate(); //用本月1号星期几，推断出上月的剩余天数 for(var i = 0; i < this1DayWeek;i++){  _arr.unshift(prevMonthDay - i) }  //循环本月天数（累加），从数组末尾插入 for(var i = 1; i <= thisMonthDay;i++){  _arr.push(i) } //补充下月的天数（满42天为止） var i = 1; while(_arr.length != 42){  _arr.push(i++); }  return _arr; } } }</script>

l显示农历，安装插件：

npm install solarlunar --save

<template> <div> <h1>月视图 {{year}}年{{month}}月</h1> <table> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> <tr v-for="i in 6"> <td v-for="j in arr.slice((i-1) * 7, i * 7)">  <p class="p1">{{j.d}}</p>  <p class="p2">{{j.n}}</p> </td> </tr> </table> </div></template><script> import solarLunar from 'solarLunar'; export default { props:["year","month"], computed : { arr(){ var _arr = []; //存储42天的数组 // 计算日历的数组：三要素 //本月1号星期几，根据星期几得到上个月剩余天数 var this1DayWeek = new Date(this.year, this.month-1, 1).getDay(); //上个月有多少天 var prevMonthDay = new Date(this.year, this.month-1, 0).getDate(); //本月有几天 var thisMonthDay = new Date(this.year, this.month, 0).getDate(); //用本月1号星期几，推断出上月的剩余天数 for(var i = 0; i < this1DayWeek;i++){  _arr.unshift({  d: prevMonthDay - i,  n: solarLunar.solar2lunar(this.year, this.month-1, prevMonthDay - i).dayCn  }) }  //循环本月天数，累加，从数组末尾插入 for(var i = 1; i <= thisMonthDay;i++){  _arr.push({  d: i,  n: solarLunar.solar2lunar(this.year, this.month, i).dayCn  }) } //补充下个月的天数（满42天为止） var i = 1; while(_arr.length != 42){  _arr.push({  d : i,  n : solarLunar.solar2lunar(this.year, this.month+1, i).dayCn  });  i++; } console.log(_arr) return _arr; } } }</script>