摘要：改變其中的任何一層，另外一層都會(huì)改變。插值相信你也注意到了，通過的形式就能取到的值，并與進(jìn)行綁定。中改變中的值時(shí)相應(yīng)也改變了中的，從而也得到改變。上面的代碼改為這樣則不會(huì)隨著數(shù)據(jù)的改變而更新。顧名思義，用于條件判斷，和是一對(duì)。

什么是Vue.js

vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。作者是尤雨溪,寫下這篇文章時(shí)vue.js版本為1.0.7

準(zhǔn)備

我推薦使用sublime text作為編輯器，關(guān)于這個(gè)編輯器可以看我這篇文章。在package control中安裝

Vuejs Snippets

Vue Syntax Highlight

推薦使用npm管理,新建兩個(gè)文件app.html,app.js,為了美觀使用bootstrap，我們的頁面模板看起來是這樣:

    
    
    



    

        

            
Vue demo
            

            .......
            
        
    

安裝

使用npm安裝：

npm install vue

當(dāng)然你也可以在github上clone最新的版本并作為單文件引入，或者使用CDN:

http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js
http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js

HelloWorld

動(dòng)手寫第一個(gè)Vue.js 應(yīng)用吧。
app.html:

    
{{message}}
    

app.js:

new Vue({
    el:"#app",
    data: {
        message:"hello vue.js."
    }
});

創(chuàng)建Vue實(shí)例

在使用Vue.js之前，我們需要先像這樣實(shí)例化一個(gè)Vue對(duì)象：

new Vue({
   el:"#app"
});

雙向數(shù)據(jù)綁定

就像HelloWorld展示的那樣，app.html是view層，app.js是model層，通過vue.js（使用v-model這個(gè)指令）完成中間的底層邏輯，實(shí)現(xiàn)綁定的效果。改變其中的任何一層，另外一層都會(huì)改變。

插值

相信你也注意到了，通過{{value}}的形式就能取到value的值，并與value進(jìn)行綁定。HelloWorld中改變input中的值時(shí)相應(yīng)也改變了app.js中的message，從而{{message}}也得到改變。上面的代碼改為這樣：

{{*message}}

則message不會(huì)隨著數(shù)據(jù)的改變而更新。同時(shí)還支持一些簡單的表達(dá)式：

{{message + "vue is awesome"}}
{{ message.split("").reverse().join("") }}

常用的指令 v-model

v-model可用于一些表單元素,常見的input,checkbox,radio,select:

  A
  B
  C



Selected: {{ selected | json }}

v-for

列表渲染在實(shí)際開發(fā)中非常常見，vue.js使用v-for這個(gè)指令就能完成，v-for取代了1.0以前版本中的v-repeat。在app.js中準(zhǔn)備一些數(shù)據(jù):

new Vue({
        el: "#app",
        data: {
            book: {
                id: 0,
                author: "",
                name: "",
                price: ""
            },
            books: [{
                id: 1,
                author: "曹雪芹",
                name: "紅樓夢",
                price: 32.0
            }, {
                id: 2,
                author: "施耐庵",
                name: "水滸傳",
                price: 30.0
            }, {
                id: "3",
                author: "羅貫中",
                name: "三國演義",
                price: 24.0
            }, {
                id: 4,
                author: "吳承恩",
                name: "西游記",
                price: 20.0
            }]
        }
 })

在data里我們設(shè)置了兩個(gè)數(shù)據(jù)book和book[] books，在app.html中我們只要這樣就能獲取到數(shù)據(jù)了:

 
   {{book.id}}
   {{book.name}}
   {{book.author}}
   {{book.price}}

如果你比較細(xì)心的話，在數(shù)據(jù)還未加載完時(shí)是會(huì)有閃爍的情況出現(xiàn)，解決方法也很簡單，使用v-cloak,然后定義css:

 [v-cloak] { display: none }

v-on

vue.js通過v-on完成事件處理與綁定，比如為一個(gè)button綁定click事件，我們就可以這么寫:

doSomething

也可以縮寫:

doSomething

我們需要為v-on傳入事件參數(shù),然后在vue的實(shí)例中聲明doSomething這個(gè)方法就可以調(diào)用了:

new Vue({
  el: "#app",
  methods: {
    doSomething: function () {
      /...../
    }
  }
})

接著上面書的例子，我們用v-model綁定form：

   

     
添加書籍
     

           書名
           
     
     

            作者
            
     
     

              價(jià)格
              
      
      添加
    

在app.js中增加我們的addBook方法:

 methods: {
        addBook: function() {
            //計(jì)算書的id
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            //將input中的數(shù)據(jù)重置
            this.book = "";
        }
    }
    

我們再健全一下功能，增加一個(gè)刪除按鈕:

刪除

delBook方法：

  delBook:function(book){
       this.books.$remove(book);
  }

vue.js為數(shù)組擴(kuò)展了$remove方法，查找并刪除我們作為參數(shù)傳遞過去的book。

v-if/v-else/v-show

顧名思義，v-if用于條件判斷，和v-else是一對(duì)。用法也很簡單，下面的代碼是將id為偶數(shù)的操作按鈕換個(gè)樣式:

這里用到了