【Vue】vue的基本使用-双向数据绑定（v-model）并简单理解MVVM代码示例开发流程MVVM

225 阅读 0 评论 149 点赞

我是靠谱客的博主舒心黑猫，这篇文章主要介绍【Vue】vue的基本使用-双向数据绑定（v-model）并简单理解MVVM代码示例开发流程MVVM，现在分享给大家，希望可以做个参考。

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（数据绑定）