Vue是什么？來看看官方的介紹。
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
Vue和Jquery有什么區別？
- jquery到vue轉變是一個思想的轉變，是將jquery直接操作dom的思想轉變到操作數據上去。
- jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：
$("lable").val();,它還是依賴DOM元素的值。 - Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
從代碼來看看兩者的不同，我們從中可以看出vue只需要向數據message里面push一條數據即可完成添加一個li標簽的操作，而jquery則需要獲取dom元素節點，並對dom進行添加一個標簽的操作，如果dom結構特別復雜，或者添加的元素非常復雜，則代碼會變得非常復雜且閱讀性低。
jquery代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<ul id="list">
<li>第1條數據</li>
<li>第2條數據</li>
</ul>
<button id="add">添加數據</button>
</div>
</body>
<script>
$(document).ready(function() {
var i=2;
$('#add').click(function() {
i++;
//通過dom操作在最后一個li元素后手動添加一個標簽
$("#list").children("li").last().append("<li>第"+i+"條數據</li>")
});
});
</script>
Vue代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--根據數組數據自動渲染頁面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add">添加數據</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: ["第1條數據","第2條數據"],
i:2
},
methods:{
//向數組添加一條數據即可
add:function(){
this.i++
this.message.push("第"+this.i+"條數據")
}
}
})
</script>
為什么需要使用vue?
近兩年前端技術變革速度太快，vue不論針對web項目開發，網站制作，還是app，小程序開發，都越來越流行，其便捷性及易用程度都讓你不得不考慮去學習。如果僅僅還是傳統的各種cms開源代碼建站仿站，顯然你的技術已經跟不上了，如果你開發的項目數據交互較多，並且前后端分離明顯，那么vue將會使你未來技術長足成長的不二選擇。
- 組件化: 其中以 React 的組件化最為徹底,甚至可以到函數級別的原子組件,高度的組件化可以是我們的工程易於維護、易於組合拓展。
- 天然分層: JQuery 時代的代碼大部分情況下是面條代碼,耦合嚴重,現代框架不管是 MVC、MVP還是MVVM 模式都能幫助我們進行分層，代碼解耦更易於讀寫。
- 生態: 現在主流前端框架都自帶生態,不管是數據流管理架構還是 UI 庫都有成熟的解決方案。