前回の記事はこちら↓
今回やりたい事
「ボタンをクリックしたら、表示するテキストを変更する。」を実装します。
前回作成したコードにイベントを追加していきます。
前回のコードはこちら↓
<body>
<!-- Vueのインストール -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="hello">
<p>{{message}}</p>
</div>
<!-- ここからVueを記述 -->
<script>
new Vue({
el:'#hello',
data:{
message:'Hello World!'
}
})
</script>
</body>
</html>
HTMLにボタンを追加
前回のコードにbuttonを追加します。
<div id="hello">
<p>{{message}}</p>
<button>メッセージを変更</button>
</div>
buttonタグにv-onを使ってイベント発火時の呼び出しJSメソッドを定義します。
【v-onについて】公式ページはこちら
※公式ページにも記載されていますが、v-onの中にJSを記載する事は非推奨であるといっています。イベント実装は、メソッド内にまとめることが望ましいです。
JSのメソッド名はchangeMessageにしたいと思います。
<button v-on:click="changeMessage">メッセージを変更</button>
JSにMethodを追加する
buttonがクリックされた時に呼び出されるメソッドをJSに追記します。
追記する事
1.変更後のメッセージをdataに追加（５行目）
2.methodsの追加（７行～１１行目）
new Vue({
el: '#hello',
data: {
message: 'Hello World!',
goodbye: 'GoodBye!'
},
methods: {
changeMessage: function () {
this.message = this.goodbye
}
}
})
コード内のthisは、Vueインスタンスを指しています。
this.messageであれば、vueインスタンスの中のdata.message
this.goodbyeであれば、vueインスタンスの中のdata.message
となります。
以上でクリックしたら文字列が変更されるが実装できました。
