为 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>

让我们来分析一下这些代码:

  1. 我们在 Vue 实例中声明了 methods 属性。在这里你将把所有的方法都放在这里。
  2. methods 对象的 { } 里面,我们声明了 buttonClicked() 方法,这是我们要在按钮的@click 上调用的方法。在这里,我们的方法不会接收任何参数,所以方法的 () 里不用写任何东西。
  3. 我们将 0-1 的随机值乘以 100 的结果使用 Math. floor 四舍五入然后加到字符串中,并将其存储在一个常量里。
  4. 我们将新的字符串值赋给 myLocalProperty 属性。这里我们要注意,当我们给 data:{} 里面的一个属性赋值时,必须 要使用 this.属性名 来访问它。

在每个方法的上下文中,关键字 this 指的是 Vue 实例。 Vue 会在底层执行一些 “魔法”,这样你就可以通过执行 this.属性 = 值 来读取或写入你定义的属性。

现在我们设置好了所有东西,重新刷新你的 index.html 文件,然后点击按钮。我们会看到在 <p> 标签上 {{ }} 内字符串的值将在每次点击按钮时更新,每次点击按钮时我们自定义的方法都会更新。就这样,Vue 响应性的魔力又一次发挥了出来。

结语

如果这时你在想,使用 Vue 做这些事情真的很简单,那么就对了。我最喜欢这个框架的特点就是它语法清晰、足够简单、好用。但是,这并不意味着 Vue 不强大。

到目前为止,我们对 Vue 能做的事情还只摸到了皮毛,但是随着我们文章的深入,你会发现这些小小的模块组合在一起时,很快就会在你下一个程序中大放异彩。


请继续关注第 3 节!😉

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/marinamosti/hands-on-vuej...

译文地址:https://learnku.com/vuejs/t/44753

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!