VUE3入门教程：数据绑定和事件处理-Vue.js-PHP中文网

VUE3入门教程：数据绑定和事件处理

WBOY

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

原创

3479 人浏览过

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还支持很多其他的事件，比如：