借用一下阮老师的图。。。
MVVM模式的数据流向
不管是最开始的MVC（典型代表是JSP？？），还是之后的MVP（这个没接触过），以及现在的MVVM，其本质都是想尽可能的实践软件工程中高内聚，低耦合的开发要求。映射在前端上，最开始是事件和表现分离（使用<script>标记引入外部JavaScript），到后来，诸如<font>，<center>等一类标记在新标准中也逐渐的被废弃，甚至连元素内部的style属性也不建议使用，我猜它是想保持尽可能的向前兼容性，毕竟像JQuery这类框架，一些动画的实现就是简单的包装了一下dom方法的setAttribute属性。现在我来到了Vue的大门前，想看看我能学到什么。
引入Vue，曾经帮人部署过Vue工程，惊讶于代码的简洁与干练，不过初探时，和其他的js库引入并无二致。
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
接着你就可以构建Vue版的Hello World
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello World!' } })
有JQuery的感觉，拿ID，放值一气呵成，似乎也就那样
再来个狠一点的
<div id="app"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div>
var app = new Vue({ el: '#app', data: { message: 'You loaded this page on ' + new Date() } })
这两个例子说明了创建一个Vue实例，传入的参数和data域与元素数据之间的对应关系，不过并不能说明它的数据流向。但是如果你在浏览器控制台输入这样一条代码
app.message = "123"
则上述元素显示的值就会动态的改变为“123”
结合最开始模式的说明图，当ViewModel改变的时候，相应的就会影响View的数据
类似的，还有这样一个例子
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
这个例子也能说明刚才的观点，如果View的数据改变了呢？
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
如果尝试了以上代码，就会发现，你输入的东西和上面显示的是完全一致的，当然我们也可以添加其他的逻辑，但是尝试一下另外一种思路，打开控制台，我们会发现，
app元素绑定的事件
全部都是DOM2级事件，即在原生js中使用addEventListener绑定的事件。
我们再整个活，在控制台中输入这几句代码。
var p = document.getElementById("app").getElementsByTagName('p');
//获取app下属的p元素的引用
var input = p.nextElementSibling;
//获取app下属的input元素的引用（即p的右兄弟）
input.innerHTML="123";
//并不会产生结果，相对的p元素的内容也不会发生改变
p.innerHTML="123";
//p元素发生了改变
所以，这里的input元素应该是一个虚拟元素（毕竟在控制台里都没有属性。。。）
最后，贴一张生命周期的图
生命周期
加油
网友评论