前端框架Vue学习05——品牌小demo

预计完成功能增加，删除，搜索。
效果展示：

1、准备
整个demo的布局使用bootstrap-3.3.7中的css样式。下载之后在head标签中进行引用，切记路径要找到bootstrap中的css文件。

<link rel="stylesheet" href="./lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">

然后在vs-code下载一个插件Bootstrap 3 Snnippets，可以用此插件以快捷键的方式输出我们需要的表格。定义一个bs3-table的表格。

填写列名

填写假数据，渲染表格，将将model中的数据渲染到view上


2、增加功能
先做一个表头

form-inline可以上div的表单元素只占一行。接下来

所以这里的id和name要用到双向数据绑定v-model。
开始写添加方法add().先和老师分析一下

具体代码是

add(){
     //document.write("test") 
      var car = { id:this.id, name:this.name,ctime:new Date()}
      this.list.push(car)
      //添加完后id和name置空
      this.id = this.name = ''
 },

添加完置空是在填写id和name后，点击添加方法后，id和name的输入框里便不会有添加时的数据了，算是一个优化，具体可以试一下。
3、删除
这里提供两种删除方法，首先第一种是利用some()函数。

引用菜鸟网的解释：

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
语法：array.some(function(currentValue,index,arr),thisValue)
参数说明：
function(currentValue, index,arr)，必须。函数，数组中的每个元素都会执行这个函数
函数参数:
currentValue 必须，当前元素的值
index 可选，当前元素的索引值
arr 可选，当前元素属于的数组对象

thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”
所以首先进行定义声明

<td>
       <!-- 阻止默认行为，使用prevent事件修饰符 -->
       <a href="" @click.prevent="del(item.id)">删除</a>
</td>

事件修饰符，可以更改一些行为，比如a标签有点击后刷新的默认行为，使用prevent可以阻止a标签的默认刷新，防止删除后页面刷新出删除的数据。事件修饰符还有：

.stop 阻止冒泡

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次
然后在methods里面进行定义

del(id){ //形参是点击事件的对象id
this.list.some((item,i)=>{//调用some方法，对list中对象进行遍历
      if(item.id == id){//如果点击事件的id和list中的id一致
      this.list.splice(i,1)//删除该对象的索引
      return true;
      }
})
}

第二种删除方法：

var index = this.list.findIndex(item =>{
        if(item.id == id){
        return true;
         }
     })
//console.log(index) 
this.list.splice(index,1)
},

findIndex()为数组中的每个元素都调用一次函数执行，返回符合条件的数组的第一个元素位置。详情请移步：https://www.runoob.com/jsref/jsref-findindex.html
4、搜索
之前，v-for 中的数据都是直接从data 上的list 中直接渲染过来的现在，我们自定义了一个search 方法，同时把所有的关键字通过传参的形式，传递给了search方法，在search方法内部，通过执行for 循环 ，把所有符合搜索关键字的数据，保存到一个新数组中，然后返回。

<label>
    搜索关键字:
     <input type="text" class="form-control" v-model="keywords">
</label>

同样是两种方法：

search(keywords){//根据关键字搜索
        // var newList = []
        // this.list.forEach(item=>{
        // if(item.name.indexOf(keywords) != -1){
        // newList.push(item)
        //     }
        // })
        // return newList
 //注意 forEach（无法中止） some（通过return true可以中止） fileter（过滤） findIndex（找到对应的索引） 都是属于数组的新方法
//都会对数组的每一项进行遍历，执行相关的操作
        var newList = this.list.filter( item => {
        if(item.name.includes(keywords))
         //返回值为 true 和 false
         return item
        })
        return newList
}

完整代码
https://github.com/yangqiang1/ListManager