「Vue.jsのリアクティブを実感してみます」でなんとなくVue.jsを触ってみました。
今回はVueコンポーネントにあるmethodsプロパティを使用してみます。
イベントハンドラ（v-onディレクティブ）という機能を使用してmethodsプロパティで定義したメソッドを呼び出してみます。（検知）
v-on:click='メソッド名'
とするとmethodsプロパティで定義したメソッドが動作します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| {{name}}:{{age}}歳<br> | |
| <button v-on:click='plus'>足す</button> | |
| <button v-on:click='minus'>引く</button> | |
| </div> | |
| <script src="https://jp.vuejs.org/js/vue.js"></script> | |
| <script> | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| name: 'ogura', | |
| age: 53 | |
| }, | |
| methods: { | |
| plus: function() { | |
| console.log(1); | |
| this.age = this.age + 1; | |
| }, | |
| minus: function() { | |
| console.log(-1); | |
| this.age = this.age – 1; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
buttonタグにv-onディレクティブを設定しています。ちなみにelは#appなのでdivタグ内にbuttonタグがないとv-onディレクティブは動作しませんのでご注意ください。（当たり前ですが…）
以下動作例です。
Vue.jsのmethodsプロパティ
次回はmustache（マスタッシュ）にバインドしたデータを加工するVue.filterについて勉強します！
和歌山大学工学部卒業。フリーターのち正社員として勤務しています！
vue.js勉強中です。
コメント