├── .gitignore
├── README.md
├── cover.jpg
├── keys
└── 1.md
└── todos.html
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/*
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HelloVue-todo-tutorial
2 |
3 | 
4 |
HelloVue-todo-tutorial
5 | 写给小白的 Vue.js 入门级教程。
6 | 每周五连载更新，基于 Vue2.x，带你从零开始一步步开发一个待办事项应用。
7 |
8 |
9 |
10 | 
11 | 
12 | 
13 |
14 |
15 | ## 教程食用方式
16 |
17 | 本教程完全面向新人，非常易于食用和消化。教程连贯性较强，每一篇教程都是对前面内容的延伸和拓展，所以建议从头学到尾，达到循序渐进的效果。
18 |
19 | 每一步关键功能的开发都对应一篇详细的教程，并和历史提交（commit）以及标签（tag）一一对应。例如第一篇教程对应第一个 commit，对应标签为 step1，依次类推。
20 |
21 | 单篇教程结束时可能会留有练习，旨在利用教程中学到的和 Vue 官方文档中提及的知识点，增强我们开发的待办事项应用的功能，达到学以致用的目的。练习的代码不会包含在示例项目的源代码中，而是以文字解答的方式给出，请参考下方的教程目录索引。强烈建议学习时先通过独立思考完成练习，遇到困难时再参考标准解答。此外，参考解答也不一定是最优实现方案，如果你有更好的解决方案，欢迎提 issue 一起讨论。
22 |
23 | 本教程中的项目只需要一个文本编辑器和浏览器就可以上手开发，无需配置任何环境，因此强烈建议边学边动手实践，这样才能加深理解。
24 |
25 | ## 资源列表
26 |
27 | 更新中...
28 |
29 | ## 教程目录索引
30 |
31 | **教程**
32 |
33 | [第 1 篇：很高兴认识你 Vue.js](https://mp.weixin.qq.com/s/XdATD4-dabmjvaGf5dJxcw)
34 |
35 | **练习参考解答**
36 |
37 | [第 1 篇：很高兴认识你 Vue.js练习参考解答](./keys/1.md)
38 |
39 | ## 公众号
40 |
41 | 
42 | 欢迎关注 HelloGitHub 公众号，获取更多开源项目的资料和内容。
43 |
44 |
45 | ## 版权声明
46 |
47 | 
本作品采用署名-非商业性使用-禁止演绎 4.0 国际 进行许可。
--------------------------------------------------------------------------------
/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HelloGitHub-Team/HelloVue-todo-tutorial/520873c6cccc72e02482c83f370c8b58510060bd/cover.jpg
--------------------------------------------------------------------------------
/keys/1.md:
--------------------------------------------------------------------------------
1 | ## 第 1 篇：很高兴认识你 Vue.js
2 |
3 | ## 练习一
4 |
5 | 需在 send 方法中做判断，当用户点击发送按钮，检测到 input 中没有输入任何值时，直接弹框提示并返回，只有有值才执行后续逻辑，示例代码如下：
6 |
7 | ```javascript
8 | methods: {
9 | send: function () {
10 | if (!this.count) {
11 | alert('请输入内容！');
12 | return
13 | }
14 | alert('发送成功！');
15 | this.value = ''
16 | }
17 | },
18 | ```
19 |
20 | ## 练习二
21 |
22 | 参考官方文档我们可以看到 v-if 指令用于条件渲染元素，仅当 v-if 后面的表达式为真时，元素才被渲染，因此参考代码如下：
23 |
24 | ```javascript
25 | value 的值是：{{ value }}
26 | ```
27 |
28 | 注意这里 count 是我们定义的计算属性，其值为 value 的长度，正好作为 v-if 的逻辑表达式，仅当 value 有值时，count 才非零（视为真），否则 count 为零（视为假，div 不被渲染）。
--------------------------------------------------------------------------------
/todos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | HelloVue Todo Tutorial
6 |
11 |
12 |
13 |
14 |
17 |
18 |
value 的值是：{{ value }}
19 |
20 |
字数：{{ count }}
21 |