日常学习之Vue小demo

这两天跟着很久以前收藏的几个视频，（视频是以前入职的时候，前辈发给我的新人培训资料）还有Vue.JS权威指南一书学习。现在就来实现一个简单的增、删、查的小练习吧。代码中，如果有理解错误的地方，欢迎大家指正，我会虚心学习，愿和大家一起进步。
正文
之前做的项目，有很多类似的页面，找不到原型图了，我就先手动画一个比较潦草的图吧。这个练习的需求是完成喜爱物品的添加、删除和查询功能。
代码示例：

<div id="app">
    <div class="panel panel-primary">
      <div class="panel-body form-inline addArea">
        <label>它的编号：
          <input type="text" class="form-control" v-model="id">
        label>
        <label>它的名字：
          <input type="text" class="form-control" v-model="name">
        label>
        <input type="button" value="添加" class="btn btn-primary">
      div>
    div>
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>它的编号th>
          <th>它的名字th>
          <th>添加时间th>
          <th>操作th>
        tr>
      thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}td>
          <td v-text="item.name">td>
          <td>{{item.time}}td>
          <td>
            <a href="">狠心删除a>
          td>
        tr>
      tbody>
    table>
  div>

 var vm = new Vue({
    el: '#app',
    data: {
      id: '',
      name: '',
      list: [
        { id: 1, name: "某克钢笔", time: new Date() },
        { id: 2, name: "某红书APP", time: new Date() },
        { id: 3, name: "小龙虾", time: new Date() },
        { id: 4, name: "某抑郁音乐", time: new Date() }
      ]
    },
  })

注意：1、样式上使用了bootstrap，需引入。2、数据是写死的。
页面结构效果：

1、新增操作：
步骤解析：
① 给按钮绑定点击事件。
② 获取id和name。在data中已经定义，可以直接从data中获取。
③ 新建一个对象，并把这个对象添加到当前的list中。
代码示例：

<input type="button" value="添加" class="btn btn-primary" @click="add()">

methods: {
      add() { // 添加方法
        var loveAPP = {id: this.id, name: this.name,time: new Date() };
        this.list.push(loveAPP);
        // 添加完成后，将input的值清空
        this.id = this.name = '';
      }
    }

页面效果展示：

此时，第五条数据，可以手动添加成功了。

2、删除操作：
步骤解析：
① 给按钮绑定点击事件。
② 因为是假数据，所以根据索引删除最合适，需要找到要对应的索引。
③ 调用数组的splice()方法。
代码示例：

<a href="" @click.prevent="del(item.id)">狠心删除a>

 del(id) { // 根据索引删除数据。
      
        this.list.some((item, i)=>{
          if(item.id===id) {
            // 如果遍历的id等于我们传入的id，那么停止遍历。
            this.list.splice(i, 1);
            return true;
          }
        })
      }

还有一种更简便的方法实现删除功能：
代码示例：

del(id) { // findIndex()方法可以直接找到数组的索引
      var index = this.list.findIndex(item => {
        if(item.id==id) {
          return true;
        }
      })
      console.log(index)
      this.list.splice(index, 1);
      }

3、查询方法：
步骤解析：
① 定义一个keywords，用keywords进行查找。
② 搜索包含keywords的数据，将这些数据组成新的数组。
③ 返回新的数组。
代码示例：

 
<label>搜索： 
    <input type="text" class="form-control" v-model="keywords">
label>

<tbody>

   <tr v-for="item in search(keywords)" :key="item.id">
      <td>{{item.id}}td>
      <td v-text="item.name">td>
      <td>{{item.time}}td>
      <td>
       <a href="" @click.prevent="del(item.id)">狠心删除a>
      td>
   tr>
tbody>

search(keywords) {
		// 创建一个新的数组
        var newList = [];
        this.list.forEach(item => {
          if(item.name.indexOf(keywords) != -1) {
          // 将包含keywords的数据添加到新的数组里。
            newList.push(item)
          }
        });
        return newList;
      }

页面效果：

今天的练习到这就算基本完成了，希望可以帮到需要帮助的人，谢谢你们的浏览。