Vue day2(01)

前一天晚上和某人打赌，说要一天学下day2的内容，于是下定决心搞了起来（不是
关于今天的内容先做一个简单的回顾：
1.一个 带有增、查、删、改的列表html
2.过滤器的基本使用
3.一些关于vue的生命周期函数

一个 带有增、查、删、改的列表html

• 在head里面link进来一个bootstraps的包用于插入这个表格
• bootstraps包是一个全新的内容，就不展开详细了解了
  <link rel="stylesheet" href="../code/lib/bootstrap.css">
• 首先是这个表头区域，功能如图（增、查）
  

<div class="panel panel-primary">
    <!-- 添加品牌的div标签 -->
	<!-- 输入  id 和  name 以及   btn   的div标签 -->
     <div class="panel-body form-inline form-control">
          <label for="">
               id:
               <input type="text"  v-model="id" class="form-control">
          </label>
          <label for="">
                name:
                <input type="text" v-model="name" class="form-control">
           </label>
           <input type="button" value="添加" class="btn btn-primay" @click="add()">
           <label for="">搜索名称关键字：
               <input type="text" class="form-control" v-model="keywords"> 
           </label>
     </div>
 </div>

• 首先说一下 add这个btn方法
  • 首先v-bind : click = add() 添加一个叫做add的方法添加到Vue实例里的methods里面
  • 下面分析这个add方法：
  1. 我们知道是一个对象数组,add方法实在数据里面添加新的对象进去，所以我们需要新建一个对象
  2. 我们通过v-model来获得用户从页面输入的数据并赋值给我们新建的数组
  3. 我们调用**对象.push()**添加到我们的data数据里面，Vue实现了数据动态改变不需要我们重新渲染新加进来的数据，极其的方便
  4. 再把我们新创建的数组的属性赋值为空，方便下一个数据的输入

                add() { //添加的方法
                    // console.log("132")
                    // 分析：
                    // 1.id和name直接在data上面获取
                    // 2.建立一个新的list对象
                    // 3.把这个新建立的对象 利用数组操作 增加到data里面的数据中来
                    // 4.在Vue中，数据是双向绑定的，我们修改了data上的数据，会被自动同步到页面上，不需要重新渲染新出现的dom元素
                    // 5.我们更多的是进行Vm 中Model数据的操作，在操作Model数据的时候会涉及额一些业务逻辑

                    var car = {
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    }
                    this.list.push(car)
                    this.id = ''
                    this.name = ''
                }

* 下面分析这个search(keyword)方法
1 . 通过关键字获得我们的数据
2 . 通过遍历数组  **if**  判断我们的数据是否包含 **keyword**，如果返回值为	true 我们就直接return这个对象数组  
这里涉及数组的遍历以及箭头函数的使用：

                search(keywords) { //根据关键字查找数组
                    // // return this.list
                    // var newList = []
                    // this.list.forEach(item => {
                    //     if (item.name.indexOf(keywords) != -1) {
                    //         newList.push(item)
                    //     }
                    // })
                    // return newList


                    // 注意：  some forEach  filter findIndex 这些都属于数组的新方法
                    // 都会对数组的每一项进行遍历 执行相关操作


                    //在es6中  为字符串提供了一个新方法  叫做  String.prototype.includes("要包含的字符串")

                    //如果包含，返回true  反之  faluse
                    var newList = []

                    return this.list.filter(item => {
                        // if(item.name.indexOf(keywords) != -1)
                        if (item.name.includes(keywords)) {
                            return item
                        }
                    })

                }

1. list.forEach(item)遍历数组
2. list.filter(item)遍历数组

下面是删除btn

蓝色删除键

del(id) { //根据id删除数据
                    // this.list.some((item, i) => {
                    //     if (item.id == id) {
                    //         this.list.splice(i, 1)
                    //         return true
                    //     }
                    // })
                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true
                        }
                    })
                    this.list.splice(index, 1)
                },

这里有几个新学的方法

1. list.some(item,i)遍历数组的新的方法:item是每一项，i是索引值
2. splice(i,数字)删除某些固定对象，i代表索引值，数字代表删掉索引值后几个
3. findIndex(item)遍历数组，中间穿插着箭头函数