为 Vue.js 新手准备的实战入门教程，第二部分
在上一节中 (课程第一部分)，我们知道了如何使用普通的<script> 标签将 Vue 添加到 index.html 中，并且成功地在页面中添加了第一个响应式属性。今天，我们来学习一下如何使用户通过交互来改变这个属性。
到目前为止，我们的代码看起来是这样的：
<html>
<head>
<title>Vue 101</title>
</head>
<body>
<h1>Hello!</h1>
<div id="app">
<p>My local property: {{ myLocalProperty }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
myLocalProperty: 'Im a local property value'
}
});
</script>
</body>
</html>
监听用户事件
为了更好地展示 Vue 的响应性，以及学习如何对用户事件做出响应，我们将添加一个按钮，用户点击的时候改变 myLocalProperty 的值。
首先我们在 <div id="app"> 标签中添加一个按钮。
<div id="app">
<p>My local property: {{ myLocalProperty }}</p>
<hr>
<button>Click me</button>
</div>
现在，我们如何知道这个按钮被点击呢？
如果你之前用的是 jQuery ，你可能会使用 $('button').click(); 来给按钮添加一个点击事件。但是在 Vue 中有一条黄金法则，就是永远不要直接操作 DOM (HTML页面中的元素)。
这里在不涉及底层细节的情况下，你只需要知道 Vue 保留了一份虚拟的 DOM (在本节中就是id为 app的div)，当属性改变时，Vue 会自动计算出这个属性在哪里以及如何更新它。
如果你直接用 JavaScript 对 DOM 进行修改，那么每当 Vue 重新渲染内容时，这些更改可能会失效，因为它不会意识到这些被修改过了。
话不多说，让我们继续将点击事件添加到按钮中：
<button v-on:click="myLocalProperty = 'The button has been clicked'">
Click me
</button>
仔细看，这里多出来一些东西！
我们给 button 标签添加了一个 v-on:click="" 属性，这是什么？在 Vue 中，以 v- 开头的叫做指令，我们可以根据需要将这些指令添加到元素中。
简单的说，指令就是可以让 Vue 知道需要对这里的 DOM 元素进行一些对应的处理。
在这个例子里，我们使用 v-on:click 告诉 Vue 当用户点击时执行 "myLocalProperty = 'The button has been clicked'" 操作。
如果你在浏览器打开index.html页面并且点击button按钮, 你会看到在我们代码中用大括号“{{}}”包裹的字符串myLocalProperty被替换并显示出来。
简写语法
在大多数的时候为了简洁，我们会使用简写语法，‘@[事件名称]’,简写语法和’v-on:[事件名称]’是等价的。
让我们修改一下button标签绑定的click事件使用简写语法：
<button @click="myLocalProperty = 'The button has been clicked'">Click me</button>
方法
通常，如果按钮的用户事件被移除了比如点击事件，必须在你的代码中将所有涉及到该事件的地方都进行相应的修改。所以我们有必要学习函数的用法。
让我们继续，下面我们要点击按钮的时候调用一个自定义方法，该方法会做一些简单的操作，它将在一个字符串中添加个随机数来改变 myLocalProperty 的值。
删除我们之前在 @click 里的内容，用下面这个来替代：
<button @click="buttonClicked">Click me</button>
注意我们没有在 "buttonClicked" 后面添加 () ，当我们的方法不接收任何参数时我们可以忽略它。如果我们的方法需要参数时我们可以这样 @click="changeName('Marina')" (更多关于这一方面的介绍，我们在后面条件渲染的时候会有更多说明 🙂)
现在我们的按钮已经准备好了，可以在点击时执行 buttonClicked 方法，现在我们需要编写这个方法。
Vue 有一个特殊的地方，可以编写我们的方法。这个地方就在我们之前 new Vue({}) 的 {} 里面。
我们将创建一个 methods: {} 属性，它会保存一个待会我们在里面编写函数的对象。
<script>
const app = new Vue({
el: '#app',
data: {
myLocalProperty: 'Im a local property value'
},
methods: { // 1
buttonClicked() { // 2
const newText = 'The new value is: ' + Math.floor( Math.random() * 100); // 3
this.myLocalProperty = newText; // 4
}
}
});
</script>
让我们来分析一下这些代码：
- 我们在 Vue 实例中声明了
methods属性。在这里你将把所有的方法都放在这里。 - 在
methods对象的{ }里面，我们声明了buttonClicked()方法，这是我们要在按钮的@click上调用的方法。在这里，我们的方法不会接收任何参数，所以方法的()里不用写任何东西。 - 我们将 0-1 的随机值乘以 100 的结果使用
Math. floor四舍五入然后加到字符串中，并将其存储在一个常量里。 - 我们将新的字符串值赋给
myLocalProperty属性。这里我们要注意，当我们给data：{}里面的一个属性赋值时，必须 要使用this.属性名来访问它。
在每个方法的上下文中，关键字 this 指的是 Vue 实例。 Vue 会在底层执行一些 “魔法”，这样你就可以通过执行 this.属性 = 值 来读取或写入你定义的属性。
现在我们设置好了所有东西，重新刷新你的 index.html 文件，然后点击按钮。我们会看到在 <p> 标签上 {{ }} 内字符串的值将在每次点击按钮时更新，每次点击按钮时我们自定义的方法都会更新。就这样，Vue 响应性的魔力又一次发挥了出来。
结语
如果这时你在想，使用 Vue 做这些事情真的很简单，那么就对了。我最喜欢这个框架的特点就是它语法清晰、足够简单、好用。但是，这并不意味着 Vue 不强大。
到目前为止，我们对 Vue 能做的事情还只摸到了皮毛，但是随着我们文章的深入，你会发现这些小小的模块组合在一起时，很快就会在你下一个程序中大放异彩。
请继续关注第 3 节！😉
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：