Vue.js 入門 #3 – Vue.js とイベントハンドリング

Nuxt.js を利用したWebアプリケーション開発の手法を紹介していきます。第三回目は Vue.js を用いて画面のイベント操作をする手法を紹介していきます。

イベント操作

データバインディングで変数を画面に紐付けられるようになったところで、イベントハンドリングの手法を確認していきましょう。

画面上のボタンやリンクをクリックしたタイミングなど、特定のタイミングで様々な処理を呼び起こす事で、Vue.js 内の変数を自在に操作出来るようになります。

クリックイベントを定義するには、 HTML 内で @click 属性を用いて、 Script 内で methods を使って処理を記述します。

<template>
  <div>
    {{count}}
    <a> click </a>
  </div>
</template>


export default { 
  data(){
    return {
      count: 0
    }
  },
  methods:{
    countup(){
       this.count++
    }
  }
}

@click="countup" と記述する事で methods 内に定義した処理 countup が クリック時に呼び出されるようになります。

countup の内部では、 data で定義した変数 count の値を 1 追加しています。JavaScript 内で data の変数を参照する際には、 this. をつけてデータにアクセスします。

v-if による表示制御

v-if は画面上で HTML要素の表示・非表示を制御する事ができます。

<template>
  <div>
    hello world
    <a> click </a>
  </div>
</template>


export default { 
  data(){
    return {
      visible: true
    }
  },
  methods:{
    toggleDisplay(){
       this.visible = !this.visible
    }
  }
}

this.visible = !this.visible! は true / false を反転させるため、true のときには false が false のときには true が割り当てられます。

v-if 内で紐付けられた変数の値をイベントで反転させることで、要素の表示非表示を切り替えることが出来るようになります。

その他のイベント

Script セクションで mounted を定義すると、画面表示時の処理を定義することが出来ます。

export default { 
  mounted(){
    console.log("component rendered!")
  }
}

mounted のセクションは data の値を初期化したりするのに便利です。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中