第一个Vue组件,按键

1.需求分析

点击按钮的几个状态


image.png

注释:按钮的点击状态和loading状态和 不可点击状态是可以相互切换的
点击按钮-不可点击状态-loading状态-可点击状态。
按下按钮需要一个反馈(出现特殊的样式)

2.写代码

怎么写开源的代码

github初始化仓库

1.创建仓库
2.添加许可证明
image.png

一般用mit许可

3.初始化仓库

文件名不要用中文,npm会报错
npm init

4.下载vue

npm i vue

5.使用webstom来代替git,进行push操作

1.记住快捷键 shift shift vsc 然后在里面提交

  1. 要写一个.gitignore文件来过滤文件
    3.push 还是用git 好一点
    4.使用webstom可以过滤文件,这样方便使用

6.关于vue和css的知识点

1.Vue.component的用法
如果你写了

Vue.component('g-button',{
    template:`
<button class="g-button">hi</button>
`
})

因为这是一个全局变量,所以在html中
Vue的使用里不要加data和message
image.png

这段代码的意思是,你可以在html中新建一个g-button的标签,他的内容就会替换成template中的内容
2.关于css:
关于字体的设置,我们可以这样设,甚至第一反应都应该是这样的,但是这样会出现bug,我们的button是14像素,如果这个前面的字体不是14像素,是12像素,那么页面就很不协调。


image.png

所以我们想出的方法是,使用变量去设置button的css,这样用户可以自行的设置按键的大小和高度,可以自行解决不协调的问题。(用css变量可以使用户自由的操作按钮的设置)


image.png
7.安装parcel

在官网上自己看文档,要注意的问题,如果一个包是给用户使用的,那么要全局安装,如果开发者使用的时候要加-D(局部安装),在开发过程中,最好,做一点就提交一次。
这里跟着视频再做一遍,基本思路是先创建一个src文件,然后新建一个.Vue的文件(这个是Vue的重要功能,单文件组件,可以把css,html,js整合到一个文件夹)将原来分散的template,css和js放在这个文件里,再新建一个js,导入Vue和.Vue的文件。把原来写的Vue写进去。

8.搞定了

运行的时候记得写--no-cache,感觉最好再来一遍。。。。。
最后附上图


image.png

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 16,297评论 1 39
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 558评论 0 1
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 621评论 0 1
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 4,305评论 1 25
  • 这是一篇关于猫和蝴蝶的爱情故事,据我所知文章最早见于哲思,是2013年中一期的文章,如有错误欢迎批评指正。...
    sq_smile阅读 237评论 0 2