2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的
<div id="example-1">
+ <button v-on:click="counter += 1">
+ +1
+ </button>
+ <p>按钮已被点击 {{ counter }} 次。</p>
+</div>
+var example1 = new Vue({
+ el: '#example-1',
+ data: {
+ counter: 0
+ }
+})
+<div id="example-2">
+ <!-- `greet` 是在下面定义的方法名 -->
+ <button v-on:click="greet">
+ 你好
+ </button>
+</div>
+var example2 = new Vue({
+ el: '#example-2',
+ data: {
+ name: 'Vue.js'
+ },
+ // 在 `methods` 对象中定义方法
+ methods: {
+ greet: function (event) {
+ // `this` 在方法里指向当前 Vue 实例
+ alert('Hello ' + this.name + '!')
+ // `event` 是原生 DOM 事件
+ if (event) {
+ alert(event.target.tagName)
+ }
+ }
+ }
+})
+
+// 也可以用 JavaScript 直接调用方法
+example2.greet() // => 'Hello Vue.js!'
+<div id="example-3">
+ <button v-on:click="say('hi')">
+ 弹出 hi
+ </button>
+ <button v-on:click="say('what')">
+ 弹出 what
+ </button>
+</div>
+new Vue({
+ el: '#example-3',
+ methods: {
+ say: function (message) {
+ alert(message)
+ }
+ }
+})
+访问原始的 DOM 事件，用特殊变量 $event
+<button v-on:click="say('what', $event)">
+ 提交
+</button>
+methods: {
+ say: function (message, event) {
+ // 现在我们可以访问原生事件对象
+ if (event) {
+ event.preventDefault()
+ }
+ alert(message)
+ }
+}
+<!-- 阻止单击事件继续传播 -->
+<a v-on:click.stop="doThis"></a>
+<!-- 提交事件不再重载页面 -->
+<form v-on:submit.prevent="submit"></form>
+<!-- 修饰符可以串联 -->
+<a v-on:click.stop.prevent="doThat"></a>
+<!-- 只有修饰符 -->
+<form v-on:submit.prevent></form>
+<!-- 添加事件监听器时使用事件捕获模式 -->
+<!-- 即内部元素触发的事件先在此处理 -->
+<!-- 然后交由内部元素进行处理 -->
+<div v-on:click.capture="doThis">...</div>
+<!-- 当 event.target 是当前元素自身时触发 -->
+<!-- 即事件不是从内部元素触发的 -->
+<div v-on:click.self="doThat">...</div>
+<!-- 点击事件将只会触发一次 -->
+<a v-on:click.once="doThis"></a>
+<!-- 滚动事件的默认行为(即滚动行为)会立即触发 -->
+<!-- 而不会等待 `onScroll` 完成 -->
+<!-- 包含 event.preventDefault() 的情况 -->
+<p v-on:scroll.passive="onScroll">...</p>
+这个 .passive 修饰符尤其能够提升移动端的性能。
<!-- 在 key 是 Enter 时调用 vm.submit() -->
+<input v-on:keyup.enter="submit">
+<!-- 在 key 是 PageDown 时被调用 -->
+<input v-on:keyup.page-down="onPageDown">
+<!-- Alt + C -->
+<input v-on:keyup.alt.67="clear">
+<!-- Ctrl + Click -->
+<div v-on:click.ctrl="doSomething">
+<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button v-on:click.ctrl="onClick">
+<!-- 有且只有 Ctrl 被按下的时候才触发 -->
+<button v-on:click.ctrl.exact="ctrlClick">
+<!-- 没有任何系统修饰符被按下的时候才触发 -->
+<button v-on:click.exact="onClick">
+