记事本(本地应用,基于vue.js)

仅适用于新手入门,理解vue的基本操作原理;
1.整体思想:(vue.js bootstrap 开发工具:hbuilderx )
记事本(本地应用,基于vue.js)_第1张图片

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指令的作用
在这里插入代码片

<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>
				   
				li>
			ul>
			<div id="foot" v-show=" list.length>0">
				
				 <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>

你可能感兴趣的:(vue,bootstrap,bootstrap,vue.js)