vue.js 速成课程(2)：按钮点击

Vue.js 是响应式的，这意味着我可以像按钮点击一样对用户事件做出反应

让我们创建一个示例。打开 index.html（请参阅昨天的课程以供参考）并添加一个按钮：

<div id="app">
    <h1>{{ message }}</h1>
    <p>{{ number1 + number2 }}</p>
    <p>
        <button>Change message</button>
    </p>
</div>

如你所见，我们添加了一个按钮 html 标签。按钮文本为“更改消息”。目前，按钮不执行任何操作。

让我们为该按钮添加一个事件点击：

<button v-on:click="">Change message</button>

v-on:click 是一个 Vue.js 指令。该指令告诉 Vue，在点击事件发生时执行双引号之间的代码。

让我们在这些双引号中添加一些操作：

<button v-on:click="message = 'New Message'">Change message</button>

这非常合乎逻辑。我们将消息设置为新值。

当我们单击按钮时，Vue 将重新渲染 DOM 的该部分，新消息将立即显示。

请注意，事件可以是其他任何内容。例如，我们可以仅在双击时更改消息：

<button v-on:dblclick="message = 'New Message'">Change message</button>

或者例如，当鼠标第一次移到按钮上时，我们可以改变消息。

<button v-on:mouseenter="message = 'New Message'">Change message</button>

随着课程的进展，我们将学习和使用更多事件。

事件也可以附加到几乎任何 html 标签，而不仅仅是按钮。例如，我们可以将 v-on:click 事件链接到 div：

<div v-on:click="message = 'New Message on div click'">This is div content</div>

事件可以内联执行或引用方法：

<button v-on:click="changeMessage()">Change message</button>

引用方法需要存在于我们的 Vue 代码中：

const app = Vue.createApp({
    data() {
        return {
            message: "Hello World Vue",
        };
    },
    methods: {
        changeMessage() {
            this.message = "New message from method";
        },
    },
});

app.mount("#app");

我们添加一个方法属性。该属性将包含我们想要在 Vue.js 组件中使用的所有方法定义

注意，我们还可以将参数传递给该方法：

methods: {
    changeMessage(message) {
        this.message = message
    }
}

相应地更改我们的 html：

<button v-on:click="changeMessage('My custom message')">Change message</button>

最后但同样重要的一点是，v-on 指令可以用 @ 的快捷指令替换：

<button @click="message = 'New Message'">Change message</button>