vue快速入门4

列表渲染

for

用v-for 把一个数组映射为一组元素

我们可以用v-for 指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，其中items 是源数据数组，而item 则是被迭代的数组元素的别名。

<ul>
      <li v-for="item in values" :key="item.id">{{  item.name }}</li>
</ul>

data(){

    return{

      flag:false,

      flag2:false,

      values:[

        {

          id:'1',

          name:'小明'

        },

        {

          id:'2',

          name:'小红'

        },

        {

          id:'3',

          name:'小王'

        }

      ]

    }

  }

v-for使用时，给标签增加 :key 属性。 该属性可以根据唯一id来判断列表是否有元素变化，变化时只更新这个变化的元素以此来提升性能。

 

监听事件

我们可以使用v-on指令（缩写@)来监听dom事件，并且在触发事件时执行一些javascript，这些事件的名称就是javascript的事件名称

<button @click="count++"> {{ count }}</button>
v-on:click=""

事件处理方法

v-on 事件名 绑定一个方法

<button @click="method01()"> {{ count }}</button>
<script>

methods:{

    method01(event){

      ++this.count

　　　　event.target.innerHTML = '点击之后'

    }

  }

</script>

 

在事件中，读取data中的属性，是需要通过 this.属性 来读取

在每个事件中都有一个event对象。event是dom原生的event

内敛处理器中的方法

这是官方的城府，其实可以叫他“事件传递参数”

写的方法，可以传递参数。

 

ok。总结一下。①列表渲染，通过v-for 指令来遍历数组，并展示数组的每个元素。 使用v-for 需要绑定一个 key属性。  :key="item.id", 也可以为了省事，把数组下标绑定到key。

v-for="(item,index) in items" :key="index"

②通过通过v-on 指令监听dom事件，事件名为js事件名。如点击、双击、鼠标悬停、获得焦点、失去焦点。监听事件可以直接写表达式，可以写方法。方法可以传递参数。方法有一个dom自带的对象event 。event.target可以获取v-on绑定的dom元素。从而操作该元素。