Vue干貨第一集:

v-for 循環(huán)

• v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名。
• v-for 可以綁定數(shù)據(jù)到數(shù)組來渲染一個列表：

                                    
        
            
                {{value}}            
        
    

• 模板中使用 v-for：

• v-for 可以通過一個對象的屬性來迭代數(shù)據(jù)：
• 
  

• v-for 也可以循環(huán)整數(shù)

  
     {{ n }}    

computed 計算屬性

  
原始字符串: {{ message }}
  
計算后反轉(zhuǎn)字符串: {{ reversedMessage }}
 

實例中聲明了一個計算屬性 reversedMessage 。
提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依賴于 vm.message，在 vm.message 發(fā)生改變時，vm.reversedMessage 也會更新。

事件處理器

• 事件監(jiān)聽可以用v-on指令：

 增加 1

• 我們需要使用一個方法來調(diào)用 JavaScript 方法，v-on 可以接收一個定義的方法來調(diào)用

 Greet methods: {    greet: function (event) {      // `this` 在方法里指當前 Vue 實例      alert('Hello ' + this.name + '!')      // `event` 是原生 DOM 事件      if (event) {          alert(event.target.tagName)      }    }  }

• 除了直接綁定到一個方法，也可以用內(nèi)聯(lián) JavaScript 語句：

Say hi methods: {    say: function (message) {      alert(message)    }  }