品牌案例-完成品牌列表的添加功能
内容简介：
一、表格的创建
二、数据的传递
三、添加功能的实现
一、 表格的创建
1.业务分析
首先我们需要知道应该把品牌管理案例做成什么样。打开代码(品牌列表案例.html)，其实就是一个简单的列表，下面是表格，上面是添加的文本框。
我们可以在文本框输入 Id 和 Name的值，将其添加到表格中；点击删除按钮可以删除表格中指定的数据；还可以在搜索名称关键字的文本框中输入关键字，表格就会根据关键字显示数据，如果有多个数据，都会被过滤出来。
刚一进来就获得焦点，如何让文本框进入页面就获得焦点；首先要让它获取焦点就要先获取它，然后才能给添加获取焦点的事件。在Vue中免除操作DOM元素的过程，同时也能让它获取焦点，这也是一个重点。
2.实现页面
打开前端开发软件(Visual Studio Code),新建一个html文件，输入vh，快速生成页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial
scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods:{}
});
</script>
</body>
</html>
首先，进行导包(<script src="./lib/vue-2.4.0.js"></script>)、创建一个要控制的元素(<div id="app"></div>)和创建一个Vue实例。
var vm = new Vue({
el: '#app',
data: {},
methods:{}
});
然后，实现界面，
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">。不需要使用Jquery，因为Jquery是封装DOM操作的，它是用来操作DOM的，然而，在Vue中可以免除操作DOM的过程，所以推荐不使用Jquery。最后在div标签中创建表格。
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
二、数据的传递
需要把vm中的data数据同步渲染到表格中，在里面为了不手动造作DOM，需要借助Vue提供的指令(v-for)。
在data中，使用list添加数据并在tr标签中使用Vue提供的指令(v-for)循环,
再添加:key(:代表属性的绑定)使得数据正确的传输，把data的数据同步到表格中。
<tbody>
<tr v-for="item in list" : key="item.id">
<td>{{ item.id }}</td>
<td>{{ v-text=" item.name " }}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="">删除</a>
</td>
</tr>
</tbody>
三、添加功能的实现
(1)实现添加功能，首先需要有一个添加框。
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline " >
<lable>
Id:
<input type="text" class="form-control" >
</lable>
<lable>
Name:
<input type="text" class="form-control" >
</lable>
<input type="button" value="添加" class="btn
btn-primary" >
</div>
</div>
(2) 实现添加功能，点这个添加按钮要获取到文本框中的值，然后把值组合成一个车的对象，然后把对象放到数组中去，在这里面我们还需要使用Vue进行监管，所以要在input中添加(v-model="id"; v-model="name";@click= "add")，点击添加按钮时，会触发add方法。创建按钮的点击事件，在data中进行数据绑定。在methods中添加add方法，实现添加功能。
使用add方法首先需要直接从data中获取id和name的值。
在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参。
(3)分析add方法：
1.获取到id和name，直接从data上获取
2.组织出一个对象
3.把这个对象，调用数组的相关方法，添加到当前data上的list中
4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上。
5.当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作。
然后组织出一个对象，保存一个新的对象，通过
this.list.push(car)
进行绑定。例如可以使用:
var car ={id: this.id, name:this.name, ctime:new Date()}
this.list.push(car)
拼接出一个car对象，并保存到list中。
最后把这个对象调用数组的相关方法添加到当前data上的list中成功实现添加功能。
完整代码，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial
scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline " >
<lable>
Id:
<input type="text" class="form-control" v-model="id">
</lable>
<lable>
Name:
<input type="text" class="form-control" v-model="name">
</lable>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</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.ctime }}</td>
<td>
<a href="">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: ' ',
name:' ',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }
]
},
methods: {
add(){
var car ={id: this.id, name:this.name, ctime:new Date()}
this.list.push(car)
}
}
});
</script>
</body>
</html>
