VUE3入門教學：資料綁定與事件處理-Vue.js-PHP中文網

VUE3入門教學：資料綁定與事件處理

WBOY

發布： 2023-06-15 22:18:14

原創

3475 人瀏覽過

VUE3是一種基於JavaScript框架的UI函式庫，在前端開發中廣泛應用。本文將為初學者介紹VUE3的資料綁定和事件處理。

一、資料綁定

資料綁定是VUE3中最重要的功能，用於將資料綁定到頁面上，使得資料的變動能夠同步到頁面上。 VUE3採用了MVVM（Model-View-ViewModel）的開發模式，可以將模型資料與視圖進行雙向綁定，從而達到資料同步的效果。在實際開發中，我們需要將資料綁定到HTML標籤的屬性上，例如innerHTML。

下面是一個簡單的資料綁定範例：

<!DOCTYPE html>
<html>
<head>
    <title>VUE3数据绑定示例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello, Vue3!'
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>

登入後複製

在上述程式碼中，我們首先引入了VUE3的JavaScript文件，然後定義了一個id為「app」的div，透過“{{ message }}”將資料綁定到了一個p標籤上。接下來我們定義了一個Vue實例，在data中定義了一個message屬性，其初始值為「Hello, Vue3!」。最後我們透過app.mount函數將Vue實例掛載到了id為「app」的div上。這樣，當我們在資料發生變化時，p標籤中的內容也會隨之改變。

二、事件處理

VUE3中的事件處理和其他JavaScript框架相似，透過v-on指令來綁定事件。例如我們可以在按鈕上綁定一個click事件：

<div id="app">
    <button v-on:click="handleClick">Click me</button>
</div>
<script>
    const app = Vue.createApp({
        methods: {
            handleClick() {
                alert('You clicked me!')
            }
        }
    })
    app.mount('#app')
</script>

登入後複製

在上述程式碼中，我們定義了一個id為「app」的div，透過v-on:click指令綁定了一個click事件，當使用者點擊按鈕時，會觸發handleClick函數，彈出一個提示框。

除了click事件，VUE3也支援許多其他的事件，例如：