Vue簡介

發端于2013年的個人項目，已然成為全世界三大前端框架之一，在中國大陸更是前端首選。

它的設計思想、編碼技巧也被眾多的框架借鑒、模仿。

紀略

? 2013年，在Google工作的尤雨溪，受到Angular的啟發，從中提取自己所喜歡的部分，開發出了一款輕量框架，最初命名為Seed。

[尤雨溪] ?

? 同年12月，這粒種子發芽了，更名為Vue，版本號是0.6.0。

? 2014.01.24，Vue正式對外發布，版本號是0.8.0。

? 發布于2014.02.25的0.9.0，有了自己的代號：Animatrix，這個名字來自動畫版的《駭客帝國》，此后，重要的版本都會有自己的代號。

[Animatrix電影海報] ?

? 0.12.0發布于2015.06.13，代號Dragon Ball，這一年，Vue迎來了大爆發，Laravel 社區（一款流行的 PHP 框架的社區）首次使用 Vue（我也是在這個論壇上認識Vue的），Vue在JS社區也打響了知名度。

[Dragon Ball] ?

? 1.0.0 Evangelion（新世紀福音戰士）是Vue歷史上的第一個里程碑。同年，vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相繼發布，標志著 Vue從一個視圖層庫發展為一個漸進式框架。很多前端同學也是從這個版本開始成為Vue的用戶。

[Evangelion] ?

? 2.0.0 Ghost in the Shell（攻殼機動隊）是第二個重要的里程碑，它吸收了React的Virtual Dom方案，還支持服務端渲染。

[Ghost in the Shell] ?

? 就在不久前，Vue發布了2.6.0 Macross（超時空要塞），這是一個承前啟后的版本，因為在它之后，3.0.0也呼之欲出了。

[Macross] ?

注：咱們學習的3.0版本可以猜一猜這個老二次元動漫迷會起什么名字

Vue是什么？

Vue概念

Vue (發音為 /vju?/，類似 view) 是一款用于構建用戶界面的漸進式 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是復雜的界面，Vue 都可以勝任。

用戶界面

基于數據渲染出用戶看到的頁面。說白了就是用Vue往HTML頁面中填充數據。

[構建用戶界面] ?

漸進式

漸進式是一種設計理念，即在不失去當前功能的前提下，逐步添加新的功能和特性。

聲明式渲染：需要聲明在哪里要做什么，不需要關心具體實現。

框架

框架就是整個或部分系統可重用的設計，表現為一組抽象構件及構件實例間交互的方法；另一種定義認為，框架是可被應用開發者定制的應用骨架。

可以說，一個框架是一個可復用的設計構件，它規定了應用的體系結構，闡明了整個設計、協作構件之間的依賴關系、責任分配和控制流程，表現為一組抽象類以及其實例之間協作的方法，它為構件復

用提供了上下文(Context)關系。因此構件庫的大規模重用也需要框架。

應用框架的概念也很簡單。它并不是包含構件應用程序的 小片程序，而是實現了某應用領域通用完備功能（除去特殊應用的部分）的底層服務。使用這種框架的編程人員可以在一個通用功能已經實現的基礎上開始具體的系 統開發。框架提供了所有應用期望的默認行為的類集合。具體的應用通過重寫子類(該子類屬于框架的默認行為)或組裝對象來支持應用專用的行為。

簡單來說 原生：自己蓋房子

框架：毛坯房，自己裝修。

[Vue中文官網] ?https://cn.vuejs.org/?

---

Vue快速上手

接下來我們要一起創建第一個屬于自己的Vue頁面咯！！！

[Vue實例過程] ?

<div id="app">{{msg}}
</div>
<script src="Vue.js"></script>
<script>new Vue({el: '#app',data: {msg: "靡語IT！",}})
</script>

輸出結果：靡語IT！

代碼注釋

<div id="app">//準備要被Vue操作的容器，一個div{{msg}}
</div>
<script src="Vue.js"></script>//引包，引入官網下載的Vue文件
<script>new Vue({//創建vue實例來操作容器el: '#app',//el掛在要操作的容器，也就是id是app的divdata: {//實現Vue的功能msg: "靡語IT！",}})

注：現在你已經寫出了第一個Vue頁面了，快去用Vue寫一個淘寶吧！！！

---