记事本开发成功，附代码
虽然是最简单的记事本开发，但是有些概念，仍然有不能完全理解的地方，更不要说完全吃透了。还需要时间！ 能写出来，不代码能完全理解，更不敢说完全吃透了。
<!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>
<!-- 主题区域 -->
<section id="todoapp">
<!-- 输入框 -->
<!--输入框双向绑定数据，更改默认数据inputValue，然后绑定回车事件addValue，点击回车将数据添加到数组-->
<header class="header">
<h1> 记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autofocus="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>
<!-- destroy图标显示与课程不一样，效果一样。都是删除 -->
<button class="destroy" @click="remove(index)"></button>
<!-- 这个只能显示叉号图标，不能点击实现删除功能。 -->
<span>X</span>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-if="list.length!=0">
<strong>{{list.length}}</strong> items left</span>
<!-- 为这个绑定clear 清空事件单词，点击清空。 -->
<button v-show="list.length!=0" class="clear-completed" @click="clear">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["澳丽本","理疗贴","凝胶"],
inputValue:"山东，澳丽本运营。这是v-model双向绑定的数据，成功显示了！"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list = [];
}
},
})
</script>
<!-- 1 无用的代码，全部清空，才能一比一测试！！！
2 光刷新页面不行！ 必须要重新进入才能正确显示。
-->
</body>
<!--
记事本总结：
1 新增
2 删除总结
1 数据改变 和数据绑定的元素同步改变
2 事件的自定义参数
3 splice的方法。可以根据索引，删除
3 统计总结
1 基于数据的开发
2 v-test指令的作用。简写为{{}}
4 清空总结
清空的本质是清空数组。
1 基于数据的开发方式
5 隐藏
列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如.enter
v-on在绑定事件时 可以传递自定义参数
通过v-model 可以快速的设置和获取表单元素的值
基于数据的开发方式。
-->
</html>
记事本开发成功，附代码相关推荐
- 【记录】文章相似度计算开发（附代码）
写在前边:目前已经通过爬虫等手段获取了千万级的文章类数据,但是目前这些数据是只是简单的基于表层的应用,相对粗粒度的统计,文本之间的很多信息并没有被良好的利用起来.为了提高数据的使用率并获取更多有用信息 ...
- python能做数据库开发吗_5分钟快速入门，用Python做SQLite数据库开发，附代码适合初学...
1. 它是内置的,不需要安装,节省很多麻烦.2. 使用方便,不需要复杂的连接配置,打开本地文件一样简单.3.方便转移.数据库是一个文件.复制.传输和删除可以很容易地处理.4所示.轻量级的性能比大多数其 ...
- python建立sqlite数据库_5分钟快速入门，用Python做SQLite数据库开发，附代码适合初学...
1.它内置,无需安装,省了很多麻烦. 2.使用方便,无需复杂的连接配置,和打开本地文件一样简单. 3.转移方便,数据库就是一个文件,复制.转移.删除都能简单处理 4.轻量级应用中性能优于多数其它的数据 ...
- iOS开发 swift 3dTouch实现 附代码
iOS开发 swift 3dTouch实现 附代码 一.What? 从iphone6s开始,苹果手机加入了3d touch技术,最简单的理解就是可以读取用户的点击屏幕力度大小,根据力度大小给予不同的反 ...
- python中get函数是什么意思_详解python中get函数的用法（附代码）_后端开发
strncmp函数用法详解_后端开发 strncmp函数为字符串比较函数,其函数语法为"int strncmp ( const char * str1, const char * str2, ...
- python开发微信群_Python编程：微信群聊程序的开发与进/线程知识汇总(附代码)
本文承接上篇文章的客户端-服务器聊天对话程序,进一步设计开发了微信群聊的python模拟程序,涉及的python知识点为:Python实战:聊天软件开发与TCP/Socket编程知识汇总(附代码)和 ...
- python做excel多表按列合并_python如何实现excel多表合并（附代码）_后端开发
php504错误怎么解决_后端开发 php504错误的解决方法:1.增加fastcgi进程响应的缓冲区大小:2.更改php环境配置,增加php-cgi进程处理脚本的超时时间:3.将php-fpm的处理 ...
- K210开发板学习笔记（一）——K210人脸识别门禁+SD卡实现人脸数据存储（附代码解读）
基于K210的人脸门禁系统演示(按键录入人脸ID.人脸断电存储) 哔哩哔哩链接:https://b23.tv/MHXjhGa K210人脸识别门禁系统 一个按键实现所有功能. 具体功能: 在线人脸录入 ...
- 前端页面预览word_详解html实现在线预览word、excel、pdf等文件的功能（附代码）_WEB前端开发...
JavaScript判断"字典"为空的方法_WEB前端开发 字典是一种存储键值对的数据结构,Javascript中的Object类内部即实现为一个字典,本文就来为大家介绍一下判断字 ...
最新文章
- SAP S/4HANA生产订单创建时使用的工厂数据是从什么地方带出来的
- Sublime Text3常用插件以及安装方法(实用)
- 自学python推荐书籍2019-2019最全Python入门学习路线，不是我吹，绝对是最全
- 百度地图实现定位功能
- excel导入csv文件_如何将包含以0开头的列的CSV文件导入Excel
- VLAN访问控制列表(VACL)的配置方法
- 如何删除 eclipse 中多余的 Tomcat server？为什么产生这种 bug？
- pip不是内部或外部命令，也不是可运行的程序 或批处理文件--解决办法
- 柔性太阳能电池pdf_电子科大刘明侦教授团队钙钛矿太阳能电池研究取得重要进展...
- SQLi LABS Less-6 报错注入+布尔盲注
- 印花材料使用过程中的三个常见问题及解决方案
- mysql5.6.4安装_win 7 64 mysql 5.6.4 安装
- android 串口键盘_侧面滑盖+实体全键盘的安卓手机，能走向大众化吗？
- c++读取文本文件里的指定位置的字符_(12)文本文件操作参考
- 使用rpm命令卸载程序
- FastJson之autotype bypass
- 离散数学之关系（传递闭包）
- 二维码美化策略——QArt Codes
- Vs2008调试慢的问题
- Linux alarm闹钟函数