diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md index 9de387d..f2834df 100644 --- a/00-前端工具/03-VS Code.md +++ b/00-前端工具/03-VS Code.md @@ -12,6 +12,11 @@ +### 在新的窗口中打开文件 + +```json +"workbench.editor.enablePreview": false, +``` ## 常用插件 @@ -105,14 +110,26 @@ Sass 文件格式化。 ## 常用快捷键 + +| Win快捷键 |Mac快捷键| 作用 | 备注 | +|:-------------|:-------------|:-----|:-----| +| Shift + Alt + F |Shift + option + F| 代码格式化 | | +| Ctrl + Shift + N | |在当前行上面增加一行并跳至该行 | | +| **Ctrl + Shift + D** | |复制当前行到下一行 | | + + + + + + ### 代码格式化 -Shift + Alt + F + ### 如何同时打开多个窗口 -Ctrl + Shift + N + diff --git a/21-Vue基础/03-Vue的生命周期函数.md b/21-Vue基础/03-Vue的生命周期函数.md index 8b2404e..1953fb0 100644 --- a/21-Vue基础/03-Vue的生命周期函数.md +++ b/21-Vue基础/03-Vue的生命周期函数.md @@ -1,56 +1,56 @@ - - - -## Vue 2.0的生命周期函数 - -![](http://img.smyhvae.com/20180422_1650.png) - -```html - - - - - - Title - - - - - -
-
- - - - - -``` - -打印结果： - -![](http://img.smyhvae.com/20180420_2302.png) - - + + + +## Vue 2.0的生命周期函数 + +![](http://img.smyhvae.com/20180422_1650.png) + +```html + + + + + + Title + + + + + +
+
+ + + + + +``` + +打印结果： + +![](http://img.smyhvae.com/20180420_2302.png) + + diff --git a/21-Vue基础/04-Vue组件.md b/21-Vue基础/04-Vue组件.md index 2d31bde..8338453 100644 --- a/21-Vue基础/04-Vue组件.md +++ b/21-Vue基础/04-Vue组件.md @@ -1,12 +1,13 @@ -## 前言 -组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 ## 组件的定义和注册 +组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 + + ### 写法一 写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。 @@ -36,7 +37,7 @@ template: '

登录页面

注册页面

' // template 是 Vue 中的关键字，不能改。 }); //第二步：注册组件 - Vue.component('account', myAccount); + Vue.component('account', myAccount); //第一个参数是标签名，第二个参数是组件的定义 new Vue({ el: '#app' @@ -51,17 +52,17 @@ 运行结果如下： -20180422_2230.png +![](http://img.smyhvae.com/20180422_2230.png) 代码截图如下： -20180422_2223.png +![](http://img.smyhvae.com/20180422_2223.png) 上图中，注意两点： 1、红框部分，要保证二者的名字是一致的。 -2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果： +2、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果： ``` template: '

登录页面

注册页面

' @@ -69,8 +70,7 @@ 结果如下：（并非预期的效果） -20180422_2232.png - +![](http://img.smyhvae.com/20180422_2232.png) ### 写法二 @@ -98,9 +98,9 @@ + + + + + + +
+ +
+ + + + + + +``` + + +上方代码所示，我们在`account`组件中添加的data 和 method，其**作用域**只限于`account`组件里，保证独立性。 + +注意，在为组件添加数据时，data不再是对象了，而是方法，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。 + + +## 子组件的定义和注册 + + +我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。 + +比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个模块可以定义为子组件。 + + +需要注意的是，我们在父组件中定义的子组件，只能在当前父组件中使用；在其他的组件，甚至根组件中，都无法使用。 + + +```html + + + + + + + + Document + + + + + +
+ + + +
+ + + + + +``` + +显示效果： + +20180423_1029.png + +## 组件之间的动态切换 + +我们可以利用` `标签的`:is`参数来进行组件之间的切换。 + + + + + + + diff --git a/21-Vue基础/20180423.md b/21-Vue基础/20180423.md new file mode 100644 index 0000000..2bcbeae --- /dev/null +++ b/21-Vue基础/20180423.md @@ -0,0 +1,5 @@ + + +自定义组件中，第一个参数是标签名，第二个参数是组件的定义。 + +