【vue干货1】循环,计算属性,事件处理器

Vue干货第一集:

v-for 循环

• v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
• v-for 可以绑定数据到数组来渲染一个列表：

    
    
    
    
    
    
    
    


    

        

            

                {{value}}
            
        
    

• 模板中使用 v-for：

• v-for 可以通过一个对象的属性来迭代数据：

    {{ value }}
 

    {{ key }} : {{ value }}

 

     {{ index }}. {{ key }} : {{ value }}
 

• v-for 也可以循环整数

  

     {{ n }}
    

computed 计算属性

  
原始字符串: {{ message }}
  
计算后反转字符串: {{ reversedMessage }}

 

实例中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

事件处理器

• 事件监听可以用v-on指令：

 增加 1

• 我们需要使用一个方法来调用 JavaScript 方法，v-on 可以接收一个定义的方法来调用

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

• 除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

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