イベントリスナー

概要

v-on

v-onディレクティブを使用することでDOMイベントをlistenすることができる。

<button v-on:click="increment">{{ count }}</button>

また省略することもできる。

<button @click="increment">{{ count }}</button>

incrementは<script setup>で宣言された関数を参照している。
refを用いてプリミティブを制御する。

<scipt setup>
	import { ref } from 'vue';
	
	const count = ref(0)
	
	function increment(){
		count.value++
	}
</script>

引数

v-onハンドラはネイティブDOMのイベントを引数として受け取る。

function onInput(e) {
  text.value = e.target.value
}