【Vue】vue的基本使用-双向数据绑定（v-model）并简单理解MVVM

最新推荐文章于 2024-11-01 17:01:39 发布

yy_bazinga

最新推荐文章于 2024-11-01 17:01:39 发布

阅读量555

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/yy_bazinga/article/details/123515725

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue的基本使用-双向数据绑定（v-model）并简单理解MVVM

代码示例
开发流程
MVVM

代码示例

<html>
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
    <!-- view -->
    <div id="myApp">
        <input type="text" v-model="bind_info">
        <p>后边是我输入的内容： {{bind_info}}</p>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        // 创建vue实例
        var vm = new Vue({ // 配置对象
            el: "#myApp", // element：选择器，选中id为myApp的元素
            data: { // model：数据
                bind_info: "hello world!"
            }
        })
    </script>
</body>
</html>

开发流程

1、引入vue.js
2、创建Vue对象
el：指定根element（选择器）
data：初始化数据（页面中可以访问到）
3、双向数据绑定：v-model
4、双向数据的使用：{{xxx}}

MVVM

MVVM是一种思想，包含三部分：
1、Model
2、View
3、ViewModel
上述代码中：
1、data可以理解成是Model部分；
2、<div id="myApp">..</div>可以理解成是View部分；
3、Vue可以理解成是ViewModel部分；
ViewModel主要包括两部分内容：
① DOM Listeners（DOM监听）
② Data Bindings（数据绑定）