v-on 这个指令可以为元素绑定指定的事件 .. 先添加一个按钮 ... 设置一下按钮上的文字 .. 然后在这个按钮元素的上面使用一下 v-on 这个指令 .. 给它一个参数,名字是 click ,这样就为这个元素绑定了一个 click ,点击的事件 .. 点击这个元素我们要做的事,可以让 counter += 1 ...
这个 counter 是应用里的一个数据 .. 然后再添加一个元素 .. 在它里面给定绑定一个 counter ...
再去添加一个 counter 数据 ... 让它的值等于 0 ... 回到浏览器 ... 上面会显示一个按钮,还有一个带标签数字 .. 在这个按钮上我们绑定了 click 事件,点击它要做的事就是让应用里的 counter 数据的值增加 1 ...
在页面上绑定了这个数据的地方,会实时的显示 counter 这个数据的当前的值 ...
v-on 指令还有一种简写的形式 ... 可以使用一个 @ 符号,后面加上事件的名字 .. 效果跟之前是一样的 ...
目前我们在给元素绑定事件的这个地方,直接用了一个简单的表达式 ... 你可以使用一个方法来代替它 .. 比如 like ... 然后给 Vue 实例 .. 添加一个 methods 属性 ... 在这里我们可以去定义需要使用的 like 这个方法 ...
给它一个 event 参数 .. 在方法里面, 先让应用里的 counter 的值增加 1 ... 然后再把表示事件的这个 event 对象输出到控制台上检查一下 ...
再点一下这个按钮元素 .. counter 的值会增加 1 ... 同时会把事件对象输出到了控制台上 ... 在这个对象里你可以找到很多有用的属性 ...