借用一下阮老師的圖。。。
不管是最開始的MVC（典型代表是JSP？？），還是之后的MVP（這個沒接觸過），以及現(xiàn)在的MVVM，其本質(zhì)都是想盡可能的實(shí)踐軟件工程中高內(nèi)聚，低耦合的開發(fā)要求。映射在前端上，最開始是事件和表現(xiàn)分離（使用<script>標(biāo)記引入外部JavaScript），到后來，諸如<font>，<center>等一類標(biāo)記在新標(biāo)準(zhǔn)中也逐漸的被廢棄，甚至連元素內(nèi)部的style屬性也不建議使用，我猜它是想保持盡可能的向前兼容性，畢竟像JQuery這類框架，一些動畫的實(shí)現(xiàn)就是簡單的包裝了一下dom方法的setAttribute屬性。現(xiàn)在我來到了Vue的大門前，想看看我能學(xué)到什么。
引入Vue，曾經(jīng)幫人部署過Vue工程，驚訝于代碼的簡潔與干練，不過初探時，和其他的js庫引入并無二致。
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
接著你就可以構(gòu)建Vue版的Hello World
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello World!' } })
有JQuery的感覺，拿ID，放值一氣呵成，似乎也就那樣
再來個狠一點(diǎn)的
<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() } })
這兩個例子說明了創(chuàng)建一個Vue實(shí)例，傳入的參數(shù)和data域與元素數(shù)據(jù)之間的對應(yīng)關(guān)系，不過并不能說明它的數(shù)據(jù)流向。但是如果你在瀏覽器控制臺輸入這樣一條代碼
app.message = "123"
則上述元素顯示的值就會動態(tài)的改變?yōu)椤?23”
結(jié)合最開始模式的說明圖，當(dāng)ViewModel改變的時候，相應(yīng)的就會影響View的數(shù)據(jù)
類似的，還有這樣一個例子
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反轉(zhuǎn)消息</button> </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
這個例子也能說明剛才的觀點(diǎn)，如果View的數(shù)據(jù)改變了呢？
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
如果嘗試了以上代碼，就會發(fā)現(xiàn)，你輸入的東西和上面顯示的是完全一致的，當(dāng)然我們也可以添加其他的邏輯，但是嘗試一下另外一種思路，打開控制臺，我們會發(fā)現(xiàn)，
全部都是DOM2級事件，即在原生js中使用addEventListener綁定的事件。
我們再整個活，在控制臺中輸入這幾句代碼。
var p = document.getElementById("app").getElementsByTagName('p');
//獲取app下屬的p元素的引用
var input = p.nextElementSibling;
//獲取app下屬的input元素的引用（即p的右兄弟）
input.innerHTML="123";
//并不會產(chǎn)生結(jié)果，相對的p元素的內(nèi)容也不會發(fā)生改變
p.innerHTML="123";
//p元素發(fā)生了改變
所以，這里的input元素應(yīng)該是一個虛擬元素（畢竟在控制臺里都沒有屬性。。。）
最后，貼一張生命周期的圖
加油
