vue|记事本（本地应用，基于vue.js） bootstrap|vue.js|bootstrap

仅适用于新手入门，理解vue的基本操作原理；
1.整体思想：（vue.js bootstrap 开发工具：hbuilderx ）

文章图片

2.首先在学习之前我们应该明确： 【vue|记事本（本地应用，基于vue.js）】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指令的作用

在这里插入代码片 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"> src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> src="https://www.it610.com/article/js/vue.js" type="text/javascript" charset="utf-8"> - 锐客网 {{ index +1 }}{{ item }} 删除共有{{ list.length }} 条数据点击清除所有数据 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 = []; } } })