Vue.js 是什么
Vue.js（讀音 /vju?/, 類似于view） 是一套構(gòu)建用戶界面的漸進式框架耘拇。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計腰吟。Vue 的核心庫只關(guān)注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合弧圆。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用笔咽。
Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件搔预。
“Vue.js” 一個js開發(fā)框架，國人的作品叶组，以上是關(guān)于vue的介紹拯田。
這是框架出現(xiàn)有過一段時間了，本人剛從安卓跳到前端過來甩十，也接觸過一些開發(fā)框架船庇。用過Angular的朋友應該都知道吭产，體積太大，用起來比較笨重鸭轮。還有一款React,Virtual DOM 的存在使得和真實 DOM 隔了一層有時很不方便垮刹，函數(shù)式的架構(gòu)使得組件之間的通信也難處理。(其實我沒用過张弛，網(wǎng)友說的_)荒典。
不扯太多，來聊聊這個vue吞鸭∷露“簡主“（簡書文章的作者，指本人刻剥，我自己起的名字^_&）剛接觸前端的時候是從js開始的遮咖，相信大部分人也是這樣，然后就是jquery造虏，jquery是直接去操作DOM的御吞，他彌補了前端的很多不足的地方。我從網(wǎng)上整理一些關(guān)于jquery的常用的功能：
1 漓藕、取得頁面中的元素陶珠。如果不使用JavaScript 庫，遍歷DOM （Document Object Model 享钞，文檔對象模型）樹揍诽，以及查找 HTML 文檔結(jié)構(gòu)中某個特殊的部分，必須編寫很多行代碼栗竖。jQuery 為準確地獲取需要檢查或操縱的文檔元素暑脆，提 供了 可靠而富有效率的選擇符機制。
2 狐肢、修改頁面的外觀添吗。CSS 雖然為影響文檔呈現(xiàn)的方式提供了一種強大的手段，但當所有瀏覽器不完全支持相同的標準時份名， 單純使用CSS 就會顯得力不從心碟联。 jQuery 可以彌補這一不足，它提供了跨瀏覽器的標準解決方案同窘。而且玄帕，即使在頁面 已經(jīng)呈現(xiàn)之后部脚，jQuery 仍然能夠改變文檔中某個部分的類或者個別的 樣式屬性想邦。
3 、改變頁面的內(nèi)容委刘。jQuery 能夠影響的范圍并不局限于簡單的外觀變化丧没，使用少量的代碼鹰椒，jQuery 就能改變文檔的內(nèi) 容∨煌可以改變文本漆际、插入或翻轉(zhuǎn)圖像、對列表重新排序夺饲，甚至奸汇，對HTML 文檔的整個結(jié)構(gòu)都能重寫和擴充—— 所有這些只 需一個簡單易用的API 。
4 往声、響應用戶的頁面操作擂找。即使是最強大和最精心設計的行為，如果我們無法控制它何時發(fā)生浩销，那它也毫無用處贯涎。jQuery 提 供了截取形形色色的頁面事件 （比如用戶單擊一個鏈接）的適當方式，而不需要使用事件處理程序搞亂HTML 代碼慢洋。此 外塘雳，它的事件處理API 也消除了經(jīng)常困擾Web 開發(fā)人員的瀏覽器不一 致性。
5 普筹、為頁面添加動態(tài)效果败明。為了實現(xiàn)某種交互式行為，設計者也必須向用戶提供視覺上的反饋太防。jQuery 中內(nèi)置的一批淡入肩刃、 擦除之類的效果，以及制作新效果的工具包杏头，為此提供了便利盈包。
6 、無需刷新頁面即可從服務器獲取信息醇王。這種編程模式就是眾所周知的AJAX （Asynchronous JavaScript and XML 呢燥， 異步JavaScript 和XML ），它能輔助Web 開發(fā)人員創(chuàng)建出反應靈敏寓娩、功能豐富的網(wǎng)站叛氨。
jquery的功能已經(jīng)給前端開發(fā)者帶來了不少的福音，比如我們來實習一個簡單的功能試試,這個demo演示的是在一個文本框里輸入什么下面的值就會動態(tài)跟著改變棘伴，簡簡單單的幾行代碼就實習了這個功能：
·Jquery實現(xiàn):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<div>
<input placeholder="edit me">
<p id="text"></p>
</div>
</body>
<script type="text/javascript">
$('input').bind('input propertychange', function() {
$('#text').html($(this).val());
});
</script>
</html>
·Vue實現(xiàn):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>{{ message }}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
