接上篇，在本篇中，我們將要實(shí)現(xiàn)如下，功能，編輯和查詢，我們當(dāng)前的todolist程序，和線上其它的demo程序不同，我們會(huì)對(duì)其進(jìn)行增刪改查的基本操作，之后進(jìn)行進(jìn)一步的完善，按照常規(guī)的系統(tǒng)使用經(jīng)驗(yàn)，一般我們新增和編輯都是在模態(tài)框中處理，這里我們不會(huì)去構(gòu)建復(fù)雜的模態(tài)框，只用一個(gè)簡(jiǎn)單的div層來(lái)代替，后期接下來(lái)的文章中我們會(huì)重復(fù)造輪子，構(gòu)建我們自己的輕量級(jí)框架（UI庫(kù)）。
首先，我們對(duì)我們的頁(yè)面結(jié)構(gòu)進(jìn)行一下簡(jiǎn)單的調(diào)整，加入bootstrap只是為了讓頁(yè)面不那么赤裸裸，對(duì)其它不會(huì)有任何影響
<!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>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"></head><body class="container">
<div id="app" class='row'>
<div class="col-md-6">
<table class="table table-bordered">
<tr>
<th>title</th>
&nb
