初学者 Vue.js 实践（第 2 部分）

监听用户事件

方法

总结

上次（本系列的第一部分）我们研究了如何使用常规标签将Vue添加到 index.html 中<script>，并且成功地在页面上添加了第一个响应式属性。今天，让我们学习如何通过用户输入来更改此属性。

到目前为止我们的代码如下所示：

<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的反应能力，并学习如何对用户事件做出反应，我们将向我们的应用程序添加一个按钮，该按钮将改变我们的myLocalPropertyprop 的值。

继续，首先向我们的添加一个新按钮<div id="app">。

<div id="app">
  <p>My local property: {{ myLocalProperty }}</p>
  <hr>
  <button>Click me</button>
</div>

现在，我们对这个按钮被点击该如何反应？

如果你有jQuery背景，你的本能可能是尝试做这样的事情：，但是， Vue$('button').click();中有一条黄金法则。永远不要直接操作 DOM（页面 HTML 中的元素）。

无需深入复杂的细节，Vue会保留 HTML 的虚拟“副本”（在本例中为带有“app”ID 的 div），并在属性发生变化时自动🧙‍♀️🧙‍♂️找出在何处以及如何更新它。

如果直接使用 JavaScript 对 DOM 进行更改，则每当 Vue 重新渲染内容时，您都有可能丢失这些更改并出现意外行为，因为它不会意识到这些更改。

理论讲得够多了，我们继续点击操作。给按钮添加如下事件处理程序：

<button v-on:click="myLocalProperty = 'The button has been clicked'">
  Click me
</button>

这里发生了几件事。

v-on:click=""在Vue中，我们有这些可以添加到 HTML 内容中的“指令” 。

指令简单来说就是Vue可以理解的HTML 参数。

在这个特殊的情况下，我们告诉Vue：Vue（v-），在用户点击时执行此操作："myLocalProperty = 'The button has been clicked'"，这只是一个内联声明来改变我们的属性的值。

如果您继续在浏览器中打开index.html文件并单击按钮，您将看到我们之前在代码中插入的字符串{{ }}将对修改属性的按钮做出反应。

替代语法

v-on:[eventname]在大多数地方，您很可能不会发现像我们在这个例子中那样在 HTML 上设置事件，因为在Vue中我们对这种类型的事情有一个非常方便的简写@[eventname]。。

让我们将<button>点击事件更改为使用以下简写：

<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有一个特殊的地方可以编写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>

让我们剖析一下：

我们在Vuemethods实例中声明该属性。正如我提到的，所有实例方法/函数都将放在这里。
methods在对象内部，{ }我们声明了buttonClicked()，它是我们试图在@click监听器上调用的函数。我们暂时不打算使用任何参数，所以为空()。
Math.floor我们将 0-1 的随机值乘以 100 的结果向下取整的值与字符串连接起来，并存储在常量中。
我们将新字符串的值赋给myLocalProperty。现在要非常小心这个data小细节🙃（故意弄个蹩脚的双关语）。当我们为实例属性（里面的那个data: {}）中的属性赋值时，必须通过来访问它this.[prop-name]。

在方法上下文中，该关键字this指的是Vue实例。Vue 会在后台执行一些操作，以便你可以data通过来读取/写入其中的属性this.property = value。

现在一切设置完毕，刷新文件并点击按钮。每次点击按钮时，以及每次执行函数时，容器中index.html插入的字符串值都会更新。Vue 的反应式魔力再次显现。{{ }}<p>buttonClicked

总结

如果你现在觉得，嗯，这真的很容易，那么你的想法是对的。我最喜欢这个框架的一点就是它清晰的语法和简洁性。它真的好用。但这不应该与认为 Vue 不够强大相混淆。

到目前为止，我们只是触及了使用 Vue 可以做的事情的表面，但随着我们阅读这些文章，你会发现，这些组合在一起的微小构建块很快就会成为你下一个令人惊叹的应用程序的核心。

敬请期待第三部分！

文章来源：https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-2-2opb

Vue.js 初学者实践（第二部分）监听用户事件方法总结

初学者 Vue.js 实践（第 2 部分）

监听用户事件

方法

总结

监听用户事件

替代语法

方法

总结