标签：Vue MVVM vm 视图 实例 data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的MVVM</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello, {{name}}</h1>
<h1>{{$options.el}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
name: "world"
}
});
console.log(vm);
</script>
</body>
</html>
什么是MVVM模型？
MVVM其实是三个东西，分别是模型（Model）、视图模型（ModelView）、视图（View）。
Vue的设计是借鉴了MVVM模型的，所以其设计人员建议定义一个Vue实例的时候，尽量去以vm来进行命名。
为什么以vm进行命名呢？
实际上，如果把Vue与MVVM模型中的三个东西一一对应，就会明白为什么了，二者对应如下：
模型（Model）：Vue中的data数据
视图（View）：Vue的模板代码
视图模型（ViewModel）：Vue实例
这样一看就对Vue的整个过程相当清晰了，M的数据（也就是data中的数据）交给VM（也就是Vue实例）出处理，VM处理好之后再将数据交给V（Vue的模板代码）去展示。当然这只是单向的过程，双向的反过来即可。
所以说实际上Vue实例就是连接数据和模板代码的一个桥梁，经过处理的数据会成为Vue实例的一部分。
之前提到插值语法中可以是data中的属性和一些js表达式，现在看来，凡是Vue实例中存在的东西，模板代码都能对其进行调用。
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：Vue,
MVVM,
vm,
视图,
实例,
data
From： https://www.cnblogs.com/jmsstudy/p/17499161.html