Vue.js基础教程之常用指令v-on

动态地绑定一个或多个特性,或一个组件 prop 到表达式;其作用和v-bind类似。注意:如果用在普通元素上时,只能监听 原生 DOM 事件;但是如果用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

常用的修饰符包括:

  

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

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

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

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

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

 .once - 触发一次。

  

使用手法

    

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为,没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符,键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符,键代码 -->

<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->

<button v-on:click.once="doThis"></button>

 

案例实操:

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

版权申明:本站文章均来自网络,如有侵权,请联系01056159998 邮箱:itboby@foxmail.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

中国领先的互联网域名及云服务提供商

为您提供域名,比特币,P2P,大数据,云计算,虚拟主机,域名交易最新资讯报道

域名注册云服务器