简单的vue小demo——小黑记事本

整体效果：完整代码在这里
一个简单的记事本，可实现简单的添加，删除，统计，清空，隐藏。

1.新增

1.1生成列表结果（v-for数组）
1.2获取用户输入（v-model）
1.3回车，新增（v-on，.enter）

具体实现：

<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" //双向绑定class="new-todo" /></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><button class="destroy" @click="remove(index)"></button></div></li></ul></section>

var app = new Vue({el: "#todoapp",data: {list: ["写代码", "吃饭饭", "睡觉觉"],inputValue: "好好学习,天天向上"//双向数据绑定},methods:{add:function(){this.list.push(this.inputValue);//新增加元素}}

样例：点击回车，元素被记录

2.删除

1.点击删除指定内容（v-on splice索引）
2.数据改变和绑定的元素同步改变
3.事件的自定义参数
4.Splice方法的作用
具体代码：

<button class="destroy" @click="remove(index)"></button>

remove:function(index){console.log("删除");console.log(index);this.list.splice(index,1);}

样例：点击x 删除这一列

3.统计

1.统计信息个数（v-text length）
基本代码：

 <span class="todo-count"><strong>{{list.length}}</strong> items left</span>

样例输出：

4.清空

1.点击清楚所有信息（v-on）
代码部分：

<button class="clear-completed"@click="clear"> Clear</button>

clear:function(){this.list=[];}

样例输出：点击clear 数据全部清空了

5.隐藏

1.没有数据时，隐藏元素（v-show v-if 数组非空）
基本代码：
1.隐藏个别元素

<span class="todo-count"v-if="list.length!=0"><strong>{{list.length}}</strong> items left</span><button v-show="list.length!=0"class="clear-completed"@click="clear"> Clear</button>

样例输出：

2.隐藏全部元素
基本代码：

 <footer class="footer"v-show="list.length!=0" ><span class="todo-count"v-if="list.length!=0"><strong>{{list.length}}</strong> items left</span><button v-show="list.length!=0"class="clear-completed"@click="clear"> Clear</button></footer>

样例输出：

总结：

1列表结构可以通过v-for指令结合数据生成
2v-on结合事件修饰符可以对事件进行限制,比如.enter
3v-on在绑定事件时可以传递自定义参数
4通过v-model可以快速的设置和获取表单元素的值
5基于数据的开发方式

简单的vue小demo——小黑记事本相关推荐

Vue小案例-小黑记事本的实现
小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...
vue本地项目——小黑记事本
B站看到了一套vue框架入门课程,敲了一个小项目(小黑记事本),欢迎批评指教. 一.实现效果输入框输入任务,按下回车键,添加到任务最后鼠标移动到某项任务,该任务后面出现红色叉号,点击可删除次任务 ...
黑马程序员VUE学习笔记-小黑记事本案例
自己写的样式,有很多不足,敬请见谅和指正.功能还是正常的. CSS部分 * {padding: 0;margin: 0; }#todoapp {width: 300px;margin: 5px aut ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
python装饰器简单理解的小demo
def multi_100(func):def demo(ls):# 这个函数是让列表前两个元素*100for i in range(2):ls[i] = (ls[i] * 100)func(ls)r ...
Vue小demo—美团注册页面
一.目标效果效果图展示实现原理 1.输入框聚焦时边框变色使用CSS的:focus选择器,轻松实现元素聚焦时改变样式. //用法示例 <!DOCTYPE html> <html& ...
一个vue小demo购物车
代码很简单,跟着慕课上的vue例子做的,有个问题记录下 this.$http.get("data/cartData.json").then(function(res){// _th ...
vue小demo易错点总结
1.在使用<transiton>添加过渡效果时,对应的标签需使用<router-link>,否则,transition不会达到应有的效果. 2.在路由文件里获取根实例时,需通过 ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...

简单的vue小demo——小黑记事本

简单的vue小demo——小黑记事本

1.新增

2.删除

3.统计

4.清空

5.隐藏

总结：

简单的vue小demo——小黑记事本相关推荐

最新文章

热门文章