属性jquery的朋友应该很熟悉这个“on”，对于时间的监听和绑定，jquery里面最常用的就是on了。同样，在Vue里面，v-on指令用来绑定标签的事件，其语法和v-bind基本类似。
v-on:event="expression";
这里的event可以是Javascript里面的常用事件，也可以是自定义事件。
<div> <h1>姓名：<label v-text="Name"></label></h1> <h1>年龄：{{ Age }}</h1> <button v-on:click="Age++;if(Name=='小明')Name='吉姆格林';else;">年龄递增</button> </div> <script src="https://www.jb51.net/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>
这段代码是一个最简单的应用，直接在click事件里面执行逻辑，改变变量的值。效果如下：
除了直接在标签内写处理逻辑，还可以定义方法事件处理器。
<div> <h1>姓名：<label v-text="Name"></label></h1> <h1>年龄：{{ Age }}</h1> <button v-on:click="Hello">Hello</button> </div> <script src="https://www.jb51.net/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 + '!'); this.Age++; } } }); </script>
结果应该不难猜。
9、实例一：30分钟搞定增删改查
有了我们的Vue框架，关于行内编辑的增删改查，我们很简单即可实现，如果你熟的话应该还不用30分钟吧。代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="https://www.jb51.net/Content/bootstrap/css/bootstrap.css" /> <style type="text/css"> table thead tr th { text-align:center; } </style> </head> <body> <div> <div> <div>用户管理</div> <table> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>毕业学校</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody> <template v-for="row in rows "> <tr><td>{{row.Name}}</td><td>{{row.Age}}</td><td>{{row.School}}</td><td>{{row.Remark}}</td> <td><a href="#" @click="Edit(row)">编辑</a> <a href="#" @click="Delete(row.Id)">删除</a></td> </tr> </template> <tr> <td><input type="text" v-model="rowtemplate.Name" /></td> <td><input type="text" v-model="rowtemplate.Age" /></td> <td><select v-model="rowtemplate.School"> <option>中山小学</option> <option>复兴中学</option> <option>光明小学</option> </select></td> <td><input type="text" v-model="rowtemplate.Remark" /></td> <td><button type="button" v-on:click="Save">保存</button></td> </tr> </tbody> </table> </div> </div> <script src="https://www.jb51.net/Content/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { rows: [ { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, ], rowtemplate: { Id: 0, Name: '', Age: '', School: '', Remark: '' } }; //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { Save: function (event) { if (this.rowtemplate.Id == 0) { //设置当前新增行的Id this.rowtemplate.Id = this.rows.length + 1; this.rows.push(this.rowtemplate); } //还原模板 this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' } }, Delete: function (id) { //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。 for (var i=0;i<this.rows.length;i++){ if (this.rows[i].Id == id) { this.rows.splice(i, 1); break; } } }, Edit: function (row) { this.rowtemplate = row; } } }); </script> </body> </html>
行内编辑效果如下：
10、实例二：带分页的表格