{{ message }}
凉！ 但是在实际的应用中，我们将要做的不仅仅是改变属性的文本。
令人费解的问题： 如何在v-on指令的双引号中放入复杂的 JavaScript 代码？
v-on
上面提到的大脑拖曳问题的答案是使用方法。 就像“data”对象一样，我们的 Vue 实例有一个可选的“methods”对象，我们可以在其中定义所有方法。
“data”
“methods”
现在，在v-on的双引号中，只需提及方法的名称，然后传递所需的参数（如果有）。 然后，在 Vue 实例的“methods”对象中定义方法，该方法将在每次click事件发生时触发。
click
<button v-on:click="greet('howdy')">Say Hello</button>
var app = new Vue({ el: "#app", data: { message: "Hi" }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; } } });
您注意到this关键字的用法了吗？ 为了从 HTML 引用data对象的属性，我们可以直接使用它们，因为我们使用‘el’关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是，在methods内部，我们必须使用‘this’关键字指向 Vue 实例，然后访问data对象的属性。
this
data
‘el’
methods
‘this’
单击该按钮，“说声你好”触发了greet(‘howdy’)方法，并且该方法中的代码被执行，从而向网页呈现“Howdy”。
greet(‘howdy’)
假设我们有一个名为“加 1 ”的按钮和一个初始值为zero的计数器。 每次单击该按钮时，都会在现有的counter值上加 1 并将其打印到屏幕上。
zero
counter
现在让我们将想象力带入现实。 只需将v-on指令与click用作参数，即可触发将counter值加 1 的方法。
<button v-on:click="addOne">Add 1</button> <p> {{ counter }} </p>
methods: { addOne: function() { this.counter += 1; } }
脑筋急转弯问题： 如果我们只想先在首先在 click上触发此方法，然后再不触发该方法怎么办？
该问题的答案是 – 事件修饰符！ 这些使我们能够修改事件的行为（正如其名称所暗示的）。
用法：在事件名称（在本例中为click）之后，添加一个点并指定要使用的修饰符的名称。
<button v-on:click.once="addOne">Add 1</button>
使用事件修饰符.once，click事件将仅触发一次。 这意味着，无论单击按钮多少次，只要将counter的值增加到 1，“addOne”方法将仅被称为。
.once
“addOne”
同样，其他可用的事件修饰符是
最常用的修饰符是.stop和.prevent，它们称为众所周知的event.stopPropagation()和event.preventDefault()方法。 这些是本机事件对象随附的方法。 这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法，借助修饰符来处理此类常见事件详细信息，而不是在 Vue 实例的方法中显式指定这些事件方法（例如event.preventDefault()来取消事件）。
.stop
.prevent
event.stopPropagation()
event.preventDefault()
根据stopPropagation()事件方法，.stop修饰符将进一步停止事件的传播。
stopPropagation()
根据preventDefault()方法，.prevent修饰符将防止发生默认操作。 .prevent的最佳示例是将其与Submit按钮一起使用，以便触发提交事件时，它不会重新加载页面。
preventDefault()
Submit
警告：一开始可能会有些弯腰！
Vue 让我们像这样，将这些修饰符一个接一个地链接，
v-on:click.self.prevent
链接的顺序非常重要。 因为与每个修饰符相关的代码是按相同顺序生成的。
例如，
<a href="https://vuejs.org/" v-on:click.self.prevent target="_blank">Open Vue <p>Click me now</p> </a>
使用v-on:click.self.prevent仅会阻止单击<a>元素本身，而不是单击其child元素。 好吧，我听到你说“请用英语”！ 换句话说，这意味着
<a>
child
vuejs.org
相反，如果我们将链接修饰符的顺序更改为v-on:click.prevent.self，则将防止发生所有单击事件。
v-on:click.prevent.self
<a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a>
单击<a>的“打开 Vue” 和<p>的“立即单击我” 都不会打开vuejs.org（换句话说，它无法打开 ）。
<p>
现在，让我们看一下到目前为止处理的完整代码，
index.html
<!DOCTYPE html> <html> <head> <title>Hello Vue!</title> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <!-- Listening to click event with v-on directive --> <button v-on:click="greet('howdy')">Say Hello</button> <p> {{ message }} </p> <h2>Event Modifiers</h2> <!-- Using .once to modify click event --> <button v-on:click.once="addOne">Add 1</button> <p> {{ counter }} </p> <!-- chaining event modifiers --> <a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a> </div> <!-- including index.js file --> <script src="index.js"></script> </body> </html>
index.js
var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } });
我知道今天有很多事情要消化。 上面讨论的所有代码以及不言自明的注释在 GitHub 仓库中可用。 慢慢来，我很快就会回来讨论键盘和其他鼠标 DOM 事件。
祝你有个美好的一天！
