猿创征文 | 一个大四学长分享自己的web前端学习路线--vue篇（1/3）

1.6 v-for属性

学会什么是v-for循环属性，还要注意的是在使用v-for属性的时候要，key需要和业务相关的id,不可以随意的写。

    <div id="app">
<p>遍历数组p>
<ul>
    <li v-for="{ite,index} in listarr" :key="item.id">
        {{index}}--{{itemid}}--{{item.title}}
    li>
ul>
 
<p>遍历对象p>
<ul>
    <li v-for="(val,key,index) in list1" :key="key">
        {{index}}--{{key}}--{{val.title}}
    li>
ul>
    div>
 
    export default{
        data(){
            return {
                listarr:{
                    { id:'a',title:'主题一'},
                    { id:'b',title:'主题二'},
                },
                listobj:{
                    a:{title:'主题一'},
                    b:{title:'主题二'},
                }
            }
        }
    }

1.7 事件 event参数

  学会什么是event事件参数，注意：如果函数不需要传递参数的话可以直接在定义直接在定义的时候获取event。如果需要传递参数就需要通过￥event带引用过来。event的构造函数是MouseEvent，target是时间监听的地方也是时间挂载的地方，currentTarget是时间触发的地方。

    <div id="app">
<p>{{num}}p>
<button @click="increnent1">加一button>
<button @click="increnent2(2,$event)">加二button>
    div>
 

2.3 剩下的工具（统一放在一起）

突然发现剩下的组件一个个写的话，文章太长了，才想起这是个归纳思维导图的，没必要全部一一写下来，大家用到什么就去学什么就好了，学习是自己的。

• to 配置选项
• push 配置选项
• history 配置选项
• hash 配置选项