谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if

• v-on
• v-for
• v-if

一，v-on

1，指令简介

v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。

v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。

2，在button按钮中添加v-on:click

在index.html中增加一个button按钮。

<button v-on:click="num++" >点赞</button>

注意，这个按钮使用了v-on:click指令，指令中是js代码，当按钮被点击后，执行这段代码，model中的num自增。

当然，在v-on中也可以调用model中的方法。

<button v-on:click="cancel" >取消点赞</button>

如上，在一个button中使用v-on:click指令注册了click事件，这个事件调用了cancel方法，其在vue对象中的声明如下。

let vm = new Vue({
   
   
        el: '#app',
        data: {
   
   
          name: "张二强",
          num: 100
        },
        methods:{
   
   
            cancel(){
   
   
                this.num--;
            }
        }
      })

注意，方法都要声明在methods下。

事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'，后面的示例都采用简写。

3，事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

尽管可以在方法中轻松实现这点，但最佳实践是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

• .stop ：阻止事件冒泡到父元素
• .prevent：阻止默认事件发生
• .capture：使用事件捕获模式
• .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
• .once：只执行一次

定义如下View演示事件修饰符的使用。

<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" @click="hello">
     大div
	    <div style="border: 1px solid blue;padding: 20px;" @click="hello">
	        小div <br />
	    </div>
    </div>
</div>

let vm = new Vue({
   
   
     el: '#app',