Vue でボタンをクリックした時の処理
Vue でボタンをクリックした時の処理Vue 公式チュートリアルのステップ4です。このステップでは、Web ブラウザ上に作成した「ボタン」をクリックした時の処理を学習します。前回までのポイントをもう一度例によって最初は、前回までの復習です。 前回までに、Vue の「部品」を記述するファイル「.vue」は、HTML・CSS・Javascript の記述を書く部分に分かれています。* HTML は、「template」のタグの部分に記述します。* CSS は、「style」のタグの部分に記述します。* Javascript は、「script」のタグの部分に記述します。 Vue では、この三つの部分をうまく連携させて、色々な機能を実現しています。 特に、HTML の部分は、標準の HTML の書き方とは、若干違う部分もあるので、その辺りを意識しながら、Vue 独自の書き方をマスターする必要があります。これまでは、この三つの基本部分を使った例と、簡単な連携を学習してきました。今回学ぶのは?今回は、HTML と Javascript の連携で、新たに「ボタン」を使った事例を学習します。 ボタンをクリックする度にボタンに表示されている数字を1づつ増やして表示をするという機能を実現します。以下のコードが変更を加える前のコードです。<script>export default { data() { return { count: 0, }; },};</script><template> <!-- make this bu
0