Vue的v-on注册事件

vue的v-on注册事件

v-on主要是用于给页面的dom元素注册事件。

简写为：@ 使用方法：function | inline statement 参数： event (required) 使用场景：

参数 使用说明

.stop 调用event.stoppropagation()

.prevent 调用event.preventdefault()

.capture 在capture模式下追加事件

.self 只有在事件从该元素发出时才触发处理程序

.{keycode | keyalias} 只在某些键上触发处理程序

官方使用举例

字符串拼接示例

下面的代码中通过v-on的三种方式来演示字符串拼接操作，源码如下：

{{hello}}

字符串+1字符串+2

请输入要拼接的文字

说明

在vm的methods方法中，由于this指代的是vm中的data作用域，因而可以通过this. + 参数名的形式来获取data中的数据，比如说我们如果想要获取data中的hello参数的值，那么我们的编写方式为：this.hello。

方法一是通过v-on:click的方式给data中的hello添加字符串拼接，然后将其展示在页面上。

方法二是通过v-on:click的简写@click的方式来给data中的hello添加字符串拼接，当然，我们在调用change2()方法时传入了一个参数2，然后完成字符串的拼接操作。

方法三是通过@keyup.enter的方式给data中的hello添加字符串拼接，由于我们在页面中采用了v-model的方式来接收参数，所以说在我们在文本框中输入文字，点击键盘enter时，其在change3()的函数体内通过this.kw即可捕获我们所输入的文字内容，然后完成字符串的拼接操作。