zoukankan      html  css  js  c++  java
  • Vue.js — 事件处理

    1.事件处理

    1.1 监听事件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
    		<div id="app">
    			<button v-on:click="counter += 1">加1</button>
    			<p>点击了{{counter}}次。</p>
    			<button @click="greet">打招呼</button>
    			<button @click="say('Hello')">Hello</button>
    		</div>
            <script>
    			new Vue({
    				el: '#app',
    				data: {
    					counter: 0,
    					name: '张三'
    				},
    				methods: {
    					greet: function(event){
    						console.log('你好,' + this.name + '!') // 你好,张三!
    						if(event){
    							console.log(event.target.tagName) // BUTTON
    						}
    					},
    					say: function(message){
    						console.log(message);
    					}
    				}
    			})
            </script>
        </body>
    </html>
    

    我们可以使用$event访问到原始的DOM事件。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
    		<div id="app">
    			<button @click="test('Hello', $event)">点击按钮</button>
    		</div>
            <script>
    			new Vue({
    				el: '#app',
    				data: {
    					counter: 0,
    					name: '张三'
    				},
    				methods: {
    					test: function(message, event){
    						if(event){
    							console.log(event.target.textContent); // 点击按钮
    							console.log(message); // Hello
    						}						
    					}
    				}
    			})
            </script>
        </body>
    </html>
    

    注意:调用method时不传参数的话,其实method可以接收到原始的DOM事件;如果调用method时需要传其他参数,则需要显式地将$event作为参数传入才能访问到原始的DOM事件。

    1.2 事件修饰符

    Vue.js 为v-on提供了事件修饰符。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    • .passive
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
    		<div id="app">
    			<div style="200px;height:200px;background:gray;" @click="test1">
    				<div style="100px;height:100px;background:blue;" @click.stop="test2"></div>
    			</div>
    		</div>
            <script>
    			new Vue({
    				el: '#app',
    				data: {
    					
    				},
    				methods: {
    					test1: function(){
    						alert('外面');					
    					},
    					test2: function(){
    						alert('里面');					
    					}
    				}
    			})
            </script>
        </body>
    </html>
    

    注意到@click.stop="test2"使用了事件修饰符.stop,其作用是防止事件冒泡。
    提示:事件修饰符可以串联,比如<a v-on:click.stop.prevent="doThat"></a>

    1.3 按键修饰符

    Vue 允许为v-on在监听键盘事件时添加按键修饰符。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
    		<div id="app">
    			<input type="text" @keyup.13="test">
    			<input type="text" @keyup.enter="test">
    		</div>
            <script>
    			new Vue({
    				el: '#app',
    				data: {
    					
    				},
    				methods: {
    					test: function(event){
    						console.log(event.keyCode);
    						console.log(event.target.value);				
    					}
    				}
    			})
            </script>
        </body>
    </html>
    

    注意到@keyup.13的13是按键码,@keyup.enter的enter是按键码的别名。
    keyCode是按键码,为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名。

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

    我们可以通过全局config.keyCodes对象自定义按键修饰符别名。

    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112
    

    1.4 系统修饰键

    • .ctrl
    • .alt
    • .shift
    • .meta

    .meta在Windows系统中是Win键(⊞)。

    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
    
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">A</button>
    
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">A</button>
    

    鼠标按钮修饰符:

    • .left
    • .right
    • .middle

    参考:

  • 相关阅读:
    javascript、CSS、XML动太生成树菜单
    设表格细钱
    JS操作JSON总结
    Meta标签详解
    js中eval详解
    搜虎网上线
    Fluent NHibernate demo 示例
    Oracle 索引概述
    程序员如何加薪——请看《谁赚走了你的薪水_让经济学帮你加薪].(英)蒂姆·哈福德.扫描版[ED2000.COM].pdf》
    expertoracledatabasearchitectureoracledatabaseprogramming9i10gand11gtechniquesandsoluti.pdf
  • 原文地址:https://www.cnblogs.com/gzhjj/p/11766357.html
Copyright © 2011-2022 走看看