【uniapp开发从0开始做一个小程序-02】

目录:首先了解几个简单的vue框架内的元素用法

  • 简单view的用法(相当于div盒子)
  • 简单button的用法
  • 简单image的用法

简单view的用法(相当于div盒子)

1-1:创建四个静态资源文件夹存放静态资源
【uniapp开发从0开始做一个小程序-02】

1-2:在静态文件夹里的css文件夹里创建一个index.css作为主界面的样式
【uniapp开发从0开始做一个小程序-02】

1-3:将index.vue里的内容删除,先写一个简单的测试界面,导入主界面的css样式
【uniapp开发从0开始做一个小程序-02】

1-4:在index.css里面写一些样式作为样式测试
【uniapp开发从0开始做一个小程序-02】

1-5:运行结果
【uniapp开发从0开始做一个小程序-02】

简单button的用法

2-1:在index.vue里创建一个button
【uniapp开发从0开始做一个小程序-02】

2-2:在index.css里写一些简单的button样式
【uniapp开发从0开始做一个小程序-02】

2-3:运行结果
【uniapp开发从0开始做一个小程序-02】

简单image的用法

3-1:在static/img下放一张测试图片
【uniapp开发从0开始做一个小程序-02】

3-2:在index.vue里面创建一个image
【uniapp开发从0开始做一个小程序-02】

3-3:在index.css里面写一些简单的image样式
【uniapp开发从0开始做一个小程序-02】

3-4:运行结果
【uniapp开发从0开始做一个小程序-02】

**总结:**昨天上了一整天的课,从早上到晚上,就没有做总结,今天下午没课,但是完因为要参加比赛的原因,在准备一些材料。晚上有时间,做了一点学习。如果问我为什么中午休息的时候不做?别问,问就是懒得做!>o< hhh~~

相关文章: