【vue系列课程5】—— 事件监听v-on

事件监听v-on

注：项目参考课程编写

---

v-on 基础模式

<template>
    <section>
       <div class="list">
          <button v-on:click='num+1'>按钮</button>
          <p>{{ num }}</p>
       </div>
    </section>

</template>
<script>
export default {
    data () {
        return {
            num:1
        }
    }
}
</script>

---

methods编辑方法

<template>
    <section>
        <button v-on:click='handlerClick'>按钮</button> 
    </section>

</template>
<script>
export default {
    data () {
        return {
            num:1
        }
    },
    methods: {
        handlerClick(){
            alert('我是事件')
        }
    }
}
</script>

---

实现切换显示

<template>
    <section>
        <div>
            <template v-if="show">
                <span>我是if为true看到的</span>
                <a>哈哈哈</a>
                <span>是</span>
            </template>
            <template v-else>
                <span>我是if为false看到的</span>
                <a>哈哈哈</a>
                <span>是</span>
            </template>
        </div>

        <button v-on:click='handlerClick'>按钮</button>
    </section>

</template>
<script>
export default {
    data () {
        return {
            show:true
        }
    },
    methods: {
        handlerClick(){
            console.log(this); //this 指当前组件
            this.show = !this.show   //this索引data中数据
        }
    }
}
</script>

---

注：在template中，只能存在一个根组件

事件传递参数的使用

动态列表中点击时打印对应值

1. 绑定值打印

<template>
    <div>
        <ul>
            <!-- 绑定值，生成动态列表 -->
            <li v-for="name in names" @click="getItemInfo(name)">
                {{ name }}
            </li>
        </ul>
    </div>    
</template>
<script>
export default {
    data () {
        return {
            names:["lala","huahua","haha"]
        }
    },
    methods: {
        getItemInfo(data){
            console.log(data);  //打印当前点击值
        }
    }
}
</script>

2.绑定下标打印

<template>
    <div>
        <ul>
            <!-- 绑定值，生成动态列表 -->
            <li v-for="(name,index) in names" @click="getItemInfo(index)">
                {{ name }}
            </li>
        </ul>
    </div>    
</template>
<script>
export default {
    data () {
        return {
            names:["lala","huahua","haha"]
        }
    },
    methods: {
        getItemInfo(index){
            console.log(this.names[index]);  //打印当前点击值 实现效果同上
        }
    }
}
</script>

获取原生event

<template>
    <div>
        <ul>
            <!-- 添加$获取原生event 即$event -->
            <li v-for="(name,index) in names" @click="getItemInfo(index,$event)">
                {{ name }}
            </li>
        </ul>
    </div>    
</template>
<script>
export default {
    data () {
        return {
            names:["lala","huahua","haha"]
        }
    },
    methods: {
        getItemInfo(event){
            console.log(event);  //打印原生 event
        }
    }
}
</script>

事件修饰符

官方

.stop      阻止事件冒泡       
.prevent   阻止默认事件
.capture   
.self      
.once      只生效一次
.passive   滚动事件的默认行为 (即滚动行为) 将会立即触发

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<template>
    <div>
        <ul>
            <!-- once修饰符 只执行一次 -->
            <li v-for="(name,index) in names" @click.once="getItemInfo(index,$event)">
                {{ name }}
            </li>
        </ul>
    </div>    
</template>

---

键盘事件

监听键盘事件

<template>
    <div>
        <!-- 添加事件，按键盘时触发-->
        <input type="text" v-on:keyup="getKeyInfo">
    </div>    
</template>
<script>
export default {
    data () {
        return {
            names:["lala","huahua","haha"]
        }
    },
    methods: {
        getKeyInfo(event){
            console.log(event);  //打印键盘事件
        }
    }
}
</script>

按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：

.enter（监听回车 keycode13）
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

新增
.ctrl
.alt
.shift
.meta

注意：
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。
在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。
在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，
比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。
在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”

常用keyCode（来自网络）

组合键修饰符

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>