Vue小案例-小黑记事本的实现

小黑记事本综合应用了前面学习的集中指令，并且对指令进行综合性的基础应用联系。（样式没有写，仅实现了vue指令的功能。）


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小黑记事本</title>
</head>
<body><!-- 主题区域 --><div id="toduapp"><h1>小黑记事本</h1><!-- 输入框 --><!--输入框双向绑定数据，更改默认数据inputValue，然后绑定回车事件addValue，点击回车将数据添加到数组--><input type="text" v-model="inputValue" @keyup.enter="addValue" autofocus='autofocus' autocomplete="off" placeholder="请输入任务"><!-- 列表区域 --><ul><!--生成事件列表，v-for循环数组数据，绑定删除方法，点击时候，可以删除本条数据--><li v-for="(item, index) in list" @click="removeValue(index)">{{ index + 1 }}-{{ item }}<span>X</span></li></ul><!-- 统计和清空 --><!-- 当数组长度不为0的时候，设置为显示，否则就为删除该元素，也可以是使用v-show进行隐藏 --><footer v-if="list.length>0"><span>一共：{{ list.length }}条信息</span><!-- 绑定点击事件，点击清空的时候，清空整个数组，就是将数组设置为空 --><span @click="clearList">clear</span></footer></div>
</body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#toduapp",data: {list: ['写代码', '吃饭饭', '睡觉觉'],inputValue: '好好学习！',},methods: {// 添加 addValue:function(){this.list.push(this.inputValue)},// 删除， splice(开始删除的下标， 删除的个数)removeValue:function(index){this.list.splice(index, 1)},// 清空clearList:function(){this.list = []}}})</script><!-- 记事本总结：1. 列表结构可以通过 v-for 指令结合数据生成2. v-on结合事件修饰符可以对事件进行限制，比如 .enter3. v-on 在绑定事件时可以传递自定义参数4. 通过 v-model 可以快速的设置和获取表单元素5. 基于数据的开发方式，我们可以专注于数据，以前呢需要关注DOM元素6. 无需过度关注 DOM 元素，通过数据来渲染页面即可。--></html>

Vue小案例-小黑记事本的实现相关推荐

简单的vue小demo——小黑记事本
简单的vue小demo--小黑记事本整体效果:完整代码在这里一个简单的记事本,可实现简单的添加,删除,统计,清空,隐藏. 1.新增 1.1生成列表结果(v-for数组) 1.2获取用户输入(v-m ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
vue案例小黑记事本详解
大家好,今天学的东西不是很多,但遇到了一个特别有趣的vue小案例吧,我觉得可以拿出来给大家伙练练手,虽然案例简单,并不复杂,但也算是涵盖了vue大部分的常用知识点,希望大家可以多练练,有助于vue的学 ...
Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
黑马程序员VUE学习笔记-小黑记事本案例
自己写的样式,有很多不足,敬请见谅和指正.功能还是正常的. CSS部分 * {padding: 0;margin: 0; }#todoapp {width: 300px;margin: 5px aut ...
vue本地项目——小黑记事本
B站看到了一套vue框架入门课程,敲了一个小项目(小黑记事本),欢迎批评指教. 一.实现效果输入框输入任务,按下回车键,添加到任务最后鼠标移动到某项任务,该任务后面出现红色叉号,点击可删除次任务 ...
微信小程序 - 实战小案例 - 简易记事本
多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装组成: ...
Vue小案例——图书列表
图书列表案例显示 HTML 结构 CSS 样式提供的静态数据把提供好的数据渲染到页面上对页面进行事件绑定逻辑层次的JS代码案例显示图书列表实现静态列表效果基于数据实现模板效果处里每 ...

Vue小案例-小黑记事本的实现

Vue小案例-小黑记事本的实现相关推荐

最新文章

热门文章