vue实战--指令的使用

启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

即上文vue指令学习了有关于指令的概念，本文将从案例入手，更深入学习指令的使用。

案例

目的：为了熟练使用之前学习过的指令

功能：

• 数据展示

  • 引入js文件

  • 创建vm实例

  • 模拟临时数据--对象数据

    data:{
        // 1.模拟数据--对象数组
        arr:[
            {
                id:1,
                name:'QQ',
                time:new Date()
            },
            {
                id:2,
                name:'BYD',
                time:new Date()
            }
        ]
    }
    

  • 使用v-for生成动态结构

    <tr v-for='(value,index) in arr' :key='index'>
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.time}}</td>
        <td>
            <a href="#">删除</a>
        </td>
    </tr>
    

• 数据添加

  • 以前：获取dom数据，生成对象添加到数组，刷新

  • 现在：设置v-model, 添加数据到数组

  • 实现过程

    • 定义数据对象，里面包含三个值(id,name,time)

      newcar:{
          id:'',
          name:'',
          time:new Date()
      }
      

    • 实现双向数据绑定，后期用户输入值之后，我们可以在代码直接获取

      <div class="add">
          编号:<input type="text" v-model='newcar.id'> 
          品牌名称:<input type="text" v-model='newcar.name'>
          <input type="button" value="添加">
      </div>
      

    • 为“添加”绑定单击事件：@click='add'

      • 将数据添加到数组

      • 我们不用刷新：数据变化页面就会自动的变化

         add(){
             // 如下代码所产生的问题：
             // this.newcar自始至终只有一个，意味着页面中的和当前代码中的添加的是同一个
             // 对象的本质是引用地址，意味着页面结构中的对象和代码是的对象是指向同一个空间，修改其中一个另外一个也会变化
             // this.arr.push(this.newcar)
        ​
             // 深拷贝：拷贝是里面的成员的值
             // 浅拷贝：拷贝是引用地址
             // this.arr.push({id:this.newcar.id,name:this.newcar.name,time:this.newcar.time})
             // 展开运算符
             this.arr.push({...this.newcar})
         }
        

• 数据删除

  • 绑定事件，传递当前数据的索引

    <td>
        <a href="#" @click.prevent='del(index)'>删除</a>
    </td>
    

  • 数组可以使用arr.splice来删除

     // 删除
    del(index){
        this.arr.splice(index,1)
    }
    

  • 能够添加一个提示，如果没有数据，则进行没有数据的提示

    <tr v-show='arr.length == 0'>
        <td colspan="4">没有任何数据，请先添加</td>
    </tr>