1-7 vue指令 v-on

vue指令 v-on

• v-on指令 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。

  • 注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

  • 常用的修饰符包括：

    .stop - 调用 event.stopPropagation()；停止冒泡。

    .prevent - 调用 event.preventDefault(); 停止监听原生事件。

    .capture - 添加事件侦听器时使用 capture 模式。

    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

    .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

    .once - 触发一次。

  • 使用手法：

  • 案例实操：

    
    
    
        
        
    
    
       
    
           
    {{content}}
           改变颜色
           弹窗输出
       
    
    
    
    
    

• 我们在上面案例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。