25. Events & Methods - daniel-qa/Vue GitHub Wiki

25. Events & Methods

你不想在HTML代码中加入太多的逻辑｡

相反, HTML代码实际上应该只是关于输出的东西｡

这样的逻辑,即使不是太复杂, 通常也应该包含在 JavaScript 代码中｡

  • 在 vue 控制的 html 中，你不能使用像下列的 function
function add{
  counter = conuter +1;
}

您只能在此Vue控制的HTML部分中使用在Vue应用程序中定义的内容｡ 像下面

html

<section id="events">
  <h2>Events in Action</h2>
  <button v-on:click="counter++">Add</button>
  <button v-on:click="counter = counter -1">Reduce</button>
  <p>Result: {{ counter }}</p>
</section>

app.js

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
    };
  },
});

app.mount('#events');

现在, 我们不只是像以前那样使用方法来手动调用它们, 我们还可以使用方法将它们连接到事件侦听器,

并在特定事件发生时让Vue为我们调用它们｡

例如, 这里我们可以添加一个add方法,

虽然这个名字完全由你决定, 你也可以把它命名为add

counter或increment, 或者你想要的任何名字,

但我会把它命名为add｡

在这里, 您可以更新这个计数器, 这一点非常重要,

const app = Vue.createApp({
    data() {
        return {
            counter: 0,
        };
    },
    methods: {
        add(){
            this.counter = this.counter + 1;
        }
    }  
});

app.mount('#events');
  • 完整代碼

button click時，會呼叫 add()，並在點擊時，Result 會顯示 counter 內容的改變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
          rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js" defer></script>
</head>
  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add()">Add</button>
      <button v-on:click="counter = counter -1">Reduce</button>
      <p>Result: {{ counter }}</p>
    </section>
  </body>
</html>

const app = Vue.createApp({
    data() {
        return {
            counter: 0,
        };
    },
    methods: {
        add(){
            this.counter = this.counter + 1;
        }
    }  
});

app.mount('#events');

除了像这样调用add,

你也可以指向它, 这样你就可以告诉Vue, "这是函数的名字", 或者更准确地说是方法的名字.

<button v-on:click="add">Add</button>

因为它更接近于普通JavaScript以及如何在其中设置事件侦听器,

但值得注意的是, 如您所见, 这两种语法都是允许的

这被认为是更好的, 所以从这种方法和这种模式开始是一个好主意｡

这就是我们如何使用方法｡

我们不能只在花括号中使用它们,

也不能将它们与绑定一起使用, 以动态地导出我们想要输出的值, 但我们也可以将它们与事件侦听器一起使用, 以定义当事件发生时应该执行的代码｡

实际上,

您将更经常地使用方法将它们连接到事件, 而不是使用它们来输出动态派生的内容｡

我之前展示的只是向你展示这是可能的, 并介绍一些方法,

但通常,你会像这样将它们与事件侦听器结合使用｡

  • 加入 reduce()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
          rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js" defer></script>
</head>
  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add()">Add</button>
      <button v-on:click="reduce">Reduce</button>
      <p>Result: {{ counter }}</p>
    </section>
  </body>
</html>

app.js

const app = Vue.createApp({
    data() {
        return {
            counter: 0,
        };
    },
    methods: {
        add(){
            this.counter = this.counter + 1;
        },
        reduce() {
            this.counter = this.counter - 1;
        }

    }
  
});

app.mount('#events');
  • 加入參數

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
          rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js" defer></script>
</head>
  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add(10)">Add 10</button>
      <button v-on:click="reduce(5)">Reduce 5</button>
      <p>Result: {{ counter }}</p>
    </section>
  </body>
</html>

app.js

const app = Vue.createApp({
    data() {
        return {
            counter: 0,
        };
    },
    methods: {
        add(num){
            this.counter = this.counter + num;
        },
        reduce(num) {
            this.counter = this.counter - num;
        }

    }
  
});

app.mount('#events');
⚠️ **GitHub.com Fallback** ⚠️