Vue.js 學習筆記第1章初識Vue.js

時間 2019-11-11

原文原文鏈接

本篇目錄：

1.1 Vue.js 是什麼html

1.2 如何使用Vue.js前端

本章主要介紹與Vue.js有關的一些概念與技術，並幫助你瞭解它們背後相關的工做原理。
經過對本章的學習，即便從未接觸過Vue.js，你也能夠運用這些知識點快速構建出一個Vue.js應用。vue

1.1 Vue.js 是什麼

Vue.js的官方文檔中是這樣介紹它的：webpack

簡單小巧的、漸進式JavaScript框架，是以應付任何規模的應用。web

簡單小巧是指Vue.js壓縮後大小僅有20KB。
所謂漸進式(Progressive)，就是你能夠一步一步、有階段性地來使用Vue.js，沒必要一開始就是用全部的東西。
隨着咱們不斷的介紹，你會深入感覺到這一點，這也正式開發者熱愛Vue.js的主要緣由之一。vue-router

使用Vue.js可讓Web開發變得簡單，同時也顛覆了傳統前端開發模式。
它提供了現代Web開發中常見的高級功能，好比：vuex

解耦視圖與數據；
可複用的組件；
前端路由；
狀態管理；
虛擬DOM(Virtual DOM)。

1.1.1 MVVM模式

與志明前端框架Angular、Ember等同樣，Vue.js在設計上也是用MVVM(Model-View-ViewModel)模式。編程

MVVM模式是由經典的軟件架構MVC衍生來的。
當View(視圖層)變化時，會自動更新到ViewModel(視圖模型)，反之亦然。
View和ViewModel之間經過雙向綁定(xlata-binding)創建聯繫，如圖1-1所示：
瀏覽器

1.1.2 Vue.js 有什麼不一樣

若是你使用過jQuery，那你必定對操做DOM、綁定事件等這些原生JavaScript能力很是熟悉，好比咱們在指定DOM中插入一個元素，並給它綁定一個點擊事件。前端框架

1 if (showBtn) {
2     var $btn = $("<button>").text("Click me");
3     $btn.on("click", function() {
4         console.log("Clicked!");
5     });
6     $("#app").append($btn);
7 }

這段代碼不難理解，操做的內容也不復雜，不過這樣讓咱們的視圖代碼和業務邏輯緊耦合在一塊兒，隨着功能不斷增長，直接操做DOM會使得代碼愈來愈難以維護。

而Vue.js經過MVVM的模式拆分視圖與數據兩部分，並將其分離。
所以，你只須要關心你的數據便可，DOM的事情Vue會幫你自動搞定，好比上面的示例用Vue.js能夠改寫爲：

 1 <body>
 2     <div id=」app」>
 3         <button v-if=」showBtn」 v-on:click=」handleClick」>Click me</button> 
 4     </div>
 5 </body>
 6 
 7 <script>
 8     new Vue({
 9         el: "#app",
10         data: {
11             showBtn: true
12         },
13         methods: {
14             handleClick: function() {
15                 console.log("Clicked!");
16             }
17         }
18     });
19 </script>

提示：
暫時還不須要理解上述代碼，這裏只是快速展現Vue.js的寫法，在後面的章節會詳細介紹每一個參數的用法。

1.2 如何使用 Vue.js

每個框架的產生都是爲了解決某個具體的問題。
在正式開始學習Vue.js前，咱們先對傳統前端開發模式和Vue.js的開發模式作一個對比，以此瞭解Vue.js產生的背景和核心思想。

1.2.1 傳統的前端開發模式

前端技術在近幾年發展迅速，現在的前端開發已再也不是10年前寫個HTML和CSS那樣簡單了，新的概念層出不窮，好比ECMAScript 六、Node.js、NPM、前段工程化等。
這些新東西在不斷優化咱們的開發模式，改變咱們的編程思想。

隨着這些技術的普及，一套可稱爲「萬金油」的技術棧被許多商業項目用於生產環境：
jQuery + RequireJS(SeaJS) + artTemplate(doT) + Gulp(Grunt)

這套技術以jQuery爲核心，能兼容絕大部分瀏覽器，這是不少企業比較關心的，由於他們的客戶極可能還在用IE7及如下瀏覽器。
使用RequireJS或SeaJS進行模塊化開發能夠解決代碼依賴混亂的問題，同時便於維護及團隊協做。
使用輕量級的前端模板(如doT)能夠將數據與HTML模板分離。
最後，使用自動化構建工具(如Gulp)能夠合併壓縮代碼，若是你喜歡寫Less、Sass以及如今流行的ES 6，也能夠幫你進行預編譯。

這樣一套看似完美無瑕的前端解決方案就構成了咱們所說的傳統前端開發模式，因爲它的簡單、高效、實用，至今仍有很多開發者在使用。
不過隨着項目的擴大和時間的推移，出現了更復雜的業務場景，好比SPA(單頁面富應用)、組件解耦等。
爲了提高開發效率，下降維護成本，傳統的前端開發模式已不能徹底知足咱們的需求，這時就出現了Angular、React以及咱們要介紹的主角Vue.js。

1.2.2 Vue.js 的開發模式

Vue.js是一個漸進式的JavaScript框架，根據項目需求，你能夠選擇從不一樣的維度來使用它。
若是你只是想體驗Vue.js帶來的快感，或者開發幾個簡單的HTML5頁面或小應用，你能夠直接經過<script>加載CDN文件。
例如：

1 <!-- 自動識別最新穩定版本的Vue.js -->
2 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
3 <!-- 指定某個具體版本的Vue.js -->
4 <script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

兩種版本均可以，若是你不太瞭解各版本的差異，建議直接使用最新的穩定版本。
固然，你也能夠將代碼下載下來，經過本身的相對路徑來引用。
引入Vue.js框架後，在<body>底部使用new Vue()的方式建立一個實例，這就是Vue.js最基本的開發模式。
如今能夠寫入一下完整的代碼來快速體驗Vue：

 1 <!doctype html>
 2 <html lang="zh">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7         <title>Vue 示例</title>
 8     </head>
 9     <body>
10         <div id="app">
11             <ul>
12                 <li v-for="book in books">{{book.name}}</li>
13             </ul>
14         </div>
15 
16         <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
17         <script>
18             new Vue({
19                 el: "#app",
20                 data: {
21                     books: [
22                         {name: "《Vue.js實戰》"},
23                         {name: "《JavaScript 語言精粹》"},
24                         {name: "《JavaScript 高級程序設計》"}
25                     ]
26                 }
27             });
28         </script>
29     </body>
30 </html>

在瀏覽器中訪問它，會將圖書列表循環顯示出來，如圖1-2所示：

對於一些業務邏輯複雜，對前段工程有要求的項目，可使用Vue單文件的形式配合webpack使用，必要時還會用到vuex來管理狀態，vue-router來管理路由。
這裏提到了不少概念，目前還沒必要去過多瞭解，只是說明Vue.js框架的開發模式多樣化，後續會詳細介紹，到時候會對整個Vue生態有所瞭解了。

瞭解了Vue.js的開發模式後，相信你已經火燒眉毛地想開啓Vue的大門了。下一張，咱們就直接進入話題，建立第一個Vue應用。