vue实现搜索，添加，删除功能（多角度）

MVVM框架

MVVM是Model-View-ViewModel,即模型-视图-视图模型。模型是后端的数据，视图是前端的页面。其设计思想是：关注Model的变化，让MVVM去自动更新Model的变化；从而把开发者从Dom繁琐的步骤解脱出来。vm是v和m的调度者（桥梁）是设计思想的核心。

实现的方式：DOM事件监听。这两个方向都实现的，我们称之为数据的双向绑定。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

与后台MVC框架的区别：

1. 实现了数据和视图的分离
2. 通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

vue基本的学习

Vue就是基于MVVM模式实现的一套框架
文档：https://cn.vuejs.org/v2/api/

一些JS的API先了解

• Array.prototype.filter()
  过滤掉不满足条件的数组，返回一个新的通过测试的元素的集合的数组，如果没有通过测试则返回空数组

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
	let newFruits = fruits.filter(function(item){
   //过滤，组成新数组
		return item.toLowerCase().indexOf('apple')==-1
		//过滤，排除掉apple,组成新数组
	})
	console.log(newFruits)
	// ["banana", "grapes", "mango", "orange"]

• String.prototype.includes()
  includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。(主要用来实现搜索功能，当然也可以使用indexOf

console.log(str.includes('to be'))//判断str是否包括to be
	//返回true

+Array.prototype.findIndex()

var array1 = [5, 12, 8, 130, 44];
	var index = array1.findIndex(function(item){
   //item是每一项
		return item>13;
		// 当array1中有一项大于13，返回该项索引
	})
	console.log(index)//3

引入vue文件

下载vue

git clone https://github.com/vuejs/vue-syntax-highlight

引入我们下载好的vue的vue.min.js
为了使界面美观，我们引入bootstrap
（和平常一样引入即可）

在webpack使用vue

或则我们可以使用vue组件，在webpack中使用

import Vue from 'vue'
import 'bootstrap/dist/css/bootstrap.css'
import app from './app.vue'
var vm = new Vue({
   
	el:'#app',
	data:{
   
		msg:'vue+webpack'
	},
	render:c=>c(app) 
})

在webpack中使用vue组件也可以，使用上面引入vue文件–直接引入也可以，结合bootstrap来使用即可，这里我们在webpack使用vue为例子

基本页面

app.vue

<template>
	<div class='container'>
		<h1 class="text-center">汽车品牌案例</h1>
		<hr>
		<form class="form-inline text-center">
		  <div class="form-group">
		    <label for="car_id">ID</label>
		    <input type="text" class="form-control" id="car_id" placeholder="汽车编号" v-model="carId">
		  </div>
		  <div class="form-group">
		    <label for="car_name">Name<