【Vue.js】v-onを使ったクリックイベントの基本的な書き方

Vueでクリックイベントを生成する方法はいくつかありますが今回はv-onを使ったクリックイベントについて紹介していきたいと思います。

基本的な書き方は下記になります。

<button v-on:click="〇〇〇">ボタン</button>
未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

v-onを使ったクリックイベント

クリックしたらアラートを出す

html

<div id="app">
        <button v-on:click="btnOn">クリックしたらアラート出します</button>
</div>

Vueでクリックイベントを生成する場合は「v-on」を使います。

js

<script>
new Vue({
  el: '#app',
  methods: {
    btnOn: function() {
      alert('クリック');
    }
  }
})
</script>

クリックされたときに「btnOn」が呼び出されalertを画面に表示させます。

引数を使ったクリックイベント

次は引数を使ったクリックイベントになります。

まずbuttonをクリックしたら引数で「クリック」という文字を渡します。

そしてプロパティに引数を代入して画面上に表示させます。

html

<div id="app1">
        <p>{{ msg }}</p>
        <button v-on:click="delivery('クリックされました');">ボタン</button>
</div>

js

<script>
new Vue({
  el: '#app1',
  data:{
    msg: ''
  },
  methods:{
    delivery: function(ms){
      this.msg = ms
    }
  }
})
</script>

サンプル

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く!Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

vue.js
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました