v-on

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

缩写：@
预期：Function | Inline Statement
参数： event (required)
修饰符：

参数	使用说明
`.stop`	调用`event.stopPropagation()`
`.prevent`	调用`event.preventDefault()`
`.capture`	在capture模式下追加事件
`.self`	只有在事件从该元素发出时才触发处理程序
`.{keyCode \| keyAlias}`	只在某些键上触发处理程序

官方使用举例

<!-- method handler -->
<button v-on:click="doThis"></button>
<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- shorthand -->
<button @click="doThis"></button>
<!-- stop propagation -->
<button @click.stop="doThis"></button>
<!-- prevent default -->
<button @click.prevent="doThis"></button>
<!-- prevent default without expression -->
<form @submit.prevent></form>
<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>
<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter">
<!-- key modifier using keyCode -->
<input @keyup.13="onEnter">

字符串拼接示例

源码

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

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        {{hello}}<br>
        <!--1、v-on:click的方式-->
        <button v-on:click="change">字符串+1</button>
        <!--2、@click的方式-->
        <a @click="change2(2)">字符串+2</a>
        <!--3、@keyup.enter的方式-->
        <input type="text" placeholder="请输入要拼接的文字" v-model="kw" @keyup.enter="change3">
    </div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
    //2、实例化Vue对象，其中vm:叫做MVVM中的View Model
    var vm = new Vue({
        el:'#app'     //表示当前Vue对象接管app的div区域
        ,data:{
            hello:'Hello World !'     //相当于MVVM中的Model这个角色
            ,kw:''
        }
        ,methods:{
            change() {
                this.hello += '1';
            }
            ,change2(value){
                this.hello += value;
            }
            ,change3(){
                console.log(this.kw);
                this.hello += this.kw;
            }
        }
    });
</script>
</html>

说明

在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即可捕获我们所输入的文字内容，然后完成字符串的拼接操作。

Vue的v-on注册事件

v-on

官方使用举例

字符串拼接示例

源码

说明

猜你喜欢