Vue.js实现的表格增加删除功能主要涉及Vue.js框架中的数据绑定、组件化以及事件处理等核心概念。Vue.js是一个轻量级的前端JavaScript框架，它支持MVVM（Model-View-ViewModel）架构，能够简化前端开发流程。在这个小demo中，我们可以学习到如何使用Vue.js来动态地增加和删除表格中的数据条目。
Vue.js的核心特性之一就是数据绑定。在上面的代码中，我们使用了指令`v-model`来实现输入数据与Vue实例的数据属性之间的双向绑定。如`<input type="text" v-model="newPerson.name"/>`，这里的`newPerson.name`就是一个在Vue实例的`data`对象中定义的属性。当我们输入数据时，输入框的值会自动更新到`newPerson.name`，反之亦然。
Vue.js支持使用指令`v-for`来进行列表渲染，即根据数组中的对象生成表格行。`<tr v-for="person in people">...</tr>`这行代码就是用`v-for`指令循环渲染`people`数组，并为每个对象生成一个表格行。每次循环`person`变量都会依次对应数组中的每一个对象，这样我们就可以在模板中使用`{{ person.name }}`等来展示每个对象的属性值。
在增加数据的功能上，我们首先需要一个表单界面收集新数据。在上述代码中，通过`v-model`绑定输入框和一个新对象`newPerson`的属性，然后使用一个按钮触发一个方法`createPerson`。这个方法会将`newPerson`对象添加到`people`数组中。具体实现可能是这样的：
```javascript
methods: {
createPerson: function() {
// 假设我们有一个空数组来保存人员信息
if (this.newPerson.name && this.newPerson.age && this.newPerson.sex) {
this.people.push({ name: this.newPerson.name, age: this.newPerson.age, sex: this.newPerson.sex });
// 清空输入框
this.newPerson.name = '';
this.newPerson.age = '';
this.newPerson.sex = '';
} else {
alert("请填写所有信息！");
}
}
}
```
要实现删除表格中某行的功能，我们需要在表格每一行内放置一个删除按钮，并绑定点击事件。通过`v-on:click="delPerson($index)"`指令，当点击删除按钮时，会执行`delPerson`方法。`$index`是当前正在循环的元素的索引。`delPerson`方法会从`people`数组中移除对应的元素，从而实现删除表格行的功能。具体实现可能是：
```javascript
methods: {
delPerson: function(index) {
this.people.splice(index, 1);
}
}
```
此外，这个demo还利用了Bootstrap框架来美化界面，例如使用了表格样式、栅格系统和按钮样式等。这样不仅让界面看起来更加美观，也提高了用户的交互体验。
需要注意的是，在实际的开发过程中，我们需要确保代码的质量和安全，例如在删除操作中，应当添加一些确认操作来避免误删除，以及在添加数据时进行数据格式校验等。
这个Vue.js表格增加删除demo示例展示了Vue.js在动态表单处理和界面交互中的强大功能，同时也演示了如何将Vue.js与其它前端技术如Bootstrap整合使用，以快速构建出用户体验良好的web应用。通过这个示例，我们可以学习到Vue.js中的数据绑定、指令使用、事件处理和组件化等核心概念，对于初学者快速入门Vue.js框架具有很好的参考价值。
