從0開始學(xué)Vue

更新時間：2016年10月27日 09:53:35 作者：嘉寶Appian

從零開始學(xué)Vue，通過一些例子，讓大家概覽一些基本的概念和特性，理解Vue的基礎(chǔ)知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue是一個小巧輕便的JavaScript庫。它有一個簡單易懂的API，能夠讓開發(fā)者在開發(fā)web應(yīng)用的時候更加簡易便捷。實際上，一直讓Vue引以為豪的是它的便捷性、執(zhí)行力、靈活性。

這篇教程的目的就是通過一些例子，讓你能夠概覽一些基本的概念和特性。在接下來的其他教程里，你會學(xué)到Vue更多的有用的特性，從而用Vue搭建一個可擴(kuò)展的項目。

利用new Vue()創(chuàng)建一個Vue實例

我們可以先初始化一個html頁面，然后我們需要引入Vue 的 js 文件。引入的方式有很多，我們可以在script中引入Vue的cdn，或者去官網(wǎng)上下載Vue的min.js，或者用 npm 安裝一個Vue的依賴。方便起見，本文中就用cdn引入。

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

當(dāng)你在開發(fā)過程中，確保你使用的是沒有壓縮過的版本，因為沒有壓縮的版本會提供有用的詳細(xì)的警告，將會給你的代碼書寫節(jié)省很多時間。
我們先在body里面寫入一個div，并且創(chuàng)建一個Vue實例，然后將實例和div綁定起來。
當(dāng)你創(chuàng)建一個新的Vue實例的時候要使用Vue()構(gòu)造器，然后在你的實例中指出你的掛載點。這個掛載點就是你想要劃分出來的Vue實例的邊界。掛載點和實例邊界是一一對應(yīng)的，你只能在掛載點上處理你實例邊界內(nèi)的事務(wù)，而不能在你的掛載點上處理實例邊界外的事務(wù)。
在Vue實例中設(shè)置掛載點的參數(shù)是 “ el ”，el 的值可以用dom元素定義。

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

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

      <script>
         // 創(chuàng)建一個新的Vue實例，并設(shè)置掛載點
         var V = new Vue({
            el : '#vueInstance'
         });
      </script>
   </body>
</html>

就像你在上面看到的那樣，new一個Vue()就能創(chuàng)建一個新的實例，然后指定一個DOM元素作為實例的掛載點。定義掛載點的時候，我們用到了css選擇器的id來定義。實例化的名字也可以自己來定義，以便之后調(diào)用。

利用v-model進(jìn)行雙向數(shù)據(jù)綁定

我們可以用v-model對input輸入框進(jìn)行綁定，從而我們可以使用動態(tài)的獲取數(shù)據(jù)對象的值。你可以認(rèn)為v-model是一個指定的屬性，就像html元素的屬性。這里的雙向數(shù)據(jù)綁定可以用在很多表單元素上，比如input、textarea、select。
Vue利用v-model這個指令綁定了一個數(shù)據(jù)，而這個數(shù)據(jù)是我們希望能夠通過用戶輸入操作而更新的數(shù)據(jù)。
比如我們下面這個例子，我們要在input標(biāo)簽上綁定數(shù)據(jù)name，我們需要在Vue實例中的data對象中實現(xiàn)聲明。

<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這個指令，讓數(shù)據(jù)通過底層的數(shù)據(jù)流進(jìn)行綁定后直接修改。這就是數(shù)據(jù)的雙向綁定的概念。

為了證明這個概念，我們可以利用$data打印出數(shù)據(jù)的映射來看看。

<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實例觀察的數(shù)據(jù)對象，本質(zhì)類型是一個對象，所以可以轉(zhuǎn)成json?？梢杂靡粋€新的對象替換。實例代理了它的數(shù)據(jù)對象的屬性。
{{}}，利用兩個花括號進(jìn)行插值。這里插入的值是$data實時變化的值。
| json，只是一個更直觀的能讓數(shù)據(jù)展示出來的方法。也可以看做是一個過濾器，就像JSON.stringify()的效果一樣。

2中：{{ name }}，就是直接在插值表達(dá)式，兩個花括號中間插入數(shù)據(jù)變量，直接映射name的值。
Vue就是這么簡單的進(jìn)行數(shù)據(jù)的雙向綁定，只需要一個v-model指令就可以，而不需要利用js或者jq來控制數(shù)據(jù)。相信你能從上面的例子中理清邏輯。

利用v-on進(jìn)行事件綁定

Vue是利用v-on指令進(jìn)行事件監(jiān)聽和事件分發(fā)的。你可以在Vue的實例中創(chuàng)建一個方法來綁定監(jiān)聽事件，可以創(chuàng)建一個方法來分派一個點擊事件。

下面的例子中，我們將創(chuàng)建一個say方法，這個方法綁定在一個button上。點擊產(chǎn)生的效果就是彈出一個帶有用戶name的歡迎框。為了將這個方法指派給button，我們需要用v-on:click來進(jìn)行事件綁定。

<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>

當(dāng)然了，不僅是可以綁定click點擊事件，還可以綁定其他鼠標(biāo)事件，鍵盤輸入事件等一些js的事件類型。比如v-on:mouseover，v-on:keydown， v-on:submit， v-on:keypress，v-on:keyup.13等等，或者是一些其他的自定義事件。

在開發(fā)過程中，你可能會頻繁的用到事件綁定，v-on寫起來有點麻煩，所以上例中提供了兩種寫法，#2就是對#1寫法的縮寫。利用@代替v-on，這里不多說。

利用v-if或者v-show進(jìn)行條件判定

如果我們希望用戶在登錄之后才能看到歡迎彈窗，而如果沒有登錄則給它一個登錄界面。Vue會提供給我們v-if指令和v-show指令用來控制不同登錄狀態(tài)下的顯示內(nèi)容。

利用先前的例子，我們可以用loginStatus的值來控制是否登錄，如果是true則顯示輸入框和按鈕讓他能夠看到歡迎彈窗，但如果是false（即未登錄），則只能看到輸入賬號、密碼的輸入框和提交按鈕（暫時不進(jìn)行身份驗證，只改變登錄狀態(tài)）。

<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的執(zhí)行就是實例V。this的指向是一個需要自己去搞懂的問題，這里不多說。在上述例子中，只要把V-if換成v-show，一樣可以獲得等同的效果。同時v-if和v-show他們都支持v-else，但是綁定v-else命令的標(biāo)簽的前一兄弟元素必須有 v-if 或 v-show。
在上面的例子中，只要點擊“登錄”或者“退出登錄”按鈕都會觸發(fā)switchLoginStatus方法，只要觸發(fā)了這個方法就會導(dǎo)致loginStatus的狀態(tài)變化（在true和false中進(jìn)行切換），從而改變了html中的v-if的判斷條件結(jié)果的變化，基于當(dāng)前的loginStatus的布爾值的狀態(tài)，使得顯示的section是不同狀態(tài)下的section。

v-show和v-if之間有什么區(qū)別呢?
在切換 v-if 塊時，Vue有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。
這個差別也許對你目前的開發(fā)來說并不重要，但是你還是要注意和留心，因為當(dāng)你的項目開發(fā)變大的時候，這點會變得重要起來。

利用v-for輸出列表

如果你是經(jīng)營一個電商平臺的商人的話，你一定有很多頁面都需要渲染商品列表的輸出。v-for指令允許循環(huán)我們的數(shù)組對象，用 “element in arrayObj” 的方式，念作“循環(huán)arrayObj這個數(shù)據(jù)對象里的每一個element”。

下面的例子中，我們將會利用v-for指令循環(huán)輸出一個商品列表。每一個商品都會在一個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>

當(dāng)然了，data中的數(shù)組對象，可以不用像上面這樣定義也可以，我們可以從數(shù)據(jù)庫導(dǎo)入，或者是利用ajax請求得到。這里只是為了演示v-for。
有時候我們可能會需要拿到商品在數(shù)組對象里的對應(yīng)下標(biāo)。我們可以用$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

計算屬性的應(yīng)用場景，一般是在有一個變量的值需要其他變量計算得到的時候，會用到。

比如，例如用戶在輸入框輸入一個數(shù) x，則自動返回給用戶這個數(shù)的平方 x²。你需要對輸入框進(jìn)行數(shù)據(jù)綁定，然后當(dāng)數(shù)據(jù)修改的時候，就馬上計算它的平方。

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

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

計算屬性定義數(shù)值是通過定義一系列的function，就像我們先前定義methods對象的時候是一樣的。比如square方法是用來計算變量“square”的，其方法的返回值是兩個this.value的乘積。
接下來可以用computed做一個復(fù)雜一點例子。系統(tǒng)會隨機(jī)取一個1~10以內(nèi)的數(shù)字，用戶可以在輸入框隨機(jī)輸入一個1~10之內(nèi)的數(shù)字，如果剛好用戶的輸入和系統(tǒng)的隨機(jī)數(shù)剛好匹配，則游戲成功，反之失敗。

<div id="vueInstance">
     輸入1~10內(nèi)的數(shù)字: <input type="text" v-model="value">
     <p>計算結(jié)果：{{ resultMsg }}</p>
</div>

<script>
   var V = new Vue({
      el : '#vueInstance',
      data : {
         value : null,
         randNum : 5//第一次隨機(jī)數(shù)為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>

后記
到此為止，你就已經(jīng)能夠掌握了Vue的基本使用，世界上最簡潔最漂亮的框架之一，它的構(gòu)建有著自己完整的設(shè)計思想，而且越來越流行。這個框架足夠小而輕，在你的開發(fā)中會給你帶來更加流暢的用戶體驗，并有效提高開發(fā)效率。上文中舉了一系列例子，都掌握了嗎？

利用new Vue()創(chuàng)建一個新的Vue實例，并設(shè)置掛載點
利用v-model指令對表單控件進(jìn)行雙向綁定
了解 $data , {{}} , $index 在輸出數(shù)據(jù)時的用法
利用v-on進(jìn)行事件綁定，methods的用法
結(jié)合v-on，利用v-if或者v-show進(jìn)行條件判定，并了解區(qū)別
利用v-for循環(huán)輸出列表
計算屬性Computed的基本應(yīng)用

現(xiàn)在你已經(jīng)基本掌握了Vue的基礎(chǔ)。接下來你要做的就是多看看Vue的一些最新時訊，或者跟我繼續(xù)了解Vue的旅程。

github地址:https://github.com/AppianZ/Close2Vue
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: