1.Vue.js是什么？
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.下面一个简单的使用实现增删查功能
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<link rel="stylesheet" href="styles/demo.css" /> ???</head> ???<body> ???????<div id="app"> ???????????<fieldset> ???????????????<legend> ???????????????????Create New Person ???????????????</legend> ???????????????<div class="form-group"> ???????????????????<label>Name:</label> ???????????????????<input type="text" v-model="newPerson.name"/> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label>Age:</label> ???????????????????<input type="text" v-model="newPerson.age"/> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label>Sex:</label> ???????????????????<select v-model="newPerson.sex"> ???????????????????<option value="Male">Male</option> ???????????????????<option value="Female">Female</option> ???????????????</select> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label></label> ???????????????????<button @click="createPerson">Create</button> ???????????????</div> ???????</fieldset> ???????<table> ???????????<thead> ???????????????<tr> ???????????????????<th>Name</th> ???????????????????<th>Age</th> ???????????????????<th>Sex</th> ???????????????????<th>Delete</th> ???????????????</tr> ???????????</thead> ???????????<tbody> ???????????????<tr v-for="(person, index) in people"> ???????????????????<td>{{ person.name }}</td> ???????????????????<td>{{ person.age }}</td> ???????????????????<td>{{ person.sex }}</td> ???????????????????<td :class="‘text-center‘"><button @click="deletePerson(index)">Delete</button></td> ???????????????</tr> ???????????</tbody> ???????</table> ???????</div> ???</body> ???<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生产环境版本，优化了尺寸和速度 --> ???<script> ???????var vm = new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????newPerson: { ???????????????????name: ‘‘, ???????????????????age: 0, ???????????????????sex: ‘Male‘ ???????????????}, ???????????????people: [{ ???????????????????name: ‘Jack‘, ???????????????????age: 30, ???????????????????sex: ‘Male‘ ???????????????}, { ???????????????????name: ‘Bill‘, ???????????????????age: 26, ???????????????????sex: ‘Male‘ ???????????????}, { ???????????????????name: ‘Tracy‘, ???????????????????age: 22, ???????????????????sex: ‘Female‘ ???????????????}, { ???????????????????name: ‘Chris‘, ???????????????????age: 36, ???????????????????sex: ‘Male‘ ???????????????}] ???????????}, ???????????methods:{ ???????????????createPerson: function(){ ???????????????????this.people.push(this.newPerson); ???????????????????// 添加完newPerson对象后，重置newPerson对象 ???????????????????this.newPerson = {name: ‘‘, age: 0, sex: ‘Male‘} ???????????????}, ???????????????deletePerson: function(index){ ???????????????????// 删一个数组元素 ???????????????????this.people.splice(index,1); ???????????????} ???????????} ???????}) ???</script></html>实现的效果图如下：
Vue.js-简单的增删查功能
原文地址：https://www.cnblogs.com/ButterflyEffect/p/9964786.html