仅适用于新手入门，理解vue的基本操作原理；
1.整体思想：（vue.js bootstrap 开发工具：hbuilderx ）
2.首先在学习之前我们应该明确：
1.响应式 ，以及明白，数据改变时，和数据绑定的元素同步改变
2.删除的时候通过事件的自定义参数index来索引删除指定数据
3.splice方法
3.记事本（本地应用）的功能原理理解：
增加数据原理：1.首先所有数据存在数组中，所以先定义一个list[]数组来存放数据；
2.然后需要用v-model="wb"来双向绑定input type="text"的数据，
当输入完成点击回车，@keyup.enter就会触发wb_add方法，
将输入到文本框中的数据存入数组；
3. v-for响应式的将数组list中的数据循环显示出来；
2. 删除操作原理：索引+事件传参来实现：
1.通过点击 （@click） a标签触发Delete(index)函数来执行删除步骤
， 2.通过index来限定删除数组中的哪一行数据
3.展示数据个数：1.基于数据，只要计算list数组的长度即可
2.v-text指令的作用
在这里插入代码片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./css/jsb.css"/>
<title></title>
</head>
<body>
<div id="jsb">
<input type="text" name="" class="form-control" id="" value="请输入事情" v-model="wb" @keyup.enter="wb_add" />
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in list">
{
{ index +1 }} {
{ item }}
<a class="input-group-addon" @click="Delete(index)"> 删除</a>
<!-- 注意 a标签与li标签在一个ul下，此时a的实参index与{
{index +1}} 中的index值是一样的
便于点击a标签的时候，对应的<li>删除-->
</li>
</ul>
<div id="foot" v-show=" list.length>0">
<!-- <p calss="pull-left">{
{index_view}} item left</p> -->
<p calss="pull-left">共有{
{ list.length }} 条数据</p>
<a class="pull-right" @click="dele_All"> 点击清除所有数据</a>
</div>
</div>
<script type="text/javascript">
var app =new Vue({
el: "#jsb",
data:{
list:["事情一","事情二","事情三"],
index:0,
wb:"day day up",//注意，要对变量初始值，否则会出错
//index_view:"" ,
//************************************//
//思考如何使index_view的值等于数组的长度
},
methods:{
//将文本框输入的数据添加到list数组中
wb_add:function(){
this.list.push(this.wb);
},
//删除指定行，通过index来限制删除哪项数据，splice执行删除操作；
Delete:function(Index){
console.log("删除");
console.log(Index);
this.list.splice(Index,1)
//splice删除数组中索引为index的1组数据
},
dele_All:function(){
this.list = [];
}
}
})
</script>
</body>
</html>