├── LICENSE
├── README.md
├── docs
├── demo-01
│ ├── demo-01.gif
│ └── index.html
├── demo-02
│ ├── icos
│ │ ├── blog.png
│ │ ├── icons8-github-64.png
│ │ ├── 知乎.png
│ │ ├── 笔记本.png
│ │ └── 符号-代码.png
│ ├── index.html
│ └── style
│ │ └── style.css
├── demo-03
│ ├── README.md
│ ├── icos
│ │ ├── blog.png
│ │ ├── icons8-github-64.png
│ │ ├── 摘录.png
│ │ ├── 知乎.png
│ │ ├── 笔记本.png
│ │ └── 符号-代码.png
│ ├── index.html
│ ├── style
│ │ └── style.css
│ └── 果冻.gif
├── demo-04
│ ├── demo-04.gif
│ ├── index.html
│ └── style.css
├── demo-05
│ ├── demo-05.gif
│ ├── index.html
│ └── style.css
├── demo-06
│ ├── demo-06.png
│ ├── index.html
│ └── style.css
├── demo-07
│ ├── demo-07.gif
│ └── index.html
├── demo-08
│ ├── demo-08.gif
│ ├── img
│ │ ├── after.png
│ │ ├── before.png
│ │ └── letter_bg.png
│ ├── index.html
│ └── style.css
├── demo-09
│ ├── demo-09.gif
│ ├── index.html
│ └── style.css
├── demo-10
│ └── index.html
├── icos
│ ├── demo-01.png
│ ├── demo-03.png
│ ├── demo-04.png
│ ├── demo-05.png
│ ├── demo-06.png
│ ├── demo-07.png
│ ├── demo-08.png
│ ├── demo-09.png
│ ├── demo-10.png
│ ├── demo-11.png
│ ├── demo-12.png
│ ├── demo-13.png
│ ├── demo-14.png
│ ├── demo-15.png
│ ├── demo-16.png
│ ├── demo-17.png
│ ├── demo-18.png
│ ├── demo-19.png
│ ├── demo-20.png
│ └── demo-21.png
├── index.html
└── style
│ └── style.css
└── vue-study
├── 1-note
├── README.md
└── index.html
├── 2-weather
├── README.md
└── index.html
└── index.html
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 step
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 👋 简介
2 |
3 | 该仓库为学习前端知识所创建，有一些漂亮的静态界面和一些学习 Vue 过程中搜集的案例。
4 |
5 | 本来静态界面是可以通过 github pages 展示，目前失效了，可以在本地打开来看。
6 |
7 | # 🧐 Vue 练手项目
8 |
9 | Learn by doing！
10 |
11 | 1. [vue 记事本开发](vue-study/1-note/README.md)
12 |
13 | # 🎉 下载方式
14 |
15 | 可以使用 git bash 直接 clone 本厂库。
16 | ```bash
17 | git clone https://github.com/weijiew/web-step.git
18 | ```
19 |
20 | # 🥞 更新
21 |
22 | > update 2020/5/24 增加了 [github pages](https://weijiew.com/web-step/) 。
23 |
24 | > update 2020/5/26 调整格式，添加 icon 。
25 |
26 | > update 2020/12/12 添加了 Vue-note demo ，通过该案例可以学习到大部分 vue 的基本指令。
27 |
28 | # 🍻 待做
29 |
30 | * 天气查询 demo
31 | * 音乐播放 demo
32 |
33 | # 🍳 声明
34 |
35 | 该仓库所搜集的案例均来源于网络，仅供学习参考。起源是本人在学习 html/css/js 时发现的比较好看的项目，于是收集了起来，参考链接的 up 主大多也是搬运别人的，出处不详，如果侵犯到了您的权益，请联系我，我将立刻删除。
36 |
37 | [](mailto:jiewei314@gmail.com)
38 |
--------------------------------------------------------------------------------
/docs/demo-01/demo-01.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-01/demo-01.gif
--------------------------------------------------------------------------------
/docs/demo-01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 公众号：codestep
7 |
91 |
92 |
93 |
94 |
95 | codestep
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/docs/demo-02/icos/blog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-02/icos/blog.png
--------------------------------------------------------------------------------
/docs/demo-02/icos/icons8-github-64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-02/icos/icons8-github-64.png
--------------------------------------------------------------------------------
/docs/demo-02/icos/知乎.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-02/icos/知乎.png
--------------------------------------------------------------------------------
/docs/demo-02/icos/笔记本.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-02/icos/笔记本.png
--------------------------------------------------------------------------------
/docs/demo-02/icos/符号-代码.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-02/icos/符号-代码.png
--------------------------------------------------------------------------------
/docs/demo-02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | step
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Github
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Blog
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
知乎
32 |
33 |
34 |
35 |
36 |
37 |
38 |
笔记
39 |
40 |
12 |
13 |
14 |
15 |
16 |
Blog
17 |
18 |
19 |
20 |
21 |
22 |
知乎
23 |
24 |
25 |
26 |
27 |
28 |
笔记
29 |
30 |
31 |
32 |
33 |
34 |
Github
35 |
36 |
37 |
38 |
39 |
40 |
摘录
41 |
42 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/docs/demo-05/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | background: #000;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 | ul {
9 | height: 200px;
10 | display: flex;
11 | }
12 | li {
13 | width: 20px;
14 | height: 20px;
15 | border-radius: 10px;
16 | background: red;
17 | margin-right: 20px;
18 | list-style: none;
19 | }
20 | li:nth-child(1) {
21 | background: red;
22 | animation: love1 4s 0s infinite;
23 | }
24 |
25 | li:nth-child(2) {
26 | background: slateblue;
27 | animation: love2 4s 0.2s infinite;
28 | }
29 | li:nth-child(3) {
30 | background: #e74c3c;
31 | animation: love3 4s 0.4s infinite;
32 | }
33 | li:nth-child(4) {
34 | background: #2ecc71;
35 | animation: love4 4s 0.6s infinite;
36 | }
37 | li:nth-child(5) {
38 | background: #e84393;
39 | animation: love5 4s 0.8s infinite;
40 | }
41 | li:nth-child(6) {
42 | background: #2ecc71;
43 | animation: love4 4s 1s infinite;
44 | }
45 | li:nth-child(7) {
46 | background: #e74c3c;
47 | animation: love3 4s 1.2s infinite;
48 | }
49 | li:nth-child(8) {
50 | background: slateblue;
51 | animation: love2 4s 1.4s infinite;
52 | }
53 | li:nth-child(9) {
54 | background: red;
55 | animation: love1 4s 1.6s infinite;
56 | }
57 |
58 | @keyframes love1 {
59 | 30%,50% {
60 | height: 60px;
61 | transform: translateY(-30px);
62 | }
63 | 70%,100% {
64 | height: 0px;
65 | transform: translateY(0px);
66 | }
67 | }
68 |
69 | @keyframes love2 {
70 | 30%,50% {
71 | height: 125px;
72 | transform: translateY(-60px);
73 | }
74 | 70%,100% {
75 | height: 0px;
76 | transform: translateY(0px);
77 | }
78 | }
79 |
80 | @keyframes love3 {
81 | 30%, 50% {
82 | height: 160px;
83 | transform: translateY(-75px);
84 | }
85 | 70%, 100% {
86 | height: 0px;
87 | transform: translateY(0px);
88 | }
89 | }
90 |
91 | @keyframes love4 {
92 | 30%, 50% {
93 | height: 180px;
94 | transform: translateY(-60px);
95 | }
96 | 70%, 100% {
97 | height: 0px;
98 | transform: translateY(0px);
99 | }
100 | }
101 | @keyframes love5 {
102 | 30%, 50% {
103 | height: 200px;
104 | transform: translateY(-45px);
105 | }
106 | 70%, 100% {
107 | height: 0px;
108 | transform: translateY(0px);
109 | }
110 | }
--------------------------------------------------------------------------------
/docs/demo-06/demo-06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jieway/web-step/0ef2e938b34f512084ea4650fb23342932ea6cea/docs/demo-06/demo-06.png
--------------------------------------------------------------------------------
/docs/demo-06/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | demo-05
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 | Don't have account?
Sign up
20 |
21 |
22 |
10 |
SEND A MESSAGE
11 |
12 |
28 |
11 |
12 |
13 |
14 |
15 | {{ list }}
16 |
17 |
18 |
19 |
总数: {{ lists.length }}
20 |
21 |
22 |
23 |
12 |
13 |
14 |
15 |
16 |
demo-01
17 |
18 |
19 |
20 |
21 |
22 |
23 |
demo-03
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
demo-04
32 |
33 |
34 |
35 |
36 |
37 |
38 |
demo-05
39 |
40 |
41 |
42 |
43 |
44 |
45 |
demo-06
46 |
47 |
48 |
49 |
50 |
51 |
demo-07
52 |
53 |
54 |
55 |
56 |
57 |
demo-08
58 |
59 |
60 |
61 |
62 |
63 |
64 |
demo-09
65 |
66 |
67 |
68 |
69 |
70 |
71 |
vue 记事本
72 |
73 |
63 |
64 | {{ list }}
65 |
66 |
122 | {{ list }}
123 |
124 |
125 | ```
126 |
127 | 其中 `@click="remove(index)"` 表示鼠标点击后会触发 remove() 方法, index 则是要删除元素的下标 .
128 |
129 | 实现对应方法:
130 |
131 | ```js
132 | remove: function(index){
133 | this.lists.splice(index, 1);
134 | }
135 | ```
136 |
137 | ## 4.0 统计和清空
138 |
139 | 统计其实很简单,一个方法就行.
140 |
141 | ```html
142 | 总数: {{ lists.length }}
143 | ```
144 |
145 | 清空也很简单:
146 |
147 | ```html
148 |
149 | ```
150 |
151 | 方法实现:
152 |
153 | ```js
154 | del: function(){
155 | this.lists = [];
156 | }
157 | ```
158 |
159 | 如果元素为空,那么删除所有的标签将不显示.
160 |
161 | 添加 v-show 即可,该指令通过修改标签的 display 来实现标签的显示与隐藏.
162 |
163 | ```html
164 |
165 | ```
166 |
167 | v-if 也可实现该功能,但是由于直接操作 dom 元素导致消耗过大.
168 |
169 | v-if 如下:
170 |
171 | ```html
172 |
173 | ```
174 |
175 | ## 5.0 总结
176 |
177 | 没有 CSS 哈,所以比较丑,学习学习.
--------------------------------------------------------------------------------
/vue-study/1-note/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Note
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ list }}
16 |
17 |
18 |
19 |
总数: {{ lists.length }}
20 |
21 |
22 |
23 |
11 |
12 |
13 |
14 |
![]()
15 |
16 |