時刻表示やボタンの動きをつけていきましょう。

日付と時間の表示

HTMLの入力はとても短くでこれだけです。

<div id="ad_date">
本日は {{ yeartoday(date) }} です。<br />
{{ weekandtime(date) }}です。
 </div>

Javascriptの設定は、関数を作成しreturnで値を返して表示させます。
年月日や時刻は、Javascriptメソッドを使用します。

new Vue({
  el: "#ad_date",
  data: {
    date: new Date(),
  },
  methods: {
    yeartoday(date) {
      return (
        date.getFullYear() + "年" +  (date.getMonth() + 1) + "月" + date.getDate() + "日"
      );
    },
    weekandtime(date) {
    	return (
       date.getHours() + "時" + date.getMinutes() + "分" + date.getSeconds() + "秒"
      );
    }
  },
});

Vue.jpを使わない場合

Vue.jpを使わずに、Javascriptで書いた場合は下記の通りになります。

<span id="today"></span>

Vue.jpの方がスッキリしているように思います。
より複雑になれば、より比較しやすいと思います。

console.log(todayDate());
function todayDate() {
     document.getElementById("today").innerHTML = getDate();
}
function getDate() {
        let data = new Date();
        let i = data.getFullYear() + "年" + (data.getMonth() + 1) + "月" + data.getDate() + "日" + data.getMinutes() + "時" + data.getMinutes() + "分";
        return i;
}

おさらい

メソッドは、Javascriptをそのまま使用できるので慣れている方は理解しやすいと思います。