prevent修飾子は、フォーム送信やリンククリックなどのイベントで、ブラウザのデフォルト動作を防げます。
prevent修飾子
記法
@イベント.prevent=”イベント名”
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>prevent修飾子について</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="app">
<a
href="https://example.com"
@click.prevent="handleClick"
class="example-link"
>prevent修飾子リンク</a
>
<p class="link-message">{{ message }}</p>
</div>
<!-- CDN -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>// Vueアプリケーションの作成とマウント
Vue.createApp({
data() {
return {
message: "",
};
},
methods: {
handleClick(event) {
// リンクのデフォルト動作を防ぎ、メッセージを更新
this.message = "prevent修飾子でリンクのデフォルト動作を防ぎました！";
},
},
}).mount("#app");#app {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
.example-link {
display: block;
margin-bottom: 12px;
color: #007bff;
text-decoration: none;
}
.example-link:hover {
text-decoration: underline;
}
.link-message {
margin-top: 20px;
font-size: 16px;
}出力結果
prevent修飾子リンク
{{ message }}