Vue的设计者在设计Vue的时候参考了MVVM模型,虽然没有完全遵循 MVVM 模型
https://zh.wikipedia.org/wiki/MVVM,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm
(ViewModel 的缩写) 这个变量名表示 Vue 实例。
在维基百科中是这样解释MVVM模型的
下面我们介绍一下Vue中的MVVM模型
1.M 模型(Model):对应data中的数据
2.V 视图(View):模板
3. VM:视图模型(ViewModel): Vue实例对象
这里的VM是V与M之间联系的桥梁
接下来我们用代码的形式去解释上图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>名称:{{name}}</h1>
<h1>地址:{{address}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name:'张三',
address:'北京'
}
})
</script>
</html>
那么这里我们再将这里的VM,也就是Vue实例打印出来看看。
结果如下:
我们发现data中的属性,全部可以在VM中找到,所以结合上面的原理我们可以得到,View中之所以可以显示data中的值,是因为Vue经过了一系列复杂的操作,将值给了VM,然后通过VM给了View进行了呈现。
由此我们可以猜测只要是VM身上出现的值,都可以在view直接使用,甚至是VM原型出现的值也可以直接用。下面我们找两个值测试一下:
总结:
1.data中的所有属性,最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用