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

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

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

<button v-on:click="〇〇〇">ボタン</button>

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

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

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

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

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

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

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

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

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

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

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

リンク

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

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

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

リンク