开发者学堂课程【Vue.js 入门与实战：品牌案例-完成品牌列表的添加功能】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8142
品牌案例-完成品牌列表的添加功能
内容简介：
一、 表格的创建
二、 数据的传递
三、 添加功能的实现
一、 表格的创建
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>
首先，进行导包、创建一个要控制的元素("app"></div>)和创建一个Vue实例。
var vm = new Vue({
el: '#app',
data: {},
methods:{}
});
然后，实现界面，"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>
