從零開始學Vue

時間 2019-11-06

標籤開始 vue 简体版

原文原文鏈接

Vue是一個小巧輕便的JavaScript庫。它有一個簡單易懂的API，可以讓開發者在開發web應用的時候更加簡易便捷。實際上，一直讓Vue引覺得豪的是它的便捷性、執行力、靈活性。css

這篇教程的目的就是經過一些例子，讓你可以概覽一些基本的概念和特性。在接下來的其餘教程裏，你會學到Vue更多的有用的特性，從而用Vue搭建一個可擴展的項目。html

利用new Vue()建立一個Vue實例

咱們能夠先初始化一個html頁面，而後咱們須要引入Vue 的 js 文件。引入的方式有不少，咱們能夠在script中引入Vue的cdn，或者去官網上下載Vue的min.js，或者用 npm 安裝一個Vue的依賴。方便起見，本文中就用cdn引入。vue

<!DOCTYPE html>
      <html>
            <head>
                  <title>從零開始學Vue</title>
            </head>
      <body>
            <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
      </body>
</html>

當你在開發過程當中，確保你使用的是沒有壓縮過的版本，由於沒有壓縮的版本會提供有用的詳細的警告，將會給你的代碼書寫節省不少時間。git

咱們先在body裏面寫入一個div，而且建立一個Vue實例，而後將實例和div綁定起來。
當你建立一個新的Vue實例的時候要使用Vue()構造器，而後在你的實例中指出你的掛載點。這個掛載點就是你想要劃分出來的Vue實例的邊界。掛載點和實例邊界是一一對應的，你只能在掛載點上處理你實例邊界內的事務，而不能在你的掛載點上處理實例邊界外的事務。
在Vue實例中設置掛載點的參數是「 el 」，el 的值能夠用dom元素定義。github

<!DOCTYPE html>
      <html>
            <head>
                  <title>從零開始學Vue</title>
            </head>
      <body>
            <div id="vueInstance">這中間就是實例掛載點的實例邊界</div>

            <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

            <script>
                  // 建立一個新的Vue實例，並設置掛載點
                  var V = new Vue({
                        el : '#vueInstance'
                  });
            </script>
      </body>
</html>

就像你在上面看到的那樣，new一個Vue()就能建立一個新的實例，而後指定一個DOM元素做爲實例的掛載點。定義掛載點的時候，咱們用到了css選擇器的id來定義。實例化的名字也能夠本身來定義，以便以後調用。web

利用v-model進行雙向數據綁定

咱們能夠用v-model對input輸入框進行綁定，從而咱們可使用動態的獲取數據對象的值。你能夠認爲v-model是一個指定的屬性，就像html元素的屬性。這裏的雙向數據綁定能夠用在不少表單元素上，好比input、textarea、select。
Vue利用v-model這個指令綁定了一個數據，而這個數據是咱們但願可以經過用戶輸入操做而更新的數據。
好比咱們下面這個例子，咱們要在input標籤上綁定數據name，咱們須要在Vue實例中的data對象中實現聲明。ajax

<div id="vueInstance">
      輸入您的姓名: <input type="text" v-model="name">
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>//以後這行會省略
<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian'
            }
      });
</script>

不管用戶輸入多少次，這個name都會被自動更新。而且，若是name的值被改變了，其餘有映射name的地方的值也會被修改。
這種input框和映射的同步修改的緣由，就是利用v-model這個指令，讓數據經過底層的數據流進行綁定後直接修改。這就是數據的雙向綁定的概念。數據庫

爲了證實這個概念，咱們能夠利用$data打印出數據的映射來看看。npm

<div id="vueInstance">
      輸入您的姓名: <input type="text" v-model="name">
      <p>{{ $data | json }}</p> //#1
      <p>{{ name }}</p>          //#2
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian'
            }
      });
</script>

1中：
$data是Vue實例觀察的數據對象，本質類型是一個對象，因此能夠轉成json。能夠用一個新的對象替換。實例代理了它的數據對象的屬性。
{{}}，利用兩個花括號進行插值。這裏插入的值是$data實時變化的值。
| json，只是一個更直觀的能讓數據展現出來的方法。也能夠看作是一個過濾器，就像JSON.stringify()的效果同樣。json

2中：
{{ name }}，就是直接在插值表達式，兩個花括號中間插入數據變量，直接映射name的值。

Vue就是這麼簡單的進行數據的雙向綁定，只須要一個v-model指令就能夠，而不須要利用js或者jq來控制數據。相信你能從上面的例子中理清邏輯。

利用v-on進行事件綁定

Vue是利用v-on指令進行事件監聽和事件分發的。你能夠在Vue的實例中建立一個方法來綁定監聽事件，能夠建立一個方法來分派一個點擊事件。

下面的例子中，咱們將建立一個say方法，這個方法綁定在一個button上。點擊產生的效果就是彈出一個帶有用戶name的歡迎框。爲了將這個方法指派給button，咱們須要用v-on:click來進行事件綁定。

<div id="vueInstance">
      輸入您的姓名: <input type="text" v-model="name">
      <button v-on:click="say">歡迎點擊</button> //#1
      <button @click="say">歡迎點擊</button>     //#2
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian'
            },
            methods : {
                  say : function(){
                       alert('歡迎' + this.name);
                 }
            }
      });
</script>

固然了，不只是能夠綁定click點擊事件，還能夠綁定其餘鼠標事件，鍵盤輸入事件等一些js的事件類型。好比v-on:mouseover，v-on:keydown， v-on:submit， v-on:keypress，v-on:keyup.13等等，或者是一些其餘的自定義事件。

在開發過程當中，你可能會頻繁的用到事件綁定，v-on寫起來有點麻煩，因此上例中提供了兩種寫法，#2就是對#1寫法的縮寫。利用@代替v-on，這裏很少說。

利用v-if或者v-show進行條件斷定

若是咱們但願用戶在登陸以後才能看到歡迎彈窗，而若是沒有登陸則給它一個登陸界面。Vue會提供給咱們v-if指令和v-show指令用來控制不一樣登陸狀態下的顯示內容。

利用先前的例子，咱們能夠用loginStatus的值來控制是否登陸，若是是true則顯示輸入框和按鈕讓他可以看到歡迎彈窗，但若是是false（即未登陸），則只能看到輸入帳號、密碼的輸入框和提交按鈕（暫時不進行身份驗證，只改變登陸狀態）。

<div id="vueInstance">
      //loginStatus爲true時會顯示的section
     <section v-if="loginStatus">
         輸入您的姓名: <input type="text" v-model="name">
         <button v-on:click="say">歡迎點擊</button>
         <button @click="switchLoginStatus">退出登陸</button>
     </section>

      //loginStatus爲false時會顯示的section
     <section v-if="!loginStatus">
           登陸用戶: <input type="text">
           登陸密碼: <input type="password">
           <button @click="switchLoginStatus">登陸</button>
     </section>
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian',
                  loginStatus :　false
            },
            methods : {
                  say : function(){
                       alert('歡迎' + this.name);
                  },
                   switchLoginStatus : function(){
                       this.loginStatus = !this.loginStatus;
                   }
            }
      });
</script>

this的執行就是實例V。this的指向是一個須要本身去搞懂的問題，這裏很少說。
在上述例子中，只要把V-if換成v-show，同樣能夠得到等同的效果。同時v-if和v-show他們都支持v-else，可是綁定v-else命令的標籤的前一兄弟元素必須有 v-if 或 v-show。

在上面的例子中，只要點擊「登陸」或者「退出登陸」按鈕都會觸發switchLoginStatus方法，只要觸發了這個方法就會致使loginStatus的狀態變化（在true和false中進行切換），從而改變了html中的v-if的判斷條件結果的變化，基於當前的loginStatus的布爾值的狀態，使得顯示的section是不一樣狀態下的section。

v-show和v-if之間有什麼區別呢?
在切換 v-if 塊時，Vue有一個局部編譯/卸載過程，由於 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，由於它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——在條件第一次變爲真時纔開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較好，若是在運行時條件不大可能改變 v-if 較好。

這個差異也許對你目前的開發來講並不重要，可是你仍是要注意和留心，由於當你的項目開發變大的時候，這點會變得重要起來。

利用v-for輸出列表

若是你是經營一個電商平臺的商人的話，你必定有不少頁面都須要渲染商品列表的輸出。v-for指令容許循環咱們的數組對象，用「element in arrayObj」的方式，念做「循環arrayObj這個數據對象裏的每個element」。

下面的例子中，咱們將會利用v-for指令循環輸出一個商品列表。每個商品都會在一個li中，li中輸出商品的名稱、價格和商品類型。

<div id="vueInstance">
     <ul>
         <li v-for="el in products">
            {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
         </li>
     </ul>
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                   products : [
                         {name: 'microphone', price: 25, category: 'electronics'},
                         {name: 'laptop case', price: 15, category: 'accessories'},
                         {name: 'screen cleaner', price: 17, category: 'accessories'},
                         {name: 'laptop charger', price: 70, category: 'electronics'},
                         {name: 'mouse', price: 40, category: 'electronics'},
                         {name: 'earphones', price: 20, category: 'electronics'},
                         {name: 'monitor', price: 120, category: 'electronics'}
                   ]
            }
      });
</script>

固然了，data中的數組對象，能夠不用像上面這樣定義也能夠，咱們能夠從數據庫導入，或者是利用ajax請求獲得。這裏只是爲了演示v-for。

有時候咱們可能會須要拿到商品在數組對象裏的對應下標。咱們能夠用$index來得到。

//#1
<li v-for="el in products">
    {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>

//#2
<li v-for="(index,el) in products">
   {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>

計算屬性Computed

計算屬性的應用場景，通常是在有一個變量的值須要其餘變量計算獲得的時候，會用到。

好比，例如用戶在輸入框輸入一個數 x，則自動返回給用戶這個數的平方 x²。你須要對輸入框進行數據綁定，而後當數據修改的時候，就立刻計算它的平方。

<div id="vueInstance">
         輸入一個數字: <input type="text" v-model="value">
         <p>計算結果：{{ square }}</p>
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  value : 1
            },
            computed : {
                  square : function(){
                       return this.value * this.value;
                  }
            }
      });
</script>

計算屬性定義數值是經過定義一系列的function，就像咱們先前定義methods對象的時候是同樣的。好比square方法是用來計算變量「square」的，其方法的返回值是兩個this.value的乘積。

接下來能夠用computed作一個複雜一點例子。系統會隨機取一個1~10之內的數字，用戶能夠在輸入框隨機輸入一個1~10以內的數字，若是恰好用戶的輸入和系統的隨機數恰好匹配，則遊戲成功，反之失敗。

<div id="vueInstance">
         輸入1~10內的數字: <input type="text" v-model="value">
         <p>計算結果：{{ resultMsg }}</p>
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  value : null,
                  randNum : 5//第一次隨機數爲5
            },
            methods : {
                  getRandNum: function(min, max){
                      return Math.floor(Math.random() * (max - min + 1)) + min;
                  }
            },
            computed : {
                  resultMsg : function(){
                       if (this.value == this.randNum) {
                            this.randNum = this.getRandNum(1, 10);
                            return '你猜對了!';
                       } else {
                            this.randNum = this.getRandNum(1, 10);
                            return '猜錯了，再來!';
                       }
                  }
            }
      });
</script>

後記

到此爲止，你就已經可以掌握了Vue的基本使用，世界上最簡潔最漂亮的框架之一，它的構建有着本身完整的設計思想，並且愈來愈流行。這個框架足夠小而輕，在你的開發中會給你帶來更加流暢的用戶體驗，並有效提升開發效率。上文中舉了一系列例子，都掌握了嗎？

利用new Vue()建立一個新的Vue實例，並設置掛載點

利用v-model指令對錶單控件進行雙向綁定

瞭解 $data , {{}} , $index 在輸出數據時的用法

利用v-on進行事件綁定，methods的用法

結合v-on，利用v-if或者v-show進行條件斷定，並瞭解區別

利用v-for循環輸出列表

計算屬性Computed的基本應用

如今你已經基本掌握了Vue的基礎。接下來你要作的就是多看看Vue的一些最新時訊，或者跟我繼續瞭解Vue的旅程。

github地址
 https://github.com/AppianZ/Close2Vue