今回は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の役割を解説しました。
コメント