從0開(kāi)始學(xué)Vue

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

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

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

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

利用new Vue()創(chuàng)建一個(gè)Vue實(shí)例

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

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

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

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

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

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

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

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

我們可以用v-model對(duì)input輸入框進(jìn)行綁定，從而我們可以使用動(dòng)態(tài)的獲取數(shù)據(jù)對(duì)象的值。你可以認(rèn)為v-model是一個(gè)指定的屬性，就像html元素的屬性。這里的雙向數(shù)據(jù)綁定可以用在很多表單元素上，比如input、textarea、select。
Vue利用v-model這個(gè)指令綁定了一個(gè)數(shù)據(jù)，而這個(gè)數(shù)據(jù)是我們希望能夠通過(guò)用戶輸入操作而更新的數(shù)據(jù)。
比如我們下面這個(gè)例子，我們要在input標(biāo)簽上綁定數(shù)據(jù)name，我們需要在Vue實(shí)例中的data對(duì)象中實(shí)現(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>//之后這行會(huì)省略
<script>
   var V = new Vue({
      el : '#vueInstance',
      data : {
         name : '_Appian'
      }
   });
</script>

無(wú)論用戶輸入多少次，這個(gè)name都會(huì)被自動(dòng)更新。并且，如果name的值被改變了，其他有映射name的地方的值也會(huì)被修改。這種input框和映射的同步修改的原因，就是利用v-model這個(gè)指令，讓數(shù)據(jù)通過(guò)底層的數(shù)據(jù)流進(jìn)行綁定后直接修改。這就是數(shù)據(jù)的雙向綁定的概念。

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

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

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

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

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

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

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

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

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

在開(kāi)發(fā)過(guò)程中，你可能會(huì)頻繁的用到事件綁定，v-on寫(xiě)起來(lái)有點(diǎn)麻煩，所以上例中提供了兩種寫(xiě)法，#2就是對(duì)#1寫(xiě)法的縮寫(xiě)。利用@代替v-on，這里不多說(shuō)。

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

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

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

<div id="vueInstance">
   //loginStatus為true時(shí)會(huì)顯示的section
   <section v-if="loginStatus">
     輸入您的姓名: <input type="text" v-model="name">
     <button v-on:click="say">歡迎點(diǎn)擊</button>
     <button @click="switchLoginStatus">退出登錄</button>
   </section>

   //loginStatus為false時(shí)會(huì)顯示的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í)行就是實(shí)例V。this的指向是一個(gè)需要自己去搞懂的問(wèn)題，這里不多說(shuō)。在上述例子中，只要把V-if換成v-show，一樣可以獲得等同的效果。同時(shí)v-if和v-show他們都支持v-else，但是綁定v-else命令的標(biāo)簽的前一兄弟元素必須有 v-if 或 v-show。
在上面的例子中，只要點(diǎn)擊“登錄”或者“退出登錄”按鈕都會(huì)觸發(fā)switchLoginStatus方法，只要觸發(fā)了這個(gè)方法就會(huì)導(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 塊時(shí)，Vue有一個(gè)局部編譯/卸載過(guò)程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯（編譯會(huì)被緩存起來(lái)）。
相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。
一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。
這個(gè)差別也許對(duì)你目前的開(kāi)發(fā)來(lái)說(shuō)并不重要，但是你還是要注意和留心，因?yàn)楫?dāng)你的項(xiàng)目開(kāi)發(fā)變大的時(shí)候，這點(diǎn)會(huì)變得重要起來(lái)。

利用v-for輸出列表

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

下面的例子中，我們將會(huì)利用v-for指令循環(huán)輸出一個(gè)商品列表。每一個(gè)商品都會(huì)在一個(gè)li中，li中輸出商品的名稱、價(jià)格和商品類型。

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

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

計(jì)算屬性Computed

計(jì)算屬性的應(yīng)用場(chǎng)景，一般是在有一個(gè)變量的值需要其他變量計(jì)算得到的時(shí)候，會(huì)用到。

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

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

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

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

<div id="vueInstance">
     輸入1~10內(nèi)的數(shù)字: <input type="text" v-model="value">
     <p>計(jì)算結(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 '你猜對(duì)了!';
            } else {
              this.randNum = this.getRandNum(1, 10);
              return '猜錯(cuò)了，再來(lái)!';
            }
         }
      }
   });
</script>

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

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

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

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

您可能感興趣的文章: