一、日历组件

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>

下面做“换月换年”业务：

App.vue父组件

<template> <div> <MonthChooser :year="year" :month="month" :setYear="setYear" :setMonth="setMonth" > </MonthChooser> <MonthView :year="year" :month="month"></MonthView> </div></template><script> import MonthView from "./components/MonthView.vue"; import MonthChooser from "./components/MonthChooser.vue"; export default { data(){ return{ year :2018, month:8, } }, components :{ MonthView, MonthChooser }, methods : { setYear(year){ this.year = year; //设置年 }, setMonth(month){ this.month = month; //设置月 } } }</script>

MonthChooser.vue切换年月组件

<template> <div> <h1> <button @click="goPrev()">-</button> <a href="###">{{year}}</a> 年{{month}}月 <button @click="goNext()">+</button> </h1> </div></template><script> export default { props:["year","month","setYear","setMonth"], methods :{ goNext(){ if(this.month < 12){ // 如果月份小于12，可以加月 this.setMonth(this.month + 1) }else{ // 否则就加年，并且重设下年为1月 this.setMonth(1) this.setYear(this.year + 1) } }, goPrev(){ if(this.month > 1){ // 如果月份大于1月，可以减月 this.setMonth(this.month - 1) }else{ // 否则就减年，并且重设上年为12月 this.setMonth(12); //重设为12月 this.setYear(this.year - 1); //减年 } } } }</script>

切换年代视图组件：

lApp.vue父组件

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

lDecadeView.vue子组件

<template> <div> <table> <tr v-for="i in 10"> <!-- <td v-for="j in arr.slice((i-1) * 3, i * 3)"> --> <td v-for="j in 3" :class="{'cur':year == showYear(i, j)}" @click="setYear(showYear(i, j))"> {{showYear(i, j)}} </td> </tr> </table> </div></template><script> export default { props : ["year"], computed : { arr(){ var _arr = []; //计算年份的头 var tou = this.year - this.year % 10 - 10; //从得到的年份的头开始循环 + 30 for(var i = tou ; i < tou + 30;i++){ _arr.push(i); } return _arr; } }, methods : { showYear(i , j){ return this.arr[(j - 1) * 10 + (i - 1)] } } }</script><style> .cur{color:red;font-weight:bold;}</style>

【以下开始完善整个项目】：

切换视图：App.vue父组件

<template> <div> <MonthChooser :year="year" :month="month" :setYear="setYear" :setMonth="setMonth" :setView="setView" v-if="view == 'month'" ></MonthChooser> <MonthView :year="year" :month="month" v-if="view == 'month'"></MonthView> <DecadeChooser :year="year" :month="month" :setYear="setYear" :setMonth="setMonth" :setView="setView" v-if="view=='decade'" ></DecadeChooser> <DecadeView :year="year" :setYear="setYear" v-if="view == 'decade'" :setView="setView" ></DecadeView> </div></template><script> import MonthView from "./components/MonthView.vue"; import MonthChooser from "./components/MonthChooser.vue"; import DecadeChooser from "./components/DecadeChooser.vue"; import DecadeView from "./components/DecadeView.vue"; export default { data(){ return { year : 2018 , month : 5 , view : "month" } }, components : { MonthView, MonthChooser, DecadeView, DecadeChooser }, methods : { ... setView(view){ this.view = view; //设置视图切换 } } }</script>

DecadeChooser.vue年视图按钮组件：

<template> <div> <h1> <button @click="goPrev()">-</button> {{year}}年<a href="javascript:;" @click="setView('month')">{{month}}月</a> <button @click="goNext()">+</button> </h1> </div></template><script> export default{ props : ["year", "month" , "setYear","setView"], methods : { goNext(){ this.setYear(this.year + 1) }, goPrev(){ if(this.year <= 1970) return; this.setYear(this.year - 1) } } }</script>

MonthChooser.vue月视图按钮组件：

<template> <div> <h1> <button @click="goPrev()">-</button> <a href="javascript:;" @click="setView('decade')">{{year}}</a>年{{month}}月 <button @click="goNext()">+</button> </h1> </div></template><script> export default{ props : ["year", "month" , "setYear", "setMonth","setView"], methods : { goNext(){ ... }, goPrev(){ ... } } }</script>

DecadeView.vue年份视图组件：

<template> <div> <table> <tr v-for="i in 10"> <td v-for="j in 3" :class="{'cur' : year == showYear(i , j)}" @click="tdClick(i,j)" > {{showYear(i , j)}} </td> </tr> </table> </div></template><script> export default { props : ["year","setYear","setView"], computed : { arr(){ ... } }, methods : { showYear(i , j){ return this.arr[(j - 1) * 10 + (i - 1)] }, tdClick(i , j){ this.setYear(this.showYear(i , j)); //切换年份 this.setView("month"); //切换年份后，回到月视图 } } }</script>

MonthView.vue月视图早已完善。

二、UI组件库

饿了么UI：http://element-cn.eleme.io/

iviewUI ：https:///typicode/json-server

总结

以上所述是小编给大家介绍的Vue中UI组件库之Vuex与虚拟服务器初识 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！