From 2c9259c8fdb71646edd07c7c25dc5bd0cded14e8 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 23 Jun 2018 11:31:04 +0800 Subject: [PATCH] =?UTF-8?q?add=20Vue.js=202.0=EF=BC=9Avue=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/03-Sublime Text在前端中的使用.md | 294 +-- 20-前端综合/2018年-前端日记.md | 8 +- 20-前端综合/前端开发积累.md | 28 + 21-Vue基础/02-Vue实例的生命周期函数.md | 384 +-- 21-Vue基础/04-Vue动画.md | 2302 +++++++++--------- 21-Vue基础/06-Vue组件之间的传值.md | 198 +- 21-Vue基础/Vue组件.md | 1236 +++++----- 7 files changed, 2242 insertions(+), 2208 deletions(-) create mode 100644 20-前端综合/前端开发积累.md diff --git a/00-前端工具/03-Sublime Text在前端中的使用.md b/00-前端工具/03-Sublime Text在前端中的使用.md index ea4a6d4..ef4e509 100644 --- a/00-前端工具/03-Sublime Text在前端中的使用.md +++ b/00-前端工具/03-Sublime Text在前端中的使用.md @@ -1,147 +1,147 @@ - - - - - - - - -### 新建文件时快速生成Html - -**安装如下插件：** - -- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。 -- CSS Format：css格式化。 -- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。 - -**开始使用：** - -新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键， - - -参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb) - - - -## 常用插件 - -### SublimeCodeIntel：JavaScript代码自动提示（不好用） - -安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。 - -将 - -``` -"codeintel_selected_catalogs": ["jQuery"] - -``` - -改为： - -``` -"codeintel_selected_catalogs": ["JavaScript"] -``` - -保存后重启软件。 - -参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756) - - -### javascript complet：JavaScript代码自动提示 - - -- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions) - -- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions) - -在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete) - - -### JsFormat：JS代码格式化 - - -快捷键是：选中JS代码，然后按ctrl+alt+f。 - -或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令 - - -### Sublime Server - -我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。 - -我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。 - -安装成功之后，使用步骤如下： - -（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。 - -（2）在html文档里，右键选择 "View in SublimeServer"。 - -如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。 - - - - -## 代码快速生成 - - -（1）`>`符号的技巧： - - -输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系） - -```html -
-
  • a
    • -
  • a
    • -
  • a
    • -
  • a
    • -
  • a
    • -
  • a
    • -
  • a
    • -
  • a
    • -
  • a
    • -
    - -``` - - - - - - -## sublime text 快捷键 - -| Win快捷键 | Mac快捷键 |作用 | 备注 | -|:-------------|:-------------|:-----|:-----| -|html:5+tab||html结构代码|| -|tab||补全标签代码|| -|tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`
    `。|| -| **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | | -| Ctrl+Shift+K || 快速删除整行 | | -|Ctrl+鼠标左键单击||集体输入|| -|Ctrl+H|Option+Cmd+F|查找替换||| -| Ctrl+/ || 注释单行 | | -| Ctrl+Shift+/ || 注释多行 | | -|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| | -|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 | -|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | | -|F11||全屏|| - - - - -## 推荐阅读 - - -- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md) - -我自己整理的。 - - -## 参考链接 - -- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/) - - - + + + + + + + + +### 新建文件时快速生成Html + +**安装如下插件：** + +- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。 +- CSS Format：css格式化。 +- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。 + +**开始使用：** + +新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键， + + +参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb) + + + +## 常用插件 + +### SublimeCodeIntel：JavaScript代码自动提示（不好用） + +安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。 + +将 + +``` +"codeintel_selected_catalogs": ["jQuery"] + +``` + +改为： + +``` +"codeintel_selected_catalogs": ["JavaScript"] +``` + +保存后重启软件。 + +参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756) + + +### javascript complet：JavaScript代码自动提示 + + +- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions) + +- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions) + +在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete) + + +### JsFormat：JS代码格式化 + + +快捷键是：选中JS代码，然后按ctrl+alt+f。 + +或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令 + + +### Sublime Server + +我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。 + +我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。 + +安装成功之后，使用步骤如下： + +（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。 + +（2）在html文档里，右键选择 "View in SublimeServer"。 + +如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。 + + + + +## 代码快速生成 + + +（1）`>`符号的技巧： + + +输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系） + +```html +
    +
  • a
    • +
  • a
    • +
  • a
    • +
  • a
    • +
  • a
    • +
  • a
    • +
  • a
    • +
  • a
    • +
  • a
    • +
    + +``` + + + + + + +## sublime text 快捷键 + +| Win快捷键 | Mac快捷键 |作用 | 备注 | +|:-------------|:-------------|:-----|:-----| +|html:5+tab||html结构代码|| +|tab||补全标签代码|| +|tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`
    `。|| +| **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | | +| Ctrl+Shift+K || 快速删除整行 | | +|Ctrl+鼠标左键单击||集体输入|| +|Ctrl+H|Option+Cmd+F|查找替换||| +| Ctrl+/ || 注释单行 | | +| Ctrl+Shift+/ || 注释多行 | | +|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| | +|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 | +|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | | +|F11||全屏|| + + + + +## 推荐阅读 + + +- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md) + +我自己整理的。 + + +## 参考链接 + +- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/) + + + diff --git a/20-前端综合/2018年-前端日记.md b/20-前端综合/2018年-前端日记.md index 00fd9de..cee448e 100644 --- a/20-前端综合/2018年-前端日记.md +++ b/20-前端综合/2018年-前端日记.md @@ -217,7 +217,6 @@ git cherry-pick myLog - **shadow-root**：下一代。 - ### 2018-06-07 - [原生js实现淡入淡出效果](https://www.teakki.com/p/57dfb44cd3a7507f975e91e4) @@ -232,6 +231,13 @@ git cherry-pick myLog - pv、uv的概念 +### 2018-06-21 + +- 今天学会了 iPhone上WebApp的真机调试，感觉很高端呀。具体可以看我在本文件夹中写的《前端开发积累》这篇文章。 + + + + diff --git a/20-前端综合/前端开发积累.md b/20-前端综合/前端开发积累.md new file mode 100644 index 0000000..1304496 --- /dev/null +++ b/20-前端综合/前端开发积累.md @@ -0,0 +1,28 @@ + + + + +## 移动端WebApp前端真机调试 + + +### iPhone/iOS借助Safari进行真机调试 + + +（1）手机端：设置 → Safari → 高级 → Web 检查器 → 开。 + +（2）mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。 + + +（3）在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。如下： + + +![](http://img.smyhvae.com/20180621_1900.png) + + + +参考链接： + +- [移动端前端开发真机调试攻略](https://juejin.im/entry/563ab66400b0bf37d79aa17d) + +- [iOS、Android 之类的如何调试 Web APP](https://segmentfault.com/q/1010000000124121) + diff --git a/21-Vue基础/02-Vue实例的生命周期函数.md b/21-Vue基础/02-Vue实例的生命周期函数.md index 4203c61..74051d2 100644 --- a/21-Vue基础/02-Vue实例的生命周期函数.md +++ b/21-Vue基础/02-Vue实例的生命周期函数.md @@ -1,192 +1,192 @@ - - - -## 介绍 - - - -- [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。 - - -- [生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已。 - -生命周期钩子 = 生命周期函数 = 生命周期事件。 - - -## 生命周期函数的主要分类 - -![](http://img.smyhvae.com/20180422_1650.png) - -根据上面这张图，我们把生命周期函数主要分为三类。 - - -### 1、创建期间的生命周期函数 - -- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 - -- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。 - -- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 - -- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示**真实DOM渲染完了，可以操作DOM了**） - - -**举例**： - - -```html - - - - - - Title - - - - - -
    -
    - - - - - -``` - -打印结果： - -![](http://img.smyhvae.com/20180610_1500.png) - -### 运行期间的生命周期函数 - -- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 - -- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。 - -PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。 - - -**举例**： - -```html - - - - - - Title - - - - - -
    - -

    {{ flag }}

    -
    - - - - - -``` - - -当我们点击按钮后，运行效果是： - -![](http://img.smyhvae.com/20180610_1528.png) - -可以看出： - -- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的 - -- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 - - - -### 3、销毁期间的生命周期函数 - -- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 - -- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 - -PS：可以在beforeDestory里**清除定时器、或清除事件绑定**。 - - -## 生命周期函数图解 - -![](http://img.smyhvae.com/20180610_2130.png) - -PS：图片来自网络。 - - - - - + + + +## 介绍 + + + +- [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。 + + +- [生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已。 + +生命周期钩子 = 生命周期函数 = 生命周期事件。 + + +## 生命周期函数的主要分类 + +![](http://img.smyhvae.com/20180422_1650.png) + +根据上面这张图，我们把生命周期函数主要分为三类。 + + +### 1、创建期间的生命周期函数 + +- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 + +- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。 + +- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 + +- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示**真实DOM渲染完了，可以操作DOM了**） + + +**举例**： + + +```html + + + + + + Title + + + + + +
    +
    + + + + + +``` + +打印结果： + +![](http://img.smyhvae.com/20180610_1500.png) + +### 运行期间的生命周期函数 + +- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 + +- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。 + +PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。 + + +**举例**： + +```html + + + + + + Title + + + + + +
    + +

    {{ flag }}

    +
    + + + + + +``` + + +当我们点击按钮后，运行效果是： + +![](http://img.smyhvae.com/20180610_1528.png) + +可以看出： + +- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的 + +- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 + + + +### 3、销毁期间的生命周期函数 + +- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 + +- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 + +PS：可以在beforeDestory里**清除定时器、或清除事件绑定**。 + + +## 生命周期函数图解 + +![](http://img.smyhvae.com/20180610_2130.png) + +PS：图片来自网络。 + + + + + diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md index 608228c..8292def 100644 --- a/21-Vue基础/04-Vue动画.md +++ b/21-Vue基础/04-Vue动画.md @@ -1,1151 +1,1151 @@ -04-Vue动画.md - - - -## 前言 - -动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。 - - -## 使用过渡类名实现动画 - -### 官方文档的截图 - -过渡类名如下： - -![](http://img.smyhvae.com/20180616_1555.png) - -动画进入： - -- v-enter：动画进入之前的**初始**状态 - -- v-enter-to：动画进入之后的**结束**状态 - -- v-enter-active：动画进入的时间段 - -PS：第一、第二个是时间点；第三个是时间段。 - -动画离开： - -- v-leave：动画离开之前的**初始**状态 - -- v-leave-to：动画离开之后的**结束**状态 - -- v-leave-active：动画离开的时间段 - -PS：第一、第二个是时间点；第三个是时间段。 - - -### 使用举例（通过Vue的过渡类名来实现） - -`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。 - -现在我们来做个例子：点击按钮时，让div显示/隐藏。 - -**1、引入**： - -如果我们不使用动画，应该是这样做： - - -```html - - - - - - - - Document - - - - -
    - - -

    这是一个H3

    -
    - - - - - -``` - - -**2、使用动画**：（通过Vue的过渡类名来实现） - -现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下： - -```html - - - - - - - - Document - - - - - - -
    - - - - - -

    这是一个H3

    -     -
    - - - - - - -``` - - -上方代码中，我们使用vue提供的``标签把需要被动画控制的元素，包裹起来；然后使用`.v-enter`、`.v-leave-to`等进行动画的定义。 - -运行效果如下： - -![](http://img.smyhvae.com/20180615_2200.gif) - - -**3、再加一个tramsform属性进行位移**： - - -我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下： - - - -```html - - - - - - - - Document - - - - - - -
    - - - - - -

    这是一个H3

    -     -
    - - - - - -``` - - -效果如下： - -![](http://img.smyhvae.com/20180615_2205.gif) - -### 修改过渡类名的前缀 - -在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。 - -那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如： - -第一步：（自定义别名） - -```html - -
    这是一个H6
    -     -``` - -上方代码中，我们加了`name="my"`。 - -第二步：（我们就可以使用 `my-enter`、`.my-leave-to`这些类名了） - -```css - .my-enter, - .my-leave-to { - opacity: 0; - transform: translateY(70px); - } - -``` - - -完整代码举例如下； - - -```html - - - - - - - - Document - - - - - -
    - - - - - -

    这是一个H3

    -     - -
    - - - - - - - -
    这是一个H6
    -     -
    - - - - - -``` - -运行效果如下： - -![](http://img.smyhvae.com/20180616_1513.gif) - -## 使用第三方animate.css类库实现动画 - -animate.css网址： - -- 官方网站： - - -**代码举例**： - -下面的代码中，我们使用animate.css提供的`bounceIn`、`bounceOut`这两个类来做入场、离场的动画。代码如下： - -```html - - - - - - - - Document - - - - - - -
    - - - -

    这是一个H3

    -     - -
    - - - - - -``` - - - -上面的代码中，注意： - -注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。 - -注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到`

    `标签里，效果是一样的，如下： - -```html - - -

    这是一个H3

    -     - -``` - - -运行效果如下： - -![](http://img.smyhvae.com/20180616_1538.gif) - -**改进1**：（统一设置入场、出场动画的持续时间） - -我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用`:duration`来做。如下： - - -```html - - - -

    这是一个H3

    -     -``` - - -**改进2**：（分别设置入场、出场动画的持续时间） - -```html - - - -

    这是一个H3

    -     -``` - - -## 钩子函数实现半场动画 - -只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。 - - -半场动画，可以使用钩子函数来实现。 - - -### 动画的钩子函数介绍 - -可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期） - -```html - - - -``` - - -我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。 - -如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。 - -### 举例：使用钩子函数模拟小球半场动画 - -现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下： - -```html - - - - - - - - Document - - - - - -
    - - - -
    -     -
    - - - - - - -``` - - -运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果） - -![](http://img.smyhvae.com/20180616_1618.gif) - -上面的代码中，有两个地方要注意： - - -**注意1**： - -`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来： - -![](http://img.smyhvae.com/20180616_1620.gif) - -当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。 - - -**注意2**： - -`enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数： - -![](http://img.smyhvae.com/20180616_2145.gif) - -Vue官方文档的解释是这样： - - - > 当只用 JavaScript 过渡的时候，在`enter`和`leave`中必须使用`done`进行回调。否则，它们将被同步调用，过渡会立即完成。 - - - - -## 使用transition-group元素实现列表动画 - -现在的场景是：在一个`
      `列表中，如果我想给**指定的某个**`li`添加动画效果，该怎么做呢？（需要声明的是，这些`li`是用v-for循环进行遍历的） - -如果我们用``把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。 - -那该怎么做呢？这里我们就可以用`transition-group`进行包裹。 - -**代码举例1**：点击添加按钮后，给新增的 item 加个动画 - -```html - - - - - - - - Document - - - - - -
      - -
      - - - - - -
      - - - - - -
    • - {{item.id}} --- {{item.name}} -
      • -       - - -
      - - - - - -``` - -运行效果如下： - -![](http://img.smyhvae.com/20180616_2240.gif) - - -**改进1**：添加删除item的功能 - -基于上面的代码，我们来添加**删除item**的功能，代码本应该是这样写： - - -```html - - - - - - - - Document - - - - - -
      - -
      - - - - - -
      - - - - - -
    • - {{item.id}} --- {{item.name}} -
      • -       - - -
      - - - - - - -``` - -运行效果如下： - -![](http://img.smyhvae.com/20180617_1555.gif) - -**改进2:**： - -上图中，我们发现，当我删除第2个item时，**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方，我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终，完整版代码如下： - -```html - - - - - - - - Document - - - - - -
      - -
      - - - - - -
      - - - - - -
    • - {{item.id}} --- {{item.name}} -
      • -       - - -
      - - - - - -``` - -运行效果如下： - -![](http://img.smyhvae.com/20180617_1556.gif) - -### transition-group中appear和tag属性的作用 - -我们可以在上面的代码基础之上，给transition-group加上`appear`属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有**淡入效果**。 - -```html - - - - - - - - Document - - - - - -
      - -
      - - - - - -
      - -
        - - - - - -
      • - {{item.id}} --- {{item.name}} -
        • -         -
      - -
      - - - - - -``` - -![](http://img.smyhvae.com/20180617_1600.gif) - -**改进**：`transition-group`的`tag`属性 - -上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层``： - -![](http://img.smyhvae.com/20180617_1620.png) - -这个``虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过`tag`属性给`transition-group`包谷的元素套上一层`
        `，然后把现有的`
          `注释掉，就可以了。最终代码如下： - -```html - - - - - - - - Document - - - - - -
          - -
          - - - - - -
          - - - - - - - -
        • - {{item.id}} --- {{item.name}} -
          • -           - - -
          - - - - - -``` - -这样的话，审查元素的效果如下： - -![](http://img.smyhvae.com/20180617_1621.png) - +04-Vue动画.md + + + +## 前言 + +动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。 + + +## 使用过渡类名实现动画 + +### 官方文档的截图 + +过渡类名如下： + +![](http://img.smyhvae.com/20180616_1555.png) + +动画进入： + +- v-enter：动画进入之前的**初始**状态 + +- v-enter-to：动画进入之后的**结束**状态 + +- v-enter-active：动画进入的时间段 + +PS：第一、第二个是时间点；第三个是时间段。 + +动画离开： + +- v-leave：动画离开之前的**初始**状态 + +- v-leave-to：动画离开之后的**结束**状态 + +- v-leave-active：动画离开的时间段 + +PS：第一、第二个是时间点；第三个是时间段。 + + +### 使用举例（通过Vue的过渡类名来实现） + +`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。 + +现在我们来做个例子：点击按钮时，让div显示/隐藏。 + +**1、引入**： + +如果我们不使用动画，应该是这样做： + + +```html + + + + + + + + Document + + + + +
          + + +

          这是一个H3

          +
          + + + + + +``` + + +**2、使用动画**：（通过Vue的过渡类名来实现） + +现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下： + +```html + + + + + + + + Document + + + + + + +
          + + + + + +

          这是一个H3

          +           +
          + + + + + + +``` + + +上方代码中，我们使用vue提供的``标签把需要被动画控制的元素，包裹起来；然后使用`.v-enter`、`.v-leave-to`等进行动画的定义。 + +运行效果如下： + +![](http://img.smyhvae.com/20180615_2200.gif) + + +**3、再加一个tramsform属性进行位移**： + + +我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下： + + + +```html + + + + + + + + Document + + + + + + +
          + + + + + +

          这是一个H3

          +           +
          + + + + + +``` + + +效果如下： + +![](http://img.smyhvae.com/20180615_2205.gif) + +### 修改过渡类名的前缀 + +在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。 + +那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如： + +第一步：（自定义别名） + +```html + +
          这是一个H6
          +           +``` + +上方代码中，我们加了`name="my"`。 + +第二步：（我们就可以使用 `my-enter`、`.my-leave-to`这些类名了） + +```css + .my-enter, + .my-leave-to { + opacity: 0; + transform: translateY(70px); + } + +``` + + +完整代码举例如下； + + +```html + + + + + + + + Document + + + + + +
          + + + + + +

          这是一个H3

          +           + +
          + + + + + + + +
          这是一个H6
          +           +
          + + + + + +``` + +运行效果如下： + +![](http://img.smyhvae.com/20180616_1513.gif) + +## 使用第三方animate.css类库实现动画 + +animate.css网址： + +- 官方网站： + + +**代码举例**： + +下面的代码中，我们使用animate.css提供的`bounceIn`、`bounceOut`这两个类来做入场、离场的动画。代码如下： + +```html + + + + + + + + Document + + + + + + +
          + + + +

          这是一个H3

          +           + +
          + + + + + +``` + + + +上面的代码中，注意： + +注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。 + +注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到`

          `标签里，效果是一样的，如下： + +```html + + +

          这是一个H3

          +           + +``` + + +运行效果如下： + +![](http://img.smyhvae.com/20180616_1538.gif) + +**改进1**：（统一设置入场、出场动画的持续时间） + +我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用`:duration`来做。如下： + + +```html + + + +

          这是一个H3

          +           +``` + + +**改进2**：（分别设置入场、出场动画的持续时间） + +```html + + + +

          这是一个H3

          +           +``` + + +## 钩子函数实现半场动画 + +只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。 + + +半场动画，可以使用钩子函数来实现。 + + +### 动画的钩子函数介绍 + +可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期） + +```html + + + +``` + + +我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。 + +如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。 + +### 举例：使用钩子函数模拟小球半场动画 + +现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下： + +```html + + + + + + + + Document + + + + + +
          + + + +
          +           +
          + + + + + + +``` + + +运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果） + +![](http://img.smyhvae.com/20180616_1618.gif) + +上面的代码中，有两个地方要注意： + + +**注意1**： + +`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来： + +![](http://img.smyhvae.com/20180616_1620.gif) + +当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。 + + +**注意2**： + +`enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数： + +![](http://img.smyhvae.com/20180616_2145.gif) + +Vue官方文档的解释是这样： + + + > 当只用 JavaScript 过渡的时候，在`enter`和`leave`中必须使用`done`进行回调。否则，它们将被同步调用，过渡会立即完成。 + + + + +## 使用transition-group元素实现列表动画 + +现在的场景是：在一个`
            `列表中，如果我想给**指定的某个**`li`添加动画效果，该怎么做呢？（需要声明的是，这些`li`是用v-for循环进行遍历的） + +如果我们用``把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。 + +那该怎么做呢？这里我们就可以用`transition-group`进行包裹。 + +**代码举例1**：点击添加按钮后，给新增的 item 加个动画 + +```html + + + + + + + + Document + + + + + +
            + +
            + + + + + +
            + + + + + +
          • + {{item.id}} --- {{item.name}} +
            • +             + + +
            + + + + + +``` + +运行效果如下： + +![](http://img.smyhvae.com/20180616_2240.gif) + + +**改进1**：添加删除item的功能 + +基于上面的代码，我们来添加**删除item**的功能，代码本应该是这样写： + + +```html + + + + + + + + Document + + + + + +
            + +
            + + + + + +
            + + + + + +
          • + {{item.id}} --- {{item.name}} +
            • +             + + +
            + + + + + + +``` + +运行效果如下： + +![](http://img.smyhvae.com/20180617_1555.gif) + +**改进2:**： + +上图中，我们发现，当我删除第2个item时，**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方，我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终，完整版代码如下： + +```html + + + + + + + + Document + + + + + +
            + +
            + + + + + +
            + + + + + +
          • + {{item.id}} --- {{item.name}} +
            • +             + + +
            + + + + + +``` + +运行效果如下： + +![](http://img.smyhvae.com/20180617_1556.gif) + +### transition-group中appear和tag属性的作用 + +我们可以在上面的代码基础之上，给transition-group加上`appear`属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有**淡入效果**。 + +```html + + + + + + + + Document + + + + + +
            + +
            + + + + + +
            + +
              + + + + + +
            • + {{item.id}} --- {{item.name}} +
              • +               +
            + +
            + + + + + +``` + +![](http://img.smyhvae.com/20180617_1600.gif) + +**改进**：`transition-group`的`tag`属性 + +上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层``： + +![](http://img.smyhvae.com/20180617_1620.png) + +这个``虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过`tag`属性给`transition-group`包谷的元素套上一层`
              `，然后把现有的`
                `注释掉，就可以了。最终代码如下： + +```html + + + + + + + + Document + + + + + +
                + +
                + + + + + +
                + + + + + + + +
              • + {{item.id}} --- {{item.name}} +
                • +                 + + +
                + + + + + +``` + +这样的话，审查元素的效果如下： + +![](http://img.smyhvae.com/20180617_1621.png) + diff --git a/21-Vue基础/06-Vue组件之间的传值.md b/21-Vue基础/06-Vue组件之间的传值.md index 6014489..7ea32c9 100644 --- a/21-Vue基础/06-Vue组件之间的传值.md +++ b/21-Vue基础/06-Vue组件之间的传值.md @@ -1,99 +1,99 @@ - - -## 父组件向子组件传值 - - -我们可以这样理解：Vue实例就是一个**父组件**，而我们自定义的组件（包括全局组件、私有组件）就是**子组件**。 - -需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。 - -代码举例： - -```html - - - - - - - - Document - - - - -
                - - -
                - - - - - - - - -``` - - -效果如下： - -20180618_2350.png - -代码截图如下： - -20180618_2355.png - - -**父组件给字组件传值的步骤**： - -> 根据上方截图，我们可以总结出父组件给子组件传值的步骤。 - -子组件中，data中的数据和props中的数据的区别： - -- - - -- data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。 - - - - - + + +## 父组件向子组件传值 + + +我们可以这样理解：Vue实例就是一个**父组件**，而我们自定义的组件（包括全局组件、私有组件）就是**子组件**。 + +需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。 + +代码举例： + +```html + + + + + + + + Document + + + + +
                + + +
                + + + + + + + + +``` + + +效果如下： + +20180618_2350.png + +代码截图如下： + +20180618_2355.png + + +**父组件给字组件传值的步骤**： + +> 根据上方截图，我们可以总结出父组件给子组件传值的步骤。 + +子组件中，data中的数据和props中的数据的区别： + +- + + +- data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。 + + + + + diff --git a/21-Vue基础/Vue组件.md b/21-Vue基础/Vue组件.md index a648996..efdfa8d 100644 --- a/21-Vue基础/Vue组件.md +++ b/21-Vue基础/Vue组件.md @@ -1,618 +1,618 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -## 子组件的定义和注册 - -我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。 - -### 在父组件中定义子组件 - -比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个晓得模块就可以定义为子组件。 - -需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。 - -```html - - - - - - - - Document - - - - - -
                - - - -
                - - - - - -``` - -我们发现，既然是定义父亲``的子组件，那么，子组件``的调用，只能写在父组件``的`template`模板中。 - -显示效果： - -![](http://img.smyhvae.com/20180423_1029.png) - - -### 在 Vue 根实例中定义子组件 - -当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下： - -```html - - - - - - - - Document - - - - - -
                - -
                - - - - - - -``` - -这样写的话，我们定义的子组件``在整个`#app`区域，都是可以使用的。 - -上面的代码，还有**另外一种写法**：（把子组件的模板定义，存放到变量中）【重要】 - -```html - - - - - - - - Document - - - - - -
                - -
                - - - - - -``` - -注意，在定义子组件时，关键字`components`不要写错了。 - -## 组件之间的动态切换（暂略） - -我们可以利用` `标签的`:is`参数来进行组件之间的切换。 - -## 父组件向子组件传递数据 - -我们要记住：父组件通过**属性**的形式，向子组件传递数据。 - -**引入**： - -我们先来看这样一段代码： - -```html - - - - - - - - Document - - - - - -
                - - - -
                - - - - - - - -``` - -上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的： - -![](http://img.smyhvae.com/20180424_1520.png) - -**1、父组件传值给子组件**： - -要通过 props 属性将number进行传递给子组件才可以。代码如下： - -```html - - - - - - - - Document - - - - - -
                - - - -
                - - - - - - -``` - -在``标签中，要注意`:number`里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串： - -![](http://img.smyhvae.com/20180424_1530.png) - -**2、子组件获取了父组件的数据后，进行求和操作**： - -上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。 - -一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据） - -```javascript - var myCounter = { - //这里是子组件的范围 - props: ['number'], //通过 props 属性将父亲的数据传递给子组件 - template: '
                我是子组件。{{number}}
                ', - methods: { - addClick: function () { - this.number ++; //这种写法不推荐。不建议直接操作父组件中的数据 - } - - } - } -``` - -上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错： - -img.png - -这样涉及到**单向数据流**的概念： - -- 父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。 - -既然如此，我可以把父组件中的数据，在子组件中创建**副本**，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下： - -```html - - - - - - - - Document - - - - - -
                - - - -
                - - - - - - - -``` - -## 子组件向父组件传值 - -我们要记住：子组件通过**事件触发**的形式，向父组件传值。 - - - - -**案例1:**子组件给父组件传递数据 - -```html - - - - - - - - Document - - - - - -
                - - -
                - - - - - - -``` - - -**案例2**：获取子组件的DOM对象 - -题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。 - -步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下： - -```html - - - - - - - - Document - - - - - -
                - - -
                - - - - - -``` - -步骤（2）：两个子组件的数值加 1 后，通知父组件。代码如下： - -```html - - - - - - - - Document - - - - - -
                - - - -
                - - - - - - -``` - -上方代码中，通过关键字`emit`通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行`myMethod()`方法（这个方法是在Vue实例中定义的，很好理解） - -步骤（3）：在父组件中求和 - -既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的`myMethod()`里定义求和的方法即可。 - -```html - - - - - - - - Document - - - - - -
                - - - -
                {{totalData}}
                -
                - - - - - - -``` - -代码的关键： - -- 在``标签中，通过 `ref = "xxx"`属性，给各个组件起一个别名，代表组件的引用 - -- 在父函数`myMethod()`中，通过`this.$refs.xxx`获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性） - -![](http://img.smyhvae.com/20180424_1455.png) - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +## 子组件的定义和注册 + +我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。 + +### 在父组件中定义子组件 + +比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个晓得模块就可以定义为子组件。 + +需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。 + +```html + + + + + + + + Document + + + + + +
                + + + +
                + + + + + +``` + +我们发现，既然是定义父亲``的子组件，那么，子组件``的调用，只能写在父组件``的`template`模板中。 + +显示效果： + +![](http://img.smyhvae.com/20180423_1029.png) + + +### 在 Vue 根实例中定义子组件 + +当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下： + +```html + + + + + + + + Document + + + + + +
                + +
                + + + + + + +``` + +这样写的话，我们定义的子组件``在整个`#app`区域，都是可以使用的。 + +上面的代码，还有**另外一种写法**：（把子组件的模板定义，存放到变量中）【重要】 + +```html + + + + + + + + Document + + + + + +
                + +
                + + + + + +``` + +注意，在定义子组件时，关键字`components`不要写错了。 + +## 组件之间的动态切换（暂略） + +我们可以利用` `标签的`:is`参数来进行组件之间的切换。 + +## 父组件向子组件传递数据 + +我们要记住：父组件通过**属性**的形式，向子组件传递数据。 + +**引入**： + +我们先来看这样一段代码： + +```html + + + + + + + + Document + + + + + +
                + + + +
                + + + + + + + +``` + +上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的： + +![](http://img.smyhvae.com/20180424_1520.png) + +**1、父组件传值给子组件**： + +要通过 props 属性将number进行传递给子组件才可以。代码如下： + +```html + + + + + + + + Document + + + + + +
                + + + +
                + + + + + + +``` + +在``标签中，要注意`:number`里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串： + +![](http://img.smyhvae.com/20180424_1530.png) + +**2、子组件获取了父组件的数据后，进行求和操作**： + +上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。 + +一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据） + +```javascript + var myCounter = { + //这里是子组件的范围 + props: ['number'], //通过 props 属性将父亲的数据传递给子组件 + template: '
                我是子组件。{{number}}
                ', + methods: { + addClick: function () { + this.number ++; //这种写法不推荐。不建议直接操作父组件中的数据 + } + + } + } +``` + +上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错： + +img.png + +这样涉及到**单向数据流**的概念： + +- 父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。 + +既然如此，我可以把父组件中的数据，在子组件中创建**副本**，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下： + +```html + + + + + + + + Document + + + + + +
                + + + +
                + + + + + + + +``` + +## 子组件向父组件传值 + +我们要记住：子组件通过**事件触发**的形式，向父组件传值。 + + + + +**案例1:**子组件给父组件传递数据 + +```html + + + + + + + + Document + + + + + +
                + + +
                + + + + + + +``` + + +**案例2**：获取子组件的DOM对象 + +题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。 + +步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下： + +```html + + + + + + + + Document + + + + + +
                + + +
                + + + + + +``` + +步骤（2）：两个子组件的数值加 1 后，通知父组件。代码如下： + +```html + + + + + + + + Document + + + + + +
                + + + +
                + + + + + + +``` + +上方代码中，通过关键字`emit`通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行`myMethod()`方法（这个方法是在Vue实例中定义的，很好理解） + +步骤（3）：在父组件中求和 + +既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的`myMethod()`里定义求和的方法即可。 + +```html + + + + + + + + Document + + + + + +
                + + + +
                {{totalData}}
                +
                + + + + + + +``` + +代码的关键： + +- 在``标签中，通过 `ref = "xxx"`属性，给各个组件起一个别名，代表组件的引用 + +- 在父函数`myMethod()`中，通过`this.$refs.xxx`获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性） + +![](http://img.smyhvae.com/20180424_1455.png) + + +