为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第19天 vue基础入门(下)| (19)...

【金秋打卡】第19天 vue基础入门(下)| (19) 3-4 使用单文件组件编写 TodoList

2022.11.12 10:47 56浏览

这篇文章可以入选评委评选的最佳手记吗?期待ing…

模块名
描述
课程名称
前端工程师2022版
课程章节
vue基础入门(下)
打卡知识进程
知识进程:19 / 21
(15) 2-12 生命周期函数的新写法
(16) 2-13 Provide,Inject,模版 Ref 的用法
(17)3-2 VueCLI 的使用和单文件组件(1)
(18)3-3 VueCLI 的使用和单文件组件(2)
(19) 3-4 使用单文件组件编写 TodoList
X(20)3-5 Vue-Router 路由的理解和使用(1)
X(21)3-6 Vue-Router 路由的理解和使用(2)
主讲老师
Dell
学习开始时间
2022.11.12 10:44
学习结束时间
2022.11.12 12:00
总计时
76 min
课程收获

我们始终围绕是什么+为什么+怎么用
来输出所学收获
(1)是什么:
像引用我们换成import的方式去引用,像模板我们换一个地方去写,‍‍同时还能额外的去写一些样式。
(2)怎么玩:
写法参考demo示例。
学习感受/感想/领悟(心得)
渐入佳境 +3

主要内容:
----------------------good start----------------------
实践内容:
1)编写to do list 案例。‍‍

我们在单文件组件里面写。

首先大家对to do list的实现是比较清楚的,结合新的语法‍‍去对语法进行一个巩固,这样的话可能大家理解起来会更容易一些。‍‍‍‍

如果你拿到别人打包的代码,你会发现其实 代码里面是没有 node_modules 这个内容的。‍‍

它是缺少 node_modules 的,也就是我给大家的代码是没有依赖的,‍‍

如果你拿到 代码运行 npm run serve 是启动不起来,你的项目的它会报错的:
怎么办?

拿到项目代码之后,首先运行 npm install 这个命令,‍‍去安装一下项目的依赖。‍‍

当然你会发现这个项目里面,其实它会有一些‍‍飘黄的东西,你看这个文件夹就是飘黄的:

有时候还会有绿色,红色的一些情况,‍‍
原因就是我现在这个项目是用git做管理的,‍‍编辑器发现你用 git 做管理,
当你对文件做了修改之后,它就会做一些代码仓库的‍‍提醒,告诉你有些文件被修改过了,

其实我不想ta做这个提示可以,怎么办呢?‍‍

我打开我的demo这个目录,我把下面截图的隐藏文件夹给它删除掉:

删除掉之后 就ok了,‍‍你看它就不会有语法的提示了:

拿到项目代码安装完依赖之后,再运行npm run serve,敲回车‍‍,

服务器就启动的起来了,然后我们到浏览器上刷一下,内容也会打印出来:

有了这块之后,开始做 to do list。‍‍【和我一起践行做中学,写过程笔记。by 代码写注释&只是为了好玩】

首先 App点vue是整个项目的入口,‍‍
所以理论上来说我可以不引入其他的组件,我直接在这里写to do list就可以了,怎么写呢?‍‍

首先我们在这里要写to do list 要怎么写?

写一个setup函数,setup函数里面我们要定义一个列表,当然这块我们可以先去写一个input框,‍‍再加一个button提交,
这块我们给它放到一个div里面去,‍‍其实就是写模板:

下面我们写一个 ul 里面循环 li 标签。

li 标签到底是什么?我们要通过列表循环拿到,这里面我先写一个123:

到页面上 刷一下,展示的效果是这样的:

回过来我们再去写它的逻辑,

首先我要定义一个数组,怎么定义?

在这里,我要这么去写。‍‍import reactive from vue balabala…
代码示例:

保存,现在到页面上刷新,我们看控制台有没有问题,没有任何的问题:

我往 reactive 里面加两个数据,比如说123保存:
代码示例:

运行结果,123就可以打印出来:

那么接下来要做的就是当我点提交按钮的时候,能往这个列表里加内容,‍‍我该怎么做?

首先input框里的值我做一个双向绑定,

v杠model等于‍‍ inputValue,

那么在这我就要定一个inputValue:

const inputValue 等于ref balabala…,‍‍它是一个基础类型,是一个空,

然后点提交的时候,我就把 inputValue 的值放到 list 里面去,
所以这块我要绑一个事件,‍‍@click它等于handleAddItem。‍‍

这块我就写一个const handleAddItem等于 箭头函数,

然后我让list点push。‍‍当然我要把handleAddItem、inputValue 导出去:

关键代码是什么?

我往 list里面去加内容,
保存,到页面上刷新,输入123,点提交:

继续加没问题:

是不是可以加得上,然后顺带着我们干一件事情是什么?

我让‍‍ inputValue点value 等于空给它制空,
它置空了,页面上‍‍就会把 input 框的内容给它清空。

这就是我们想要的一个效果。

所以 to do list就做完了。‍‍

当然这个to do list不太好看,所以我们希望对它做一个语法上或者说样式上的修饰,我们怎么做呢?‍‍

我们可以比如说给button加一个class等于叫button,‍‍

那么在下面我们怎么写样式?

在单文件组件里面就有一个style标签,我在里面去写一个button 这样的class名字:

我给一个margin left 20px保存,这块就会多出20px这样的一个间距,我们就可以做样式上的修饰了。‍‍

如果我们想拆一个子组件可以怎么做?
我可以把 li标签拆成一个子组件去写。‍‍

我在components目录下可以创建一个单文件组件,它叫什么?它就叫一个ListItem点vue。

ta接收一个叫ListItem。
接收一个message,叫msg,

这块展示的就是一个li标签:

我这块怎么写,我这块就要引入组件对吧?‍‍我才能用它,我怎么引组件?‍‍

跟之前一样,import叫 当前目录下的components 目录下的ListItem组件:

然后我有了这个组件之后,‍‍我要注册组件进来,我才能在外部的组件里去用它。

这是个局部组件,局部组件怎么定义呢?‍‍

components,我们给它一个对象或者给一个数组就可以,
当然最好给一个对象,你写一下冒号,你直接写ListItem就可以把它注册进来:

但是它会报一个错误,我们看什么错误?‍‍
说它定义了,但是没有被使用,我们怎么去用它呢?‍‍

我们既然在组件里注册了这个东西,我们直接在模板里就可以用这个内容了,我们怎么用?‍‍

它是一个 ListItem ,
其实在模板里面我可以用驼峰式的写法,用 <list-item /> 这种语法去用它,‍‍然后我们就不去展示这个item内容了,我用一个单标签就行了,

我调 ListItem 组件的时候除了给它 key 循环之外,
我还要把 msg 传给子组件,‍‍msg等于什么?‍‍等于 item 把它传给子组件:

保存到页面上刷:

接着讲样式这块的内容继续补充,比如说我在父组件里写了一个点button:


效果:

假设在子组件里面我也写了一个li标签,我给li标签也给一个叫做‍‍ class等于button,

它也用button这样的一个样式,‍‍父组件的样式会不会对子组件的样式产生作用去对它做修饰?
效果:

你发现‍‍一样会做上修饰的对不对?为什么?

因为你父组件定义了一个样式,‍‍类名叫做button,它是红色,
那子组件‍‍和父组件里面,你对应的一些元素都用了样式名称,‍‍所以父子组件样式都会被它修饰掉。‍‍
小结:

像引用我们换成import的方式去引用,像模板我们换一个地方去写,‍‍同时还能额外的去写一些样式。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
19
获赞与收藏
93

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消