Vue.jsの@click(v-on:click)とmethodsを使用してボタン内の文字を書き換える

今回はVue.jsの@click(v-on:click)とmethodsを使用してボタン内の文字を書き換える簡単な動作を実現するコードをご紹介します。@clickとmethodsの使い方の基本が理解できると思います。

以下の画像のHelloボタンをクリックします

ボタン内の文字が変更されます

実際のコードを見てみましょう

C:/npm_sample/src/App.vue

<template>
  <div id="app">
      <button @click="changeMessage" class="messageButton">{{ message }}</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    changeMessage() {
      if (this.message === 'Hello') {
        this.message = 'Updated message';
      } else {
        this.message = 'Hello';
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; /* Flexboxを使用してレイアウトを調整 */
  justify-content: center; /* 横方向に中央寄せ */
  align-items: center; /* 縦方向にも中央寄せ */
  height: 100vh; /* 親要素の高さをビューポートの高さと同じにする */
}

.messageButton {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 8px;
}
</style>

以下コードの解説です。

<template>セクション

• <template>タグ内には、VueコンポーネントのHTMLマークアップが含まれます。
• id="app"を持つ<div>タグは、このVueアプリケーションのルート要素です。
• {{ message }}は、Vueインスタンスのデータプロパティからmessageの値を動的に表示するためのデータバインディングです。初期値は’Hello’に設定されています。
• @click="changeMessage"は、ボタンがクリックされたときにchangeMessageメソッドを呼び出すためのイベントリスナーです。

<script>セクション

• <script>タグ内には、VueコンポーネントのJavaScriptロジックが含まれます。
• name: 'App'は、このVueコンポーネントの名前を指定します。
• data()は、コンポーネントの初期データを返す関数です。この例ではmessageプロパティを持ち、初期値は’Hello’です。
• methodsオブジェクト内には、コンポーネントで使用されるメソッドが含まれます。changeMessageメソッドは、messageの値を’Hello’と’Updated message’の間で切り替えます。

<style>セクション

• <style>タグ内には、コンポーネント専用のCSSスタイルが含まれます。
• この例では、#appと.messageButtonに対するスタイリングが定義されています。これにより、ボタンの見た目がカスタマイズされ、アプリケーションが中央に配置されます。

基本的な@clickとmehodsの役割を解説しました。