メソッドとイベントハンドリング - vue.js
<div id="example"> <button v-on:click="greet">Greet</button> </div> 私達は greet という名のメソッドに click イベントリスナをバインドします。ここでは、私達の Vue インスタンスでメソッドを定義する方法は以下になります: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // `methods` オブジェクトの下にメソッドを定義します methods: { greet: function (event) { // 内部メソッドの `this` は vm インスタンスを指します alert('Hello ' + this.name + '!') // `event` はネイティブ DOM イベントです alert(event.target.
【Vue.js入門】v-on、v-forを使ってみよう！ - Qiita
Vue.jsの入門で必ず出てくるv-onとv-for v-onとv-forを使うことができれば以下のようなToDoアプリもすぐ作れました！ 今回のつまづきいたところ addボタンを押してもページがリロードされる フォームに打ち込んだ文字が消えない それではVue.jsだけで簡単なToDoアプリを作っていきましょう！ まずは雛形をつくる まずはJavaScript側。 【初心者向け】Vue.jsの双方向データバインディングと同じ作りをしているため、説明は簡単に書きます。 main.js (function(){ "use strict"; var vm = new Vue({ el: '#app', data: { todos: [ 'task1', 'task2', 'task3' ] } }); })(); new Vueで新規作成したインスタンスを変数vmに与えます。 HTML側の"i
メソッドとイベントハンドリング - vue.js
インラインメソッドハンドラメソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定することもできます: <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) 結果: 時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な $event 変数を使うことでメソッドに DOM イベントを渡すことができます: <button v-on:click=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
