Vue 事件处理
- 使用
v-on指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。 - methods 承载多是事件函数
v-on可以用@替换用法
或v-on:click="methodName"
事件处理器的值可以是：@click="methodName"
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
按钮点击操作
场景一
按钮点击对应前端控制台输出文本：
<script>
export default{
name: 'app',
data(){
},
methods:{
clickHandle(){
console.log("Hello 点击事件");
}
}
}
</script>
<template>
<main>
<div>
<h1>事件处理</h1>
<button v-on:click="clickHandle">按钮</button>
<button @click="clickHandle">按钮</button>
</div>
</main>
</template>
- 点击三次，前端页面控制台输出打印三次：Hello 点击事件
场景二
按钮点击，文本交替显示或消失
```js
事件处理
文本按钮显示
 再次点击一次，按钮上文本消失。 >在事件中改变文本是否显示的属性值，methods编写对应方法，索引到data属性内定义的值。 注意：所有data里面的属性都是通过this来索引修改 ### 列表文本事件处理 #### 场景一 ```js <script> export default{ name: 'app', data(){ }, methods:{ listHandle(e){ console.log(e); } } } </script> <template> <main> <div> <h1>事件处理</h1> <button v-on:click="clickHandle">按钮</button> <p v-if="flag">文本按钮显示</p> <button v-on:click="clickText">文本按钮</button> <ul> <li @click="listHandle" v-for="(value, key, index) in bookObj" :key="index" > { {index+1}}. { {key}} : { {value}} </li> </ul> </div> </main> </template>- 传入参数e，对应前端页面控制台输出元素点击操作属性内容
场景二
对应文本传入事件进行处理
<script> export default{ name: 'app', data(){ }, methods:{ clickHandle(){ console.log("Hello 点击事件"); }, clickText(){ this.flag = !this.flag; }, listHandle(value){ console.log(value); } } } </script> <template> <main> <div> <h1>事件处理</h1> <ul> <li @click="listHandle(value)" v-for="(value, key, index) in bookObj" :key="index" > { {index+1}}. { {key}} : { {value}} </li> </ul> </div> </main> </template>- value代表方法传入的文本信息，不代表envent对象
即想传递参数又想传递envent对象
listHandle(value,e){ console.log(value,e); }事件修饰符
修饰符是用 . 表示的指令后缀，包含以下这些：
.stop.prevent：事件将不再重新加载页面.self.capture.once.passive：
页面不跳转
- 点击a标签，对应页面跳转失效
```js
```
