From 2303ff6f8be793a91560dbf5dadf73bcde1dbd7e Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 23 Jun 2018 18:03:07 +0800 Subject: [PATCH] =?UTF-8?q?add=20Vue.js=202.x=EF=BC=9A=E5=AD=90=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=BB=99=E7=88=B6=E7=BB=84=E4=BB=B6=E4=BC=A0=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/01-Git的使用.md | 18 ++ ...{05-Vue组件.md => 05-Vue组件的定义和注册.md} | 9 +- 21-Vue基础/06-Vue组件之间的传值.md | 277 +++++++++++++++++- README.md | 4 +- 推荐链接-互联网相关.md | 9 + 推荐链接.md => 推荐链接-前端相关.md | 10 + 6 files changed, 312 insertions(+), 15 deletions(-) rename 21-Vue基础/{05-Vue组件.md => 05-Vue组件的定义和注册.md} (98%) create mode 100644 推荐链接-互联网相关.md rename 推荐链接.md => 推荐链接-前端相关.md (97%) diff --git a/00-前端工具/01-Git的使用.md b/00-前端工具/01-Git的使用.md index 73f126f..5ac1ed8 100644 --- a/00-前端工具/01-Git的使用.md +++ b/00-前端工具/01-Git的使用.md @@ -137,6 +137,24 @@ git cherry-pick commit1 ``` +## git客户端推荐 + +20180623时，网上看了下Git客户端的推荐排名： + +20180623_1210.png + + +### SmartGit + +商业用途收费， 个人用户免费： + +20180623_1305.png + + + + + + ## 推荐书籍 diff --git a/21-Vue基础/05-Vue组件.md b/21-Vue基础/05-Vue组件的定义和注册.md similarity index 98% rename from 21-Vue基础/05-Vue组件.md rename to 21-Vue基础/05-Vue组件的定义和注册.md index c710c8f..6dd9cf7 100644 --- a/21-Vue基础/05-Vue组件.md +++ b/21-Vue基础/05-Vue组件的定义和注册.md @@ -90,8 +90,13 @@ Vue.component('myComponent', myAccount); //第一个参数是组件的名称（ ``` +所以，为了避免名字不一致的问题，我们注册组件时，组件的名称可以直接写成`my-component`。比如：（避免驼峰不一致的建议写法） + +```javascript + Vue.component('my-component', myAccount); +``` + -`Vue.component('my')` **注意2**、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果： @@ -161,7 +166,7 @@ Vue.component('myComponent', myAccount); //第一个参数是组件的名称（ ![](http://img.smyhvae.com/20180422_2232.png) -### 写法三 +### 写法三【荐】 > 上面的写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。我们不妨来看看写法三。 diff --git a/21-Vue基础/06-Vue组件之间的传值.md b/21-Vue基础/06-Vue组件之间的传值.md index 7ea32c9..ba3b666 100644 --- a/21-Vue基础/06-Vue组件之间的传值.md +++ b/21-Vue基础/06-Vue组件之间的传值.md @@ -7,7 +7,7 @@ 需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。 -代码举例： +### 父组件向子组件传值的代码举例 ```html @@ -23,26 +23,27 @@
- - + +
+ + + +
+ + + +
+ + + + + + + + +``` + +效果如下：（点击子组件，触发了父组件的方法） + + + +根据上面的代码，我们可以总结出，父组件将方法传递给子组件，分为三步，具体可以看上方代码的注释。 + + + +## 子组件向父组件传值 + +上面的一段中，我们再看一遍**父组件将方法传递给子组件**的这段代码（一定要再看一遍，因为我们是要在此基础之上做修改）。 + +如果要实现**子组件向父组件传值**，代码是类似的，我们只需要在子组件通过`emit`触发父组件的方法时，把子组件的参数带出去就可以了。代码如下。 + +**代码举例1**：(将子组件中的常量传递给父组件) + +```html + + + + + + + + Document + + + + +
+ +
+ + + + + + + + + +``` + +运行结果：（点击`

`之后） + +20180623_1640.png + +**代码举例2**：（将子组件中的data数据传递给父组件，存放到父组件的data中） + +> 在上方代码的基础之上，做改进。 + + +```html + + + + + + + + Document + + + + +
+ +
+ + + + + + + + + +``` + + +运行结果：（点击`

`之后） + + +20180623_1655.png + + +## 案例：发表评论功能的实现 + + + + + + diff --git a/README.md b/README.md index 938a0a6..6a92d53 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ 前端入门和进阶学习笔记。从零开始学前端，做一个web全栈工程师。持续更新... -更多内容，请点开文件夹。 + +维护这个项目的初衷，可以看这篇文章：[裸辞两个月，海投一个月，从Android转战Web前端的求职之路](https://mp.weixin.qq.com/s/fr_NwtghRQagc_3ubk-hKQ) + 另外，欢迎关注本人的公众号「生命团队」，会分享一些技术之外的软技能（和代码完全无关）。公众号里的每篇文章，自认为写得还算用心。“全栈”不应该只是体现在技术上，而是全方位。 diff --git a/推荐链接-互联网相关.md b/推荐链接-互联网相关.md new file mode 100644 index 0000000..5d0fe40 --- /dev/null +++ b/推荐链接-互联网相关.md @@ -0,0 +1,9 @@ + + +### 2018-06-23 + + + + +- [王兴：今年移动互联网会非常惨烈，很多想象不到的公司都会死掉](http://www.ctoutiao.com/136601.html?from=timeline&isappinstalled=0) + diff --git a/推荐链接.md b/推荐链接-前端相关.md similarity index 97% rename from 推荐链接.md rename to 推荐链接-前端相关.md index edbc9df..d58170d 100644 --- a/推荐链接.md +++ b/推荐链接-前端相关.md @@ -159,5 +159,15 @@ +### 2018-06-23 + +- [技术的热门度曲线](http://www.ruanyifeng.com/blog/2017/03/gartner-hype-cycle.html) + + + + + + +