摘要：二起步在學習之前，需要有扎實的基礎。三核心實例每個應用都是通過構造函數創建的一個新的實例開始的選項對象在這其中的簡稱通常都表示實例的變量名。

重要說明:本文會在我有空閑時間時持續更新，相當于是將官網的示例給完全呈現，是為了幫助初學者，也是為了鞏固我自己的技術，我決定將官網給過濾一道消化，敬請期待。

vue是一種漸進式框架，被設計為自底向上逐層應用。所謂漸進式框架，我的理解就是vue是循序漸進的，一步一步的用。
舉個簡單的例子，就算我們不會webpack，不會node，但也能很快的入門。更多詳情參閱漸進式。

在學習vue之前，需要有扎實的HTML,CSS,JavaScript基礎。任何一個入門語言都離不開hello,world!例子，我們來寫這樣一個例子:
新建一個html文件，helloworld.html,如下:

  
    
    
    
    
  
  
    

      {{ message }}
    
    
  

js代碼如下:

var app = new Vue({
  el:"#app",
  data:{
    message:"hello,world!"
  }
})

現在我們已經成功創建了第一個vue應用，數據和DOM已經被關聯，所有的東西都是響應式的，我們要如何確定呢，打開瀏覽器控制臺,修改app.message的值。

在這其中data對象的寫法，我們還可以寫成函數形式，如下:

var app = new Vue({
  el:"#app",
  //這里是重點
  data(){
     return{
        message:"hello,world!"
     }
  }
})

當然除了文本插值,我們還可以綁定元素屬性，如下:

   
    
      
        
        
        
        
      
      
        

          鼠標懸浮上去可以看到
        
        
      
    
    

js代碼如下:

 var app = new Vue({
  el:"#app",
  data:{
    message:"頁面加載于:" + new Date().toLocaleString()
  }
})
   

查看效果,前往此處查看效果:
同樣的我們也可以修改message的值，這樣的話，鼠標懸浮上去，懸浮的內容就會改變了。在這個例子中v-bind(或者也可以寫成":")其實就是一個指令，指令通常前綴都帶有v-,用于表示vue指定的特殊特性，在渲染DOM的時候，它會應用特殊的響應式行為。這個指令所表達的意思就是:將這個title屬性的值與vue實例的message值保持一致。

當然，我們也可以控制一個元素的顯隱，那也是非常的簡單,只需要使用v-show指令即可:

     
        
          
            
            
            
            
          
          
            

              默認你是看不到我的哦
            
            
          
        
     

js代碼如下:

  var app = new Vue({
       el:"#app",
       data:{
          seen:false
       }
   })   

嘗試在控制臺中修改seen的值，也就是app.seen = true,然后你就可以看到頁面中的span元素了，具體示例

還有v-for指令，用于渲染一個列表，如下:

     
        
          
            
            
            
            
          
          
            

              

                {{ item.name }}
                
{{ item.content }}
              
            
            
          
        
        

js代碼如下:

   var app = new Vue({
       el:"#app",
       data:{
          list:[
            { name:"項目一",content:"HTML項目"},
            { name:"項目二",content:"CSS項目"},
            { name:"項目三",content:"JavaScript項目"},
          ]
       }
   })             
        
        

當然你也可以自己在控制臺改變list的值,具體示例

vue通過v-on + 事件屬性名(也可以寫成"@" + 事件屬性名)指令添加事件，例如v-on:click或@click如下一個示例:

       
        
          
            
            
            
            
          
          
            

              {{ message }}
              反轉信息
              
              
            
            
          
        

js代碼如下:

    var app = new Vue({
       el:"#app",
       data:{
          message:"hello,vue.js!"
       },
       methods:{
         reverseMessage:function(){
             //在這里this指向構造函數構造的vue實例
            this.message = this.message.split("").reverse().join("");
         }
       }
   }) 

反轉信息的思路就是使用split()方法將字符串轉成數組，,然后使用數組的reverse()方法將數組倒序，然后再使用join()方法將倒序后的數組轉成字符串。

你也可以嘗試在這里查看示例

組件是vue中的一個核心功能，它是一個抽象的概念，它把所有應用抽象成一個組件樹，一個組件樹就是一個預定義的vue實例，在vue中使用Vue.component()注冊一個組件，它有兩個參數，第一個參數為組件名(尤其要注意組件名的命名)，第二個參數為組件屬性配置對象,如:

//定義一個簡單的組件
Vue.component("todo-item",{
   template:`
待辦事項一
`
})

現在我們來看一個完整的例子:

js代碼如下:

 Vue.component("todo-item",{
    props:["todo"],
    template:`
{{ todo.number }}.{{ todo.text }}
`
 })
 var app = new Vue({
       el:"#app",
       data:{
          todoList:[
             { number:1,text:"html"},
             { number:2,text:"css"},
             { number:3,text:"javascript"}
          ]
       },
       methods:{
         
       }
   })
   

這樣，一個簡單的組件就完成了，在這里，我們知道了，父組件app可以通過props屬性將數據傳遞給子組件todo-item,這是vue父子組件之間的一種通信方式。
你可以嘗試在此處具體示例。

每個vue應用都是通過Vue構造函數創建的一個新的實例開始的:

var vm = new Vue({
   //選項對象
})

在這其中vm(viewModel的簡稱)通常都表示vue實例的變量名。當創建一個vue實例，你都可以傳入一個選項對象作為參數，完整的選項對象，你可能需要查看API文檔。

一個vue應用應該由一個通過new Vue構造的根實例和許多可嵌套可復用的組件構成，這也就是說所有的組件都是vue實例。

當一個vue實例被創建完成之后，就會向它的vue響應系統中加入了data對象中能找到的所有屬性，當這些屬性的值發生改變之后，視圖就會發生響應，也就是更新相應的值。我們來看一個例子:

//源數據對象
var obj = { name:"eveningwater" };
//構建實例
var vm = new Vue({
   data:obj
})

//這兩者是等價的
vm.name === obj.name;
//這也就意味著
//修改data對象里的屬性也會影響到源數據對象的屬性
vm.name = "waterXi";
obj.name;//"waterXi"
//同樣的，修改源數據對象的屬性也會影響到data對象里的屬性
obj.name = "stranger";
vm.name;//"stranger"

可能需要注意的就是，只有data對象中存在的屬性才是響應式的，換句話說，你為源數據對象添加一個屬性，根本不會影響到data對象。如:

obj.sex = "男";
vm.sex;//undefined
obj.sex;//"男"
obj.sex = "哈哈哈";
vm.sex;//undefined

這也就意味著你對sex的修改并不會讓視圖更新，如此一來，你可能需要在data對象中初始化一些值，如下:

data:{
   str:"",
   bool:false,
   arr:[],
   obj:{},
   err:null,
   num:0
}

查看此處具體示例。

只是還有一個例外Object.freeze(),這個方法就相當于鎖定（凍結）一個對象，使得我們無法修改現有屬性的特性和值，并且也無法添加新屬性。因此這會讓vue響應系統無法追蹤變化:

  
    
    
    
    
  
  
    

      {{ message }}
      反轉信息
    
    
  
  

js代碼如下:

      var obj = {
          message: "hello,vue.js!"
      }
      //阻止對象
      Object.freeze(obj);
      var app = new Vue({
        el: "#app",
        data:obj,
        methods: {
          reverseMessage: function() {
            this.message = this.message.split("").reverse().join("");
          }
        }
      });  

如此一來，無論我們怎么點擊按鈕，都不會將信息反轉，甚至頁面還會報錯。
可前往此處具體示例自行查看效果。

當然除了數據屬性以外，vue還暴露了一些有用的實例屬性和方法，它們通常都帶有$前綴，這樣做的方式是以便與用戶區分開來。來看一個示例:

js代碼:

  var obj = {
     name:"eveningwater"
  }
  var vm = new Vue({
    data:obj,
  });
  //這行代碼表示將vue實例掛載到id為app的DOM根節點上，相當于在實例的選項對象中的el選項，即
  //el:"#app"
 vm.$mount(document.querySelector("#app")) 
 //數據是相等的
 vm.$data === obj;//true
 //掛載的根節點
 vm.$el === document.querySelector("#app");//true
 //以上兩個屬性都是實例上的屬性，接下來還有一個watch即監聽方法是實例上的方法
 vm.$watch("name",function(oldValue,newValue){
   //數據原來的值
   console.log(oldValue);
   //數據最新的值
    console.log(newValue);
 })

接下來，可以嘗試在瀏覽器控制臺修改name的值,你就會發現watch()方法的作用了。
這個示例可前往具體示例。

每個vue實例在被創建的時候都會經歷一些初始化的過程，這其中提供了一些生命周期鉤子函數，這些鉤子函數代表不同的生命周期階段，這些鉤子函數的this就代表調用它的那個實例。對于生命周期，有一張圖:

你不需要立即這張圖所代表的含義，我們來看一個示例:

  
    
    
    
    
  
  
    

        vue生命周期
    
    
  

js代碼:

  var obj = {
     name:"eveningwater"
  }
  var app = new Vue({
    data:obj,
    beforeCreate:function(){
        //此時this指向app這個vue實例,但并不能得到data屬性，因此this.name的值是undefined
        console.log("實例被創建之前，此時并不能訪問實例內的任何屬性" + this.name)
    }
  });
  

關于生命周期的全部理解，我們需要理解后續的組件知識，再來補充，此處跳過。這個示例可前往具體示例

vue使用基于HTML的模板語法，在vue的底層是將綁定數據的模板渲染成虛擬DOM，并結合vue的響應式系統，從而減少操作DOM的次數，vue會計算出至少需要渲染多少個組件。

最簡單的模板語法莫過于插值了，vue使用的是Mustache語法（也就是雙大括號"{{}}"）。這個只能對文本進行插值，也就是說無論是字符串還是標簽都會被當作字符串渲染。如:

  
    
    
    
    
  
  
    

        {{ greeting }}World!
    
    
  

js代碼:

 var obj = { greeting:"Hello,"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById("app"));
 

如此以來Mustache標簽就會被data對象上的數據greeting給替代,而且我們無論怎么修改greeting的值，視圖都會響應,具體示例。

我們還可以使用v-once指令對文本進行一次性插值，換句話說，就是這個指令讓插值無法被更新:

  
    
    
    
    
  
  
    

        {{ greeting }}World!
    
    
  

js代碼:

 var obj = { greeting:"Hello,"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById("app"));

在瀏覽器控制臺中我們輸入vm.greeting="stranger!"可以看到視圖并沒有被更新，這就是這個指令的作用，我們需要注意這個指令對數據造成的影響。具體實例

既然雙大括號只能讓我插入文本，那要是我們要插入HTML代碼，我們應該怎么辦呢?v-html這個指令就可以讓我們插入真正的HTML代碼。

  
    
    
    
    
  
  
    

        
{{ message }}
        

    
    
  

js代碼:

 var obj = { message:"hello,world!"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById("app"));
 

頁面效果如圖所示;

可前往具體示例。

關于HTML特性，也就是屬性，我們需要用到v-bind指令，例如:

  
    
    
    
    
  
  
    

        
使用v-bind指令給該元素添加id屬性
    
    
  

js代碼:

 var obj = { propId:"myDiv"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById("app"));
 

打開瀏覽器控制臺，定位到該元素，我們就能看到div元素的id屬性為"myDiv",如下圖所示:

具體示例。

在綁定與元素實際作用相關的屬性，比如disabled，這個指令就被暗示為true,在默認值是false,null,undefined,""等轉換成false的數據類型時，這個指令甚至不會表現出來。如下例:

  
    
    
    
    
  
  
    

        禁用按鈕
    
    
  

js代碼:

 var obj = { isDisabled:123};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById("app"));
 

這樣一來，無論我們怎么點擊按鈕都沒用，因為123被轉換成了布爾值true，也就表示按鈕已經被禁用了，我們可以打開控制臺看到:

你可以嘗試這個示例具體示例。

在使用模板插值的時候，我們可以使用一些JavaScript表達式。如下例:

  
    
    
    
    
  
  
    

      
{{ number + 1 }}
      
{{ ok ? "確認" : "取消" }}
      
{{message.split("").reverse().join("")}}
      

        元素的id為myDiv
      
    
    
  

js代碼:

 var obj = {
    number: 123,
    ok: true,
    message: "hello,vue.js!",
    elementId: "Div",
    color: "red"
  };
  var vm = new Vue({
    data: obj
  });
  vm.$mount(document.getElementById("app"));
  

這些JavaScript表達式都會被vue實例作為JavaScript代碼解析,具體示例。

值得注意的就是有個限制，只能綁定單個表達式，像語句是無法生效的。如下例:

  
    
    
    
    
  
  
    

      
{{ var number = 1 }}
      
{{ if(ok){ return "確認"} }}
    
    
  

js代碼:

  var obj = {
    number: 123,
    ok: true
  };
  var vm = new Vue({
    data: obj
  });
  vm.$mount(document.getElementById("app")); 
  

像這樣直接使用語句是不行的，瀏覽器控制臺報錯，如下圖:

不信可以自己試試具體示例。

指令（Directives）是帶有v-前綴的特殊特性，通常指令的預期值就是單個JavaScript表達式（v-for除外）,例如v-if與v-show指令，前者表示DOM節點的插入和刪除，后者則是元素的顯隱。所以，指令的職責就是根據表達式值的改變，響應式的作用于DOM?，F在我們來看兩個示例:

  
    
    
    
    
  
  
    

      
{{ value }}
      
{{ value }}
      
{{ value }}
    
    
  

js代碼:

  var obj = {
    value: 1
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });
  

運行在瀏覽器效果如圖:

現在你可以嘗試在瀏覽器控制臺更改vm.value = 2和vm.value = 3我們就可以看到頁面的變化。你也可以狠狠點擊此處具體示例查看和編輯。

我們再看v-show的示例:

  
    
    
    
    
  
  
    

      
{{ value }}
      
{{ value }}
      
{{ value }}
    
    
  

js代碼:

var obj = {
   value:1
} 
var vm = new Vue({
    data:obj
});
vm.$mount(document.querySelector("#app"))

然后查看效果如圖:

嘗試在控制臺修改vm.value = 2和vm.value = 3我們就可以看到頁面的變化。你也可以狠狠點擊具體示例查看。

從上面兩個示例的對比，我們就可以看出來v-show與v-if指令的區別了，從切換效果來看v-if顯然不如v-show,這說明v-if有很大的切換開銷，因為每一次切換都要不停的執行刪除和插入DOM元素操作，而從渲染效果來看v-if又比v-show要好，v-show只是單純的改變元素的display屬性，而如果我們只想頁面存在一個元素之間的切換，那么v-if就比v-show要好，這也說明v-show有很大的渲染開銷。

而且v-if還可以結合v-else-if與v-else指令使用，而v-show不能，需要注意的就是v-else必須緊跟v-if或者v-else-if之后。當需要切換多個元素時,我們還可以使用template元素來包含，比如:

js代碼:

  var obj = {
    value: 1
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });
  

此時template相當于一個不可見元素，如下圖所示:

嘗試在控制臺修改vm.value = 2就可以看到效果了，你也可以狠狠的點擊此處具體示例。

對于可復用的元素，我們還可以添加一個key屬性，比如:

  
    
    
    
    
  
  
    

      
      
      
      
        toggle login type
      
    
    
  

js代碼:

      var obj = {
        loginType: "username",
        count:1
      };
      var vm = new Vue({
        el: "#app",
        data() {
          return obj;
        },
        methods: {
          changeType() {
            this.count++;
            if (this.count % 3 === 0) {
              this.loginType = "username";
            } else if (this.count % 3 === 1) {
              this.loginType = "email";
            } else {
              this.loginType = "mobile";
            }
          }
        }
      });

效果如圖:

你可以狠狠的點擊具體示例查看。

從這幾個示例我們也可以看出v-if就是惰性,只有當條件為真時,v-if才會開始渲染。值得注意的就是v-if與v-for不建議合在一起使用。來看一個示例:

  
    
    
    
    
  
  
    

        

            

                {{ item.value }}
            
        
    
    
  

js代碼:

  var obj = {
    list:[
        {
            value:"html",
            active:false
        },
        {
            value:"css",
            active:false
        },
        {
            value:"javascript",
            active:true
        }
    ]
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });
  

雖然以上代碼不會報錯，但這會造成很大的渲染開銷，因為v-for優先級高于v-if,這就造成每次執行v-if指令時總要先執行v-for遍歷一遍數據。你可以點擊此處具體示例查看。

遇到這種情況，我們可以使用計算屬性。如:

  
    
    
    
    
  
  
    

      

        

          {{ item.value }}
        
      
    
    
  

js代碼:

var obj = {
    list: [
      {
        value: "html",
        active: false
      },
      {
        value: "css",
        active: false
      },
      {
        value: "javascript",
        active: true
      }
    ]
  };
  var vm = new Vue({
    el: "#app",
    //先過濾一次數組
    computed: {
      newList: function() {
       return this.list.filter(function(item) {
          return item.active;
        });
      }
    },
    data() {
      return obj;
    }
  });      

如此一來，就減少了渲染開銷，你可以狠狠點擊這里具體示例查看。

指令的用法還遠不止如此，一些指令是可以帶參數的，比如v-bind:title,在這里title其實就是被作為參數。基本上HTML5屬性都可以被用作參數。比如圖片路徑的src屬性，再比如超鏈接的href屬性，甚至事件的添加也屬于參數，如v-on:click中的click其實就是參數。來看一個示例:

  
    
    
    
    
  
  
    

        思否
        
    
    
  

js代碼:

  var obj = {
    url: "https://segmentfault.com/",
    src:"http://eveningwater.com/project/imggallary/img/15.jpg"
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  }); 
  

效果如圖所示:

你可以點擊此處具體示例查看。

v-on指令還可以添加修飾符,v-bind與v-on指令還可以縮寫成:和@?？s寫對于我們在繁瑣的使用指令的項目當中是一個很不錯的幫助。

模板表達式提供給我們處理簡單的邏輯，對于更復雜的邏輯，我們應該使用計算屬性。來看兩個示例的對比:

  
    
    
    
    
  
  
    

      {{ message.split("").reverse().join("") }}
    
    
  
  

js代碼:

 var obj = {
   message:"hello,vue.js!"
 }
 var vm = new Vue({
     data:obj
 })
 vm.$mount(document.querySelector("#app"))

第二個示例:

  
    
    
    
    
  
  
    

      {{ reverseMessage }}
    
    
  

js代碼:

var obj = {
   message:"hello,vue.js!"
 }
 var vm = new Vue({
     data:obj,
     computed:{
         reverseMessage:function(){
            return this.message.split("").reverse().join("");
         }
     }
 })
 vm.$mount(document.querySelector("#app")) 
 
 

與第一個示例有所不同的就是在這個示例當中，我們申明了一個計算屬性reverseMessage,并且提供了一個getter函數將這個計算屬性同數據屬性message綁定在一起，也許有人會有疑問getter函數到底在哪里呢?
如果我們將以上示例修改一下:

var obj = {
   message:"hello,vue.js!"
 }
 var vm = new Vue({
     data:obj,
     computed:{
         reverseMessage:{
            get:function(){
               return this.message.split("").reverse().join("");
            }
         }
     }
 })
 vm.$mount(document.querySelector("#app"))
 

相信如此一來，就能明白了。你可以狠狠點擊此處具體示例。你可以通過控制臺修改message的值，只要message的值發生改變，那么綁定的計算屬性就會發生改變。事實上，在使用reverseMessage綁定的時候，我們還可以寫成調用方法一樣的方式，如:

  
    
    
    
    
  
  
    

      {{ reverseMessage() }}
    
    
  

js代碼:

 var obj = {
   message:"hello,vue.js!"
 }
 var vm = new Vue({
     data:obj,
     computed:{
         reverseMessage:function(){
            return this.message.split("").reverse().join("");
         }
     }
 })
 vm.$mount(document.querySelector("#app"))
 

那么這兩者有何區別呢?雖然兩者的結果都一樣，但計算屬性是根據依賴進行緩存的，只有相關依賴發生改變時它們才會重新求值。比如這里計算屬性綁定的依賴就是message屬性，一旦message屬性發生改變時，那么計算屬性就會重新求值，如果沒有改變，那么計算屬性將會緩存上一次的求值。這也意味著，如果計算屬性綁定的是方法，那么計算屬性不是響應式的。如下:

  
    
    
    
    
  
  
    

      {{ date }}
    
    
  

js代碼:

 var vm = new Vue({
     data:obj,
     computed:{
         reverseMessage:function(){
            return Date.now();
         }
     }
 })
 vm.$mount(document.querySelector("#app"))

與調用方法相比，調用方法總會在頁面重新渲染之后再次調用方法。我們為什么需要緩存，假設你要計算一個性能開銷比較大的數組，而且如果其它頁面也會依賴于這個計算屬性，如果沒有緩存，那么無論是讀取還是修改都會去多次修改它的getter函數，這并不是我們想要的。

計算屬性默認只有getter函數，讓我們來嘗試使用一下setter函數，如下:

js代碼:

   var vm = new Vue({
    el: "#app",
    data: {
      first_name: "li",
      last_name: "qiang"
    },
    computed: {
      name: {
        get: function() {
          return this.first_name + " " + this.last_name;
        },
        set: function(newValue) {
          var names = newValue.split(" ");
          this.first_name = names[0];
          this.last_name = names[names.length - 1];
        }
      }
    }
  }); 
  

現在，我們只需要修改vm.name的值就可以看到first_name和last_name的值相應的也改變了。你可以狠狠點擊此處具體示例。

雖然計算屬性在大多數情況下更合適，但有時候也可以使用偵聽器。vue通過watch選項提供一個方法來響應數據的變化。如:

  
    
    
    
    
    
    
  
  
    

       

          可以給我提出一個問題，然后我來回答?
          
       
       
{{ answer }}
       
    
    
  

js代碼:

    var vm = new Vue({
        el:"#app",
        data(){
            return{
                answer:"我不能回答你除非你提出一個問題!",
                question:"",
                answerImg:""
            }
        },
        created:function(){
           // `_.debounce` 是一個通過 Lodash 限制操作頻率的函數。
           // 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率
           // AJAX 請求直到用戶輸入完畢才會發出。想要了解更多關于
           // `_.debounce` 函數 (及其近親 `_.throttle`) 的知識，
           // 請參考：https://lodash.com/docs#debounce
           this.debounceGetAnswer = _.debounce(this.getAnswer,500);
        },
        //如果question值發生改變
        watch:{
           question:function(oldValue,newValue){
              this.answer="正在等待你停止輸入!";
              this.debounceGetAnswer();
           }
        },
        methods:{
            getAnswer:function(){
               //如果問題沒有以問號結束，則返回
               if(this.question.indexOf("?") === -1){
                 this.answer = "提出的問題需要用問號結束!";
                 return;
               }
               this.answer = "請稍等";
               var self = this;
               fetch("https://yesno.wtf/api").then(function(response){
                   //fetch發送請求,json()就是返回數據
                   response.json().then(function(data) {
                      self.answer = _.capitalize(data.answer);
                      self.answerImg = _.capitalize(data.image);
                   });
               }).catch(function(error){
                  self.answer = "回答失敗,請重新提問!";
                  console.log(error);
               })
            }
        }
    })
    

現在咱們來看一下效果:

你可以狠狠點擊此處具體示例查看。

當在頁面中有一些數據需要根據其它數據的變動而改變時，就很容易濫用偵聽器watch。這時候命令式的偵聽還不如計算屬性，請看:

  
    
    
    
    
  
  
    

       
{{ fullName }}
    
    
  

js代碼:

 var vm = new Vue({
      el:"#app",
      data:{
         firstName:"li",
         lastName:"qiang",
         fullName:"li qiang"
      },
      watch:{
         firstName:function(val){
            this.fullName = val + " " + this.lastName;
         },
         lastName:function(val){
            this.fullName = this.firstName + " " + val;
         }
      }
 })
 

再看通過計算屬性實現的:

 


  
    
    
    
    
  
  
    

       
{{ fullName }}
    
    
  

js代碼:

 var vm = new Vue({
      el:"#app",
      data:{
         firstName:"li",
         lastName:"qiang"
      },
      computed:{
         fullName:function(){
           return this.firstNmae + " " + this.lastName;
         }
      }
 })

通過計算屬性實現的功能看起來更好，不是嗎?你可以自行嘗試具體示例（watch）與具體示例（computed）進行對比。

操作元素的class和style是構建一個頁面所常見的需求,因為它們都是屬性，所以利用v-bind指令就可以操作元素的class和style樣式。如；

    
    
    
     
     
    
    


    

        添加一個class類，改變字體顏色為紅色。
    
    

js代碼如下；

var vm = new Vue({
    el:"#app",
    data:{
        className:"font-red"
    }
})

你可以狠狠點擊此處具體示例 查看。

再來看一個簡單綁定style的示例。

    
    
    
     
     
    


    

        改變元素的字體顏色為紅色。
    
    

js代碼:

var vm = new Vue({
    el:"#app",
    data:{
        styleProp:"color:#f00;"
    }
})

你可以狠狠點擊此處具體示例查看。

這只是class與style的簡單用法，vue.js專門在這方面做了增強，使得綁定class和style 的值可以是對象，也可以是數組，如:

    
    
    
    
    
    


    

        改變字體的顏色
    
    

  

js代碼:

  var vm = new Vue({
      el:"#app",
      data:{
          isRed:true,
          isBlue:false
      }
  })
  

我們可以看到頁面效果如圖:

你還可以通過控制臺修改vm.isBlue或vm.isRed的值，這充分說明這兩個值是響應式的。如:

你可以狠狠的點擊此處具體示例查看。

同樣的,style一樣也可以使用對象語法，如:

  
    
    
    
    
    
  
  
    

      字體大小為18px,字體顏色為紅色,并且加粗的字體。
    
    
  

js代碼:

  var vm = new Vue({
    el: "#app",
    data: {
      fontColor: "#f00",
      font18: "18px",
      fontBold:"bold"
    }
  });
  

效果如圖:

我們一樣可以修改其中的值，這些值也是響應式的，比如修改vm.fontColor="#0f0"就表示將字體顏色改變為藍色。從上例我們也可以看出，我們可以使用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，需要用單引號括起來)來定義css屬性名。
你可以狠狠點擊此處具體示例查看。

當然在更多時候，我們直接綁定一個對象更有利于讓模板變得清晰，也方便我們理解。

  
    
    
    
    
    
  
  
    

      字體大小為18px,字體顏色為紅色,并且加粗的字體。
    
    
  

js代碼:

  var vm = new Vue({
    el: "#app",
    data: {
        styleObject:{
           fontSize:"18px",
           color:"#f00",
           "font-weight":"bold"
        }
    }
  });  
  

這也是一樣的效果，你可以點擊此處具體示例查看。

除了對象語法，數組語法也同樣適用于class和style,如:

  
    
    
    
    
    
    
  
  
    

      顏色為紅色大小為18px的字體
    
    
  

js代碼:

  var vm = new Vue({
    el: "#app",
    data: {
      fontColor: "font-red",
      fontSize: "font-18"
    }
  });
  

運行效果如圖:

你同樣可以修改class的名字，諸如vm.fontColor="font-blue",這樣頁面就會將font-red更改為font-blue,這畢竟是響應式的。你可以狠狠點擊此處具體示例查看。

同樣的,style也能如此做，如:

  
    
    
    
    
    
  
  
    

      顏色為紅色大小為18px的字體
    
    
  

js代碼:

 var vm = new Vue({
    el: "#app",
    data: {
        colorF: {
            color:"#f00"
        },
        sizeF: {
            fontSize:"18px"
        }
    }
  });

這里尤其注意如下的寫法是錯誤的，vue.js并不能渲染出樣式:

  //這說明style綁定的數組項只能是一個對象，而不能是字符串
 var vm = new Vue({
    el: "#app",
    data: {
        colorF: "color:#f00;",
        sizeF: "font-size:18px;"
    }
  });

同樣，我們注意修改值的時候也應該修改成一個對象，如:

vm.sizeF = {
   "font-size":"20px"
}

這點是需要注意的，另外在遇到帶有前綴的css屬性，如transition時，我們不必寫前綴，因為vue會自動幫我們添加前綴。你可以狠狠點擊此處具體示例查看。

style的用法還不止如此，我們還可以綁定多重值。如下:

  
    
    
    
    
    
  
  
    

      顏色為紅色大小為18px的字體
    
    
  

js代碼:

 var vm = new Vue({
    el: "#app",
    data: {
        webkitD:"-webkit-flex",
        nomarD:"flex"
    }
  });
  

這樣一來，瀏覽器會根據支持-webkit-flex或flex而采用支持的寫法，這個是在vue2.3.0+版本中增加的功能。你可以點擊此處具體示例查看。

v-if指令用于條件性的渲染一塊內容，這個指令只在它綁定的值為truthy的時候才會渲染內容。例如:

  
    
    
    
    
  
  
    

        
正常顯示
        不顯示
        
也是正常顯示
        也是不顯示
    
    
  

你可以狠狠點擊此處具體示例查看效果。

v-if指令也可以與v-else指令結合使用，注意v-else必須緊跟v-if或者v-else-if之后。比如:

  
    
    
    
    
  
  
    

        
正常顯示
        不顯示
        
也是正常顯示
        也是不顯示
    
    
  

你可以狠狠點擊此處具體示例查看效果。

v-if也可以直接在標簽上使用,這種情況下，我們通常是為了切換多個元素，因為v-if必須添加到一個元素上，而且會把template當作不可見元素來渲染，也就是說最終渲染不會包含template元素。比如:

你可以狠狠點擊此處具體示例查看效果。

在vue2.1.0新增了v-else-if，顧名思義，也就是緊跟v-if之后，v-else之前的指令，可以使用多個v-else-if指令。比如:

  
    
    
    
    
  
  
    

        
哈哈哈
        嘿嘿嘿
        
嘻嘻嘻
        
呵呵呵
    
    
  

你可以狠狠點擊此處具體示例查看效果。在這些示例中，只要綁定的是在vue實例data選項中的數據，那么值就是響應式的，我們可以直接在控制臺中修改，比如以上的vm.type = 1，我們就可以看到頁面的的元素以及內容被改變，并重新渲染。

由于vue是簡單的復用元素，而不是重新渲染元素，因此，這會讓vue非常的高效，但這不可避免出現了一個問題，如下:

    
    
    
    



    

        
        
        
        切換
    
    

你可以狠狠點擊此處具體示例查看效果。在輸入框中輸入值，然后再點擊切換按鈕，你會發現input的內容并沒有被清空，這也說明vue并不是重新渲染元素，而是高效的復用元素而已。再實際開發中，這樣肯定是不符合需求的，那么我們應該如何解決這個問題呢？

還好，vue提供了一個key屬性，我們只需要給每個復用的元素綁定一個key屬性，用于區分它們是不同的元素。如下:

    
    
    
    



    

        
        
        
        切換
    
    

現在你再嘗試在輸入框中輸入值，然后點擊切換按鈕，就會發現值會被清空了。請點擊具體示例查看效果。

需要注意的是label元素其實也是被復用了，因為它們沒有添加key屬性。

v-show的指令用法跟v-if差不多，唯一需要注意的區別就是v-show僅僅只是改變了元素的display屬性而已，其DOM元素仍然存在于文檔中,