查看“Vue:v-on指令”的源代码

属性jquery的朋友应该很熟悉这个“on”，对于事件的监听和绑定，jquery里面最常用的就是on了。同样，在Vue里面，v-on指令用来绑定标签的事件，其语法和v-bind基本类似。

 <nowiki>v-on:event="expression";</nowiki>

这里的event可以是Javascript里面的常用事件，也可以是自定义事件。

 <nowiki>
<div id="app">
        <h1>姓名：<label v-text="Name"></label></h1>
        <h1>年龄：{{ Age }}</h1>

        <button class="btn btn-primary" v-on:click="Age++;if(Name=='小明')Name='吉姆格林';else Name='小明';">年龄递增</button>
    </div>

    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
    </script></nowiki>

===效果===
[[文件:vue2022040703.png|600px]]

除了直接在标签内写处理逻辑，还可以定义方法事件处理器。


 <nowiki>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">      
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>    
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>
        <style type="text/css">
            .class1 {
                padding:20px;
            }
            .backred {
                background-color:red;
            }
        </style>

		<title></title>
	</head>
    <body>
 
        <div id="app">
            <h1>姓名：<label v-text="Name"></label></h1>
            <h1>年龄：{{ Age }}</h1>
    
            <button class="btn btn-primary" v-on:click="Hello">Hello</button>
        </div>
    
        <script src="Content/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            Age: 18,
        }
    
        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
            methods: {
                Hello: function (event) {
                    // `this` 在方法里指当前 Vue 实例
                    alert('Hello ' + this.Name + '!'+'年龄增1');
                    this.Age++;
                }
            }
        });
        </script>
    </body>
</html>
</nowiki>


[[文件:vue2022040704.png|600px]]