Vue绑定事件和双向数据绑定

最新推荐文章于 2025-05-08 10:39:13 发布

原创最新推荐文章于 2025-05-08 10:39:13 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue.js中的事件监听v-on:click，通过案例展示了如何将事件绑定到methods中的方法。接着，深入探讨了Vue.js的双向数据绑定原理，解释了其在处理表单时的优势。并提供了v-model在表单元素如文本输入、单选按钮和下拉框中的应用示例，展示了数据如何随着视图的改变而实时更新。

一、v-on：监听事件

事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件!

案例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
</head>
<body>

<div id="app">
    <button v-on:click="sayHi">Click me</button>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message : '马西莫'
        },
        methods: {//方法必须定义在Vue的method对象中
            sayHi: function () {
                alert(this.message)
            }
        }
    });
</script>

</body>
</html>

效果：

在这里插入图片描述

二、什么是双向数据绑定

2.1、概述

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex ，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2.2、为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别好了。即两者并不互斥,在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2.3、在表单中使用双向数据绑定

可以用v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
</head>
<body>

<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}<br>
    ===========================================================<br>
    性别：
    <input type="radio" name="sex" value="男" v-model="massimo">男
    <input type="radio" name="sex" value="女" v-model="massimo">女

    <p>
        选中了：{{massimo}}
    </p>
    ===========================================================<br>
    下拉框：
    <select v-model="selected">
        <option>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{selected}}</span>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message: "123",
            massimo: '',
            selected: ''
        }
    });
</script>

</body>
</html>

效果：
在这里插入图片描述