在沒有任何前端框架之前，我們寫代碼，只能用原生的JS，進行數據的處理，DOM的操作，譬如對一個id 為txtName 的文本框進行賦值，我們是這樣的 document.getElementById('txtName').value = '張三'。當然這還僅僅是針對通過id獲取DOM ，現實開發中還有其它的各種操作，當然如果熟悉JS的話，其實寫的代碼性能也還不錯。只不過用原生實現的代碼比較多，開發起來慢啊，在這個時間就是金錢的年代，顯然不是很好的方式。
基於原生實現不是很方便，就出來個Jquery框架了，他讓我們少寫很多代碼，對很多操作都進行了封裝簡化，使我們開發起來快多了，譬如同樣針對上面那個文本框賦值的功能，$('#txtName’).val('張三')。如果需要針對這個元素進行樣式等改變，直接往后接着寫就行了，不像原來用原生JS那樣麻煩了。當然框架內部實現還是基於原生JS 這個是沒辦法改變的。
用Jquery開發了還多年，自己一直覺得已經挺快了，沒有更好的方式了。但是總有一些牛逼的人物想更快，更好的方式，JQUERY操作DOM還是太慢了，還是得必須針對一個個DOM去操作，有沒有那種數據變了，DOM也跟着變的。譬如還是上面的例子，張三 我現在又變成了李四了，我不需要找到DOM再賦值，直接文本框值就變成了李四呢。於是乎VUE框架誕生了。
<body>
<div id="app">
<input type="text" v-model="{{username}}" />
<input type="text" v-model="{{username}}" />
</div>
<script src="//unpkg.com/vue/dist/vue.js"></script>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
username:'張三'
}
});
</script>
我們只要data中 username 值賦予張三，文本框那邊綁定了username , 自動就值出來了，而且就算來2個文本框，也不用我們一個個去操作每個dom。此時我們如果姓名變了 username=‘李四’，那么兩個文本框的值也變成李四了，神奇不？
當然這只是VUE其中一個方便之處，還有很多功能都大大簡化了我們前端的開發，仔細看有點像我們服務器端ASP.NET一樣，對頁面綁定數據的時候 填一個變量名 <input type="text" value="<%=username%>" />