推荐项目：Vue-Mobile-Calendar - 一款高效易用的移动端日历组件

<template>
  <div id="app">
    <vue-mobile-calendar
      :is-visible="isCalendarVisible"
      :selected-date="selectedDate"
      @close="isCalendarVisible = false"
      @select="onSelectDate"
    />
    <button @click="isCalendarVisible = true">打开日历</button>
  </div>
</template>
 
<script>
import VueMobileCalendar from 'vue-mobile-calendar';
import 'vue-mobile-calendar/lib/vue-mobile-calendar.css';
 
export default {
  components: {
    VueMobileCalendar
  },
  data() {
    return {
      isCalendarVisible: false,
      selectedDate: new Date()
    };
  },
  methods: {
    onSelectDate(date) {
      this.selectedDate = date;
      this.isCalendarVisible = false;
    }
  }
};
</script>

这个代码实例展示了如何在Vue应用中集成vue-mobile-calendar组件，并在用户选择日期后更新选定日期的值。这个例子简洁明了，并且使用了Vue的最佳实践。