b站黑马的Vue快速入门案例代码——小黑记事本

2024-06-04 20:19:26

目录

目标效果：

重点原理：

（1）push（）方法——向数组末尾，添加新元素，并返回新长度

（2）v-on可以传递自定义参数，v-on:click=”...“的简写是@click，其他事件同理

（3）v-on可以结合事件修饰符

e.g.@keyup.enter="add"指——当键盘回车键弹起后，调用add事件

（4）v-model获取+设置表单元素的值

【v-model双向数据绑定——表单数据和绑定的数据互相同步修改】

（5）v-for——【遍历数组】【是响应式的，和数据绑定，数据没了，就也不生效了】根据数据生成列表结构

语法 v-for=(item，index) in arr

（6）splice（）方法——添加/删除/替换数组

splice(从哪个索引号代表的内容开始删，删除的元素的个数)

（7）{{}}差值表达式是v-text的简写——【解析文本用】设置标签的文本值

代码部分：

1.小黑记事本.html(全是重点）

2.index.css(辅助作用）

3.vue.js(辅助作用）

安装Vue的方法 /获取vue.js文件的方法：

目标效果：

1.【新增】在文本框输入想要添加的计划（默认添加的计划是：好好学习），按键盘的Enter回车键，即可将计划添加至下方计划的后面

2.【删除】鼠标放在对单个计划上，右边会显示X。点击删除用的x按钮，可以删除对应的单个计划

3.【统计】当记事本中记录的计划的总个数！=0时(即还有计划内容)，左下角有一行文字，统计记事本中记录的计划的总个数

4.【清空】点击Clear按钮，清空所有记事本中记录的计划

5.【隐藏】当记事本中记录的计划的总个数=0时(即无计划内容)，隐藏下面的计划表

e.g.1初始状态：

e.g.2在初始状态基础上，直接按键盘Enter回车键：

e.g.3在初始状态基础上，输入自己想添加的计划，再按键盘Enter回车键：

再按键盘Enter回车键：

e.g.4在e.g.3基础上，点击X,即可删除对应的单个计划

例如：点击喝牛奶后面的X

即删除了喝牛奶这一行：

e.g.5注意观察左下角的数字，是对应的当前计划的总个数：

e.g.6在e.g.5的基础上，点击右下角的Clear

清空所有计划：

重点原理：

（1）push（）方法——向数组末尾，添加新元素，并返回新长度

（2）v-on可以传递自定义参数，v-on:click=”...“的简写是@click，其他事件同理

（3）v-on可以结合事件修饰符

e.g.@keyup.enter="add"指——当键盘回车键弹起后，调用add事件

（4）v-model获取+设置表单元素的值

【v-model双向数据绑定——表单数据和绑定的数据互相同步修改】

（5）v-for——【遍历数组】【是响应式的，和数据绑定，数据没了，就也不生效了】根据数据生成列表结构

语法 v-for=(item，index) in arr

item遍历的每一项【可改名字】

index遍历的每一项的索引号

in关键字【不可改】

arr遍历的数据/数组【可改名字】

（6）splice（）方法——添加/删除/替换数组

splice(从哪个索引号代表的内容开始删，删除的元素的个数)

        var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 0, "Lemon", "Kiwi");// 第一个参数表示从索引号2开始；第二个参数表示删除0个；第三个参数开始为要添加的元素，可以是数组 console.log(fruits);//Array(6) ["Banana", "Orange", "Lemon", "Kiwi","Apple", "Mango"]

（7）{{}}差值表达式是v-text的简写——【解析文本用】设置标签的文本值

代码部分：

1.小黑记事本.html(全是重点）

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>小黑记事本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" type="text/css" href="./css/index.css" />
</head><body><!-- 主体区域 --><section id="todoapp"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><!-- v-model="inputValue"给记事本中记录的每个计划前面的输入框，设置v-for,来设置默认输入的文字 --><!-- @keyup.enter="add"当键盘回车键弹起后，调用add事件--><input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"class="new-todo" /></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><!-- 给记事本中记录的每个计划，设置v-for，来遍历数组list --><li class="todo" v-for="(item,index) in list "><div class="view"><!-- 设置记事本中记录的每个计划前的 序号--><!-- index从0开始，所以要加1--><span class="index">{{index+1}}.</span><!-- 设置记事本中记录的每个计划的  内容--><label>{{ item }}</label><!-- 删除用的x按钮 --><!-- @click="remove"点击删除用的x按钮，调用remove事件 --><button class="destroy" @click="remove(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><!-- 对于记事本中记录的计划的总个数，如果计划都被清空了，需要隐藏该文字 --><!-- v-if="list.length!=0"指 记事本中记录的计划的总个数！=0，显示该文字--><span class="todo-count" v-if="list.length!=0"><!-- {{list.length}} 中是 记事本中记录的计划的总个数--><strong>{{list.length}}</strong> items left</span><!--  @click="clear"点击Clear按钮，删除 所有记事本中记录的计划 --><!--  v-show="list.length!=0"指 记事本中记录的计划的总个数！=0，显示Clear文字 --><button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button></footer></section><!-- 底部 --><footer class="info"><p><a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a></p></footer><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="../vue.js"></script><script>var app = new Vue({el: "#todoapp",data: {list: ["吃苹果", "喝牛奶", "读书"],inputValue: "好好学习"},methods: {// 1.添加功能add: function () {// push()方法——向数组末尾，添加新元素，并返回新长度// 用push()，添加inputValue的值去list数组末尾this.list.push(this.inputValue);//此处this指当前对象#todoapp},// 2.删除功能remove: function (index) {//形参index,接收上面@click="remove(index)中的index,即获得点击对应计划的索引号// splice()方法——删除数组内容// splice(从哪个索引号代表的内容开始删，删除的元素的个数)//此处点谁就删谁this.list.splice(index, 1);},//3.清空功能clear: function () {//直接把list数组变成空数组this.list = [];//此处this指当前对象#todoapp}}})</script>
</body></html>

2.index.css(辅助作用）

* {margin: 0;padding: 0;
}html,
body,
#mask {width: 100%;height: 100%;
}#mask {background-color: #c9c9c9;position: relative;
}#mask .center {position: absolute;background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 10px;
}
#mask .center .title {position: absolute;display: flex;align-items: center;height: 56px;top: -61px;left: 0;padding: 5px;padding-left: 10px;padding-bottom: 0;color: rgba(175, 47, 47, 0.8);font-size: 26px;font-weight: normal;background-color: white;padding-right: 50px;z-index: 2;
}
#mask .center .title img {height: 40px;margin-right: 10px;
}#mask .center .title::before {content: "";position: absolute;width: 0;height: 0;border: 65px solid;border-color: transparent transparent white;top: -65px;right: -65px;z-index: 1;
}#mask .center > img {display: block;width: 700px;height: 458px;
}#mask .center a {text-decoration: none;width: 45px;height: 100px;position: absolute;top: 179px;vertical-align: middle;opacity: 0.5;
}
#mask .center a :hover {opacity: 0.8;
}#mask .center .left {left: 15px;text-align: left;padding-right: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;
}#mask .center .right {right: 15px;text-align: right;padding-left: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;
}

3.vue.js(辅助作用）

因为该文件内容太多，请前往该网址（Vue官网）下载

安装 — Vue.js

安装Vue的方法 /获取vue.js文件的方法：

b站黑马的Vue快速入门案例代码——小黑记事本相关推荐

b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...
b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）
目录目标效果: 重点原理: 1.用数组储存图片的数据 2.v-bind指令可以设置元素属性 e.g.src 语法 v-bind:属性名=表达式简写[实际开发常用] :属性名=表达式 3.v ...
b站黑马的Vue快速入门案例代码——计数器
目录目标效果: 重点原理: 1.创建Vue实例的时候: 2.v-on--为元素绑定事件 3.v-text--[解析文本用]设置标签的文本值 v-text[简写]为{{}} 实现步骤: 代码部分: 1 ...
【数据分析】【MySQL】快速入门+案例+代码+命令整理+GIF实操演示
1.SQL的语句顺序(理论) SELECT [ALL|DISTINCT] <目标表达式>.... FROM <表名或者视图名>.. [WHERE <条件表达式>] ...
我爱Java系列---【1.Vue的快速入门案例】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...
SWMM从入门到实践教程 03 快速入门案例的设施参数设置与批量设置
文章目录 1 雨量计 1.1 雨量计基础设置 1.2 雨量计数据来源 2 汇水区 2.1 参数讲解 2.2 设置结果 3 检查井 3.1 参数讲解 3.2 批量设置 4 管道 4.1 参数讲解 4.2 ...
Vue快速入门（下）
文章目录 Vue快速入门(下)(应急用) 八.使用Axios实现异步通信(重点) 8.1 什么是Axios 8.2 第一个Axios应用程序九.表单输入绑定十.组件基础十一.Vue-cli搭建d ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
03_RabbitMQ快速入门案例
RabbitMQ快速入门案例新建一个maven过程导入依赖 <dependency><groupId>com.rab ...

最新文章

热门文章