Vue的双向数据绑定

最新推荐文章于 2021-08-25 14:39:54 发布

代码编编◐

最新推荐文章于 2021-08-25 14:39:54 发布

阅读量315

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/wqy18378671261/article/details/117263593

版权

本文通过一个简单的示例介绍了Vue实例如何应用于HTML元素，并详细解析了双向数据绑定的实现过程。核心在于Vue实例中的DOM监听器（DOMListeners）监控DOM变化并更新数据，而数据绑定（DataBindings）则在数据变化时更新DOM。示例展示了如何使用v-model在姓名输入框和页面显示之间实现双向绑定。

摘要由CSDN通过智能技术生成

Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定的id的某个元素。
当创建ViewModel后，双向绑定的实现过程：
（1）DOM Listeners（DOM监听器）和Data Bindings（DOM绑定）看作成两个工具，它们是实现双向绑定的关键；
（2）从View侧看，ViewModel中的DOM Listeners工具会帮忙监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
（3）从Model侧看，当用户更新Model中的数据时，Data Bindings工具会更新页面中的DOM元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 使用Vue的双向数据绑定来实现组合姓和名的欢迎页面 -->
    <title>欢迎页面</title>
    <style>
        #app{
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- 这是View -->
    <div id="app">
        <!-- vue绑定的数据 -->
        <fieldset>
            <legend>Welcome to you</legend>
            <p>
                <label for="txtName">姓名：</label>
                <input type="text" name="" id="txtName" v-model="firstName">
            </p>
            <p>
                欢迎您回来，{{firstName}}!
            </p>
        </fieldset>
    </div>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var user={
            firstName:""
        };

        // 实例化Vue
        var vm=new Vue({
            // 选项参数
            // el：挂载目标，可以使HTMLElement，也可以是CSS选择器
            // data：Vue实例的数据对象

            el:"#app",
            data:user
        });
    </script>
</body>
</html>