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

最新推荐文章于 2021-12-23 01:03:51 发布

牧时

最新推荐文章于 2021-12-23 01:03:51 发布

阅读量492

点赞数

分类专栏： vue bootstrap 文章标签： bootstrap vue.js

本文链接：https://blog.youkuaiyun.com/qq_42850073/article/details/113962294

版权

仅适用于新手入门，理解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">

最低0.47元/天解锁文章