vuejs のイベントは次のとおりです: focus、blur、click (click)、dblclick、contextmen、mousemove、mouseover、mouseout、mouseup、keydown、keyup、select、wheel など。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
イベント ハンドラー イベント処理Vuejs でのイベント処理は非常に強力であり、非常に重要です。私たちはそれをよく学ばなければなりません。
イベント ハンドラー Vuejs がイベント ハンドラーを高い位置に置く理由は、次の考慮事項に基づいています:
イベントに関連するコードを記述します。独立して、さまざまなロジックを見つけるのが非常に簡単で、保守も簡単です。
イベント ハンドラーを分離すると、ページの DOM 要素は非常にシンプルになります。わかりやすい。
ページが閉じられると、対応する ViewModel もリサイクルされます。その後、ページ上で定義されているさまざまな イベント ハンドラー もガベージ コレクションされます。メモリオーバーフローを引き起こしません。
サポート済みイベント
以前にも見たことがあります。 v-on:click に行ったことがあるので、v-on ではどのようなイベントをサポートできますか?
標準の HTML で定義された Event である限り、Vuejs でサポートされます。
focus (要素がフォーカスを取得します)blur (要素がフォーカスを失います) click (マウスの左ボタンをクリック) dblclick (マウスの左ボタンをダブルクリック) (単一マシンマウスの右ボタン)
(イベント監視のある要素またはその子要素にポインタが移動します)
(ポインタが外に移動します)要素の、またはその子要素へ Up)
(キーボード アクション: 任意のキーを押す)
(キーボード アクション: 放す)任意のキー)
すべての HTML 標準イベント: https://developer.mozilla.org/zh-CN/docs/Web/Events例:合計 162 の標準イベントと数十の非標準イベントが定義されています。 Mozilla 固有のイベントも含まれます。以下の図に示すように:
これらすべてを覚える必要はありません。通常、日々の開発では、最も一般的なイベントは 20 未満です。
イベントのバインド
v-on この ディレクティブ によって駆動されると考えることができます。そこで、このセクションでは、v-on について詳しく説明します。
v-on:## で変数を参照できます。 #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id=&#39;app&#39;>
您点击了： {% raw %}{{{% endraw %} count }} 次
<br/>
<button v-on:click=&#39;count += 1&#39; style=&#39;margin-top: 50px&#39;> + 1</button>
</div>
<script>
var app = new Vue({
el: &#39;#app&#39;,
data: {
count: 0
}
})
</script>
</body>
</html></pre><div class="contentsignin">ログイン後にコピー</div></div> ブラウザで上記のコードを開いてボタンをクリックすると、変数
が 1 になることがわかります。次の図に示すように:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
您点击了：{% raw %}{{{% endraw %} count }} 次
<br/>
<button v-on:click='increase_count' style='margin-top: 50px'> + 1 </button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increase_count: function(){
this.count += 1
}
}
})
</script>
</body>
</html> の increase_count がメソッド名であることがわかります。
は、次の例に示すように、次のように記述されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id=&#39;app&#39;>
{% raw %}{{{% endraw %} message }}
<br/>
<button v-on:click=&#39;say_hi("明日的Vuejs大神")&#39; style=&#39;margin-top: 50px&#39;> 跟我打个招呼~ </button>
</div>
<script>
var app = new Vue({
el: &#39;#app&#39;,
data: {
message: "这是个 在click中调用 方法 + 参数的例子"
},
methods: {
say_hi: function(name){
this.message = "你好啊，" + name + "!"
}
}
})
</script>
</body>
</html></pre><div class="contentsignin">ログイン後にコピー</div></div> ブラウザで開いた後、ボタンをクリックすると、次の図が表示されます。
最も典型的な例: フォーム (
) を送信するとき、最初にフォームを検証します。検証が失敗した場合、フォームは送信されません。 現時点で、フォームを送信したくない場合は、次のアクションを行わずに、この
ボタンを作成する必要があります。すべての開発言語には、「preventDefault」という対応するメソッドがあります: "preventDefault"
(デフォルトのアクションを停止します)
この例を見てみましょう:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
请输入您想打开的网址, <br/>
判断规则是： <br/>
1. 务必以 "http://"开头 <br/>
2. 不能是空字符串 <br/>
<input v-model="url" placeholder="请输入 http:// 开头的字符串, 否则不会跳转" /> <br/>
<br/>
<a v-bind:href="this.url" v-on:click='validate($event)'> 点我确定 </a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: ''
},
methods: {
validate: function(event){
if(this.url.length == 0 || this.url.indexOf('http://') != 0){
alert("您输入的网址不符合规则。 无法跳转")
if(event){
alert("event is: " + event)
event.preventDefault()
}
}
}
}
})
</script>
</body>
</html>上面的代码中，可以看到，我们定义了一个变量： url. 并且通过代码：
<a v-bind:href="this.url" v-on:click='validate($event)'> 点我确定 </a> 做了两件事情：
把 url 绑定到了该元素上。
该元素 在触发 click事件时，会调用 validate方法。 该方法传递了一个特殊的参数： $event. 该参数是当前 事件的一个实例。（MouseEvent)
在 validate方法中，我们是这样定义的： 先验证是否符合规则。 如果符合，放行，会继续触发 <a/> 元素的默认动作（让浏览器发生跳转） 。 否则的
话，会弹出一个 “alert” 提示框。
用浏览器打开这段代码，可以看到下图所示：
我们先输入一个合法的地址： http://baidu.com ， 可以看到，点击后，页面发生了跳转。 跳转到了百度。
我们再输入一个 “不合法”的地址： https://baidu.com 注意： 该地址不是以 “http://” 开头，所以我们的vuejs 代码不会让它放行。
如下图所示：
进一步观察，页面也不会跳转（很好的解释了 这个时候 <a/> 标签点了也不起作用)
Event Modifiers 事件修饰语我们很多时候，希望把代码写的优雅一些。 使用传统的方式，可能会把代码写的很臃肿。 如果某个元素在不同的event下有不同的表现，那么代码看起来就会有
很多个 if ...else ... 这样的分支。
所以， Vuejs 提供了 “Event Modifiers”。
例如，我们可以把上面的例子略加修改：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
请输入您想打开的网址, <br/>
判断规则是： <br/>
1. 务必以 "http://"开头 <br/>
2. 不能是空字符串 <br/>
<input v-model="url" placeholder="请输入 http:// 开头的字符串, 否则不会跳转" /> <br/>
<br/>
<a v-bind:href="this.url" v-on:click='validate($event)' v-on:click.prevent='show_message'> 点我确定 </a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: ''
},
methods: {
validate: function(event){
if(this.url.length == 0 || this.url.indexOf('http://') != 0){
if(event){
event.preventDefault()
}
}
},
show_message: function(){
alert("您输入的网址不符合规则。 无法跳转")
}
}
})
</script>
</body>
</html>可以看出，上面的代码的核心是：
<a v-bind:href="this.url" v-on:click='validate($event)' v-on:click.prevent='show_message'> 点我确定 </a>
methods: {
validate: function(event){
if(this.url.length == 0 || this.url.indexOf('http://') != 0){
if(event){
event.preventDefault()
}
}
},
show_message: function(){
alert("您输入的网址不符合规则。 无法跳转")
}
}先是在 <a/> 中定义了两个 click 事件，一个是 click, 一个是 click.prevent. 后者表示，如果该元素的click 事件被 阻止了的话， 应该触发什么动作。
然后，在 methods 代码段中，专门定义了 show_message , 用来给 click.prevent 所使用。
上面的代码运行起来，跟前一个例子是一模一样的。 只是抽象分类的程度更高了一些。 在复杂的项目中有用处。
这样的 “event modifier”，有这些：
以上的 “event modifier” 也可以连接起来使用。 例如： v-on:click.prevent.self
Key Modifiers 按键修饰语Vuejs 也很贴心的提供了 Key Modifiers, 也就是一种支持键盘事件的快捷方法。 我们看下面的例子：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
输入完毕后，按下回车键，就会<br/>
触发 "show_message" 事件~ <br/><br/>
<input v-on:keyup.enter="show_message" v-model="message" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
show_message: function(){
alert("您输入了：" + this.message)
}
}
})
</script>
</body>
</html>可以看到，在上面的代码中， v-on:keyup.enter="show_message" 为 <a></a> 元素定义了事件，该事件对应了 “回车键”。
（严格的说，是回车键被按下后，松开弹起来的那一刻）
我们用浏览器打开上面的代码对应的文件，输入一段文字，按回车，就可以看到事件已经被触发了。
Vuejs 总共支持下面这些 Key modifiers:
随着 Vuejs 版本的不断迭代和更新，越来越多的 Key modifiers 被添加了进来， 例如 page down, ctrl 。对于这些键的用法，
大家可以查阅官方文档。
相关推荐：《vue.js教程》
以上がvuejsにはどのようなイベントがありますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
