v-on
v-onは、イベント発動時にコードを実行(イベントハンドラー)されるためのディレクティブになります。
[ HTML ] =============================
<要素名 v-on:イベント名=”メソッド名”>
<要素名 @イベント名=”メソッド名”>※省略時
[ Vue.js ] =============================
methods: {
メソッド名() {
動作内容
},
},
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-onについて</title>
</head>
<body>
<div id="app">
<button @click="onclick">ボタン</button>
<p>{{ message }}</p>
</div>
<script src="./js/on.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
onclick() {
this.message = "こんにちは";
},
},
}).mount("#app");
{{ message }}
主なイベント一覧
focus / blur
focus 要素にフォーカスが入ったとき
blur 要素からフォーカスが外れたとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" />
<title>v-on focus/blurについて</title>
</head>
<body>
<div id="app">
<p>テキストボックスをクリックしたり、解除してください。</p>
<input class="focus-area" @focus="focusMessage" @blur="blurMessage"/>
<p>{{ message }}</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/focus.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
focusMessage() {
this.message = "フォーカスしましたね!";
},
blurMessage() {
this.message = "フォーカスを外しましたね!";
},
},
}).mount("#app");
.focus-area {
width: 40%;
border: 1px solid black;
cursor: pointer;
}
テキストボックスをクリックしたり、解除してください。
{{ message }}
change
change 要素の値を変更したとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-on changeについて</title>
</head>
<body>
<div id="app">
<p>選択メニューを変更してください。</p>
<select @change="changeMessage">
<option value="">ー</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>{{ message }}</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/change.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
changeMessage(e) {
let change_value = e.target.value; // 値を取得
// 三項演算子
this.message =
change_value == 0
? "番号を選択してください!"
: change_value + "を選択しましたね!";
},
},
}).mount("#app");
選択メニューを変更してください。
{{ message }}
submit
submit フォームから送信したとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-on submitについて</title>
</head>
<body>
<div id="app">
<form action="#" @submit="submitMessage">
<p>送信ボタンを押してください。</p>
<input id="text" type="text" />
<button type="submit">送信</button>
</form>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/submit.js"></script>
</body>
</html>
Vue.createApp({
methods: {
submitMessage() {
let text_value = document.getElementById("text").value;
window.confirm(`${text_value}で本当によろしいでしょうか?`);
},
},
}).mount("#app");
click / dblclick
click 要素をクリックしたとき
dblclick 要素をダブルクリックしたとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-on clickについて</title>
</head>
<body>
<div id="app">
<p>クリックかダブルクリックしてください。</p>
<button @click="clickMessage" @dblclick="dblclickMessage">ボタン</button>
<p>{{ message }}</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/click.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
clickMessage() {
this.message = "クリックしましたね!";
},
dblclickMessage() {
this.message = "ダブルクリックしましたね!";
},
},
}).mount("#app");
クリックかダブルクリックしてください。
{{ message }}
mousedown / mouseup
mousedown マウスのボタンを押したとき
mouseupは マウスのボタンを離したとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>v-on mousedown upについて</title>
</head>
<body>
<div id="app">
<p class="mouse-area" @mousedown="downMessage" @mouseup="upMessage">
マウスボタンを押したり離してりしてください。
</p>
<p>{{ message }}</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/mousedown_up.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
downMessage() {
this.message = "マウスを押しましたね!";
},
upMessage() {
this.message = "マウスを離しましたね!";
},
},
}).mount("#app");
.mouse-area {
width: 400px;
border: 1px solid black;
cursor: pointer;
}
マウスボタンを押したり離してりしてください。
{{ message }}
mouseover / mouseout
mouseover マウスカーソルを当てたとき
mouseout マウスカーソルが外れたとき
入れ子要素にも反応する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>v-on mouseover outについて</title>
</head>
<body>
<div id="app">
<p>外要素と内要素にマウスポインターを動かしてください。</p>
<div class="outer-area" @mouseover="overMessage" @mouseout="outMessage">
外要素
<p class="inner-area">内要素</p>
</div>
<button @click="clearResult">結果クリア</button>
<div v-html="result"></div>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/mouseover_out.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
result: "",
};
},
methods: {
overMessage(e) {
this.result += `over:${e.target.className}<br>`;
},
outMessage(e) {
this.result += `out:${e.target.className}<br>`;
},
clearResult() {
this.result = "";
},
},
}).mount("#app");
.outer-area {
width: 300px;
height: 200px;
border: 1px solid black;
}
.inner-area {
width: 150px;
height: 150px;
margin: auto;
border: 1px solid black;
}
外要素と内要素にマウスポインターを動かしてください。
内要素
mouseenter / mouseleave
mouseenter マウスカーソルを当てたとき
mouseleave マウスカーソルが外れたとき
入れ子要素にも反応しない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>v-on mouseleave enterについて</title>
</head>
<body>
<div id="app">
<p>外要素と内要素にマウスポインターを動かしてください。</p>
<div
class="outer-area"
@mouseleave="leaveMessage"
@mouseenter="enterMessage"
>
外要素
<div class="inner-area">内要素</div>
</div>
<button @click="clearResult">結果クリア</button>
<div v-html="result"></div>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/mouseleave_enter.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
result: "",
};
},
methods: {
enterMessage(e) {
this.result += `enter:${e.target.className}<br>`;
},
leaveMessage(e) {
this.result += `leave:${e.target.className}<br>`;
},
clearResult() {
this.result = "";
},
},
}).mount("#app");
.outer-area {
width: 300px;
height: 200px;
border: 1px solid black;
}
.inner-area {
width: 150px;
height: 150px;
margin: auto;
border: 1px solid black;
}
外要素と内要素にマウスポインターを動かしてください。
keyup / keydown
keyup キーを押したとき
keydown キーを離したとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>v-on keyup downについて</title>
</head>
<body>
<div id="app">
<p>入力する瞬間の違いを確認してみてくさい。</p>
<div>
<input @keyup="keyupMessage" placeholder="keyup" />
{{ keyup }}
</div>
<div>
<input @keydown="keydownMessage" placeholder="keydown" />
{{ keydown }}
</div>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/keyup_down.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
keyup: "",
keydown: "",
};
},
methods: {
keyupMessage(e) {
this.keyup = `キーコード:${e.keyCode}`;
},
keydownMessage(e) {
this.keydown = `キーコード:${e.keyCode}`;
},
},
}).mount("#app");
入力する瞬間の違いを確認してみてくさい。
scroll
scroll ページや要素をスクロールしたとき
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>v-on scrollについて</title>
</head>
<body>
<div id="app">
<p>ボックス内をスクロールしてみてください。</p>
<p>Y座標:{{ scrollY }}</p>
<div id="box" @scroll="getScrollPosition">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi facilis
voluptate nostrum eum rerum nobis maxime eligendi aut a quos.
</div>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/scroll.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
scrollY: 0,
};
},
methods: {
getScrollPosition() {
let target = document.getElementById("box");
this.scrollY = target.scrollTop;
},
},
}).mount("#app");
#box {
width: 200px;
height: 50px;
overflow: auto; /* はみ出しはスクロール */
border: 1px solid black;
}
ボックス内をスクロールしてみてください。
Y座標:{{ scrollY }}
contextmenu
contextmenu コンテキストメニュー(右クリックメニュー)を表示する前
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-on contextmenuについて</title>
</head>
<body>
<div id="app">
<p @contextmenu="getMessage">右クリックしてください。</p>
<p>{{ message }}</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/contextmenu.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
getMessage() {
this.message = "右クリックしましたね!";
},
},
}).mount("#app");