diff --git a/docs/.vitepress/sidebar/qianduanjinji.ts b/docs/.vitepress/sidebar/qianduanjinji.ts
index 09556ea3..5872a0c6 100644
--- a/docs/.vitepress/sidebar/qianduanjinji.ts
+++ b/docs/.vitepress/sidebar/qianduanjinji.ts
@@ -59,6 +59,12 @@ export default function qianduanjinjiSidebarGuide() {
{ text: 'Vue2 基础知识易错点', link: '/frame/vue/basics-knowledge' },
{ text: 'Vue2 入门实战项目：快餐系统', link: '/frame/vue/newcomer-project' },
{ text: 'Vue-CLI2 跨域请求 Demo（fetch、axios、proxyTable）', link: '/frame/vue/cross-domain-request' },
+ { text: 'Vue-CLI2 中的 Vue-Router 和 Vue-Resource 实战', link: '/frame/vue/router-resource' },
+ { text: 'Vue-CLI2 中的 render: h => h(App) 解析', link: '/frame/vue/render-app' },
+ { text: 'Vue2 生命周期的理解与应用', link: '/frame/vue/vue2-life-cycle' },
+ { text: 'Vue2 基础知识点（一）', link: '/frame/vue/vue2-basics-knowledge' },
+ { text: 'Vue-CLI2 入门 Demo 游戏', link: '/frame/vue/newcomer-game' },
+ { text: 'Vue2 父子组件动态传值', link: '/frame/vue/vue2-component-props' },
],
},
{
@@ -136,6 +142,7 @@ export default function qianduanjinjiSidebarGuide() {
{ text: '开发常用命令行', link: '/other/toolGuide/common-command-line' },
{ text: '脚手架及 CLI 工具使用', link: '/other/toolGuide/scaffold-cli' },
{ text: 'Web 服务器 live-server 的安装及使用', link: '/other/toolGuide/live-server' },
+ { text: '常用的 Markdown 语法格式来编写文章', link: '/other/toolGuide/markdown' },
// { text: 'VS Code 常用快捷键', link: '/other/toolGuide/' },
],
},
diff --git a/docs/posts/growth-record/frame/vue/newcomer-game.md b/docs/posts/growth-record/frame/vue/newcomer-game.md
new file mode 100644
index 00000000..286114e7
--- /dev/null
+++ b/docs/posts/growth-record/frame/vue/newcomer-game.md
@@ -0,0 +1,24 @@
+---
+title: Vue-CLI2 入门 Demo 游戏
+date: 2018-07-05 20:01:01
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue-CLI2 入门 Demo 游戏
+
+**第一次使用vue-cli2.x搭建一个小demo游戏。代码文件有很多注释信息，通俗易懂的使用这个脚手架搭建一个入门小项目哈。**
+
+## 介绍使用
+- 使用默认创建的脚手架；
+- 修改App.vue、HelloWorld.vue文件，assets文件夹添加了两张图片；
+- 然后编译运行；
+
+## 运行截图
+
+
+## 参考文献
+- Web前端网站教程-米斯特吴
+
+源码在我的GitHub上：[点击跳转](https://github.com/super456/vue-cli2.x-demo)
diff --git a/docs/posts/growth-record/frame/vue/render-app.md b/docs/posts/growth-record/frame/vue/render-app.md
new file mode 100644
index 00000000..1229e652
--- /dev/null
+++ b/docs/posts/growth-record/frame/vue/render-app.md
@@ -0,0 +1,86 @@
+---
+title: 'Vue-CLI2 中的 render: h => h(App) 解析'
+date: 2018-07-08 20:08:08
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue-CLI2 中的 render: h => h(App) 解析
+**对于这个，可能es6语法不熟的人很容易产生懵懂，因为我也不熟，所以记录一下，毕竟这也是个重要的知识点。**
+
+### （一）遇到的问题代码：
+```
+new Vue({
+ el: '#app',
+ router,//实例化，表示会使用
+ render: h => h(App)//vue2.0写法
+
+ //以下是vue1.0的写法
+ //components: { App },//注册组件信息
+ // template: ''//简写的模板调用组件的标签
+})
+
+```
+官方的解释很全面但是不是很容易理解：[createElement 参数](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5-data-%E5%AF%B9%E8%B1%A1)
+
+### （二）代码分解
+将`render: h => h(App)` 根据es6语法分解为：
+
+ `render: h => h(App);`
+===
+等价于
+
+`render: h => {return h(App);}`
+===
+等价于
+
+` render: function(h) { return h(App);}`
+===
+等价于
+` render: function(createElement) { return createElement(App); }`
+===
+
+### （三）解析一下这个vue2.0渲染过程：
+render函数用来渲染视图，也提供给`el`挂载，所以使用render函数就是为了页面显示出来。
+
+1.render 方法是一个函数，在接受传入的参数 h 函数后，返回 `h(App)` 的函数调用结果。
+
+2.在创建 vue 实例时，通过调用 render 方法来渲染实例页面的 DOM 结构。
+
+3.当vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，h 的实参是 createElement 函数，然后 createElement 会以 `App`为参数进行调用。
+
+### （四）写一个createElement函数的demo
+创建一个组件，使用createElement函数调用
+```
+
+
+
+
+
+ createElement方法应用
+
+
+
+
+ 下面会使用createElement方法创建DOM结点
+
+
+
+
+
+```
+运行结果是：
+
diff --git a/docs/posts/growth-record/frame/vue/router-resource.md b/docs/posts/growth-record/frame/vue/router-resource.md
new file mode 100644
index 00000000..199d523f
--- /dev/null
+++ b/docs/posts/growth-record/frame/vue/router-resource.md
@@ -0,0 +1,167 @@
+---
+title: Vue-CLI2 中的 Vue-Router 和 Vue-resource 实战
+date: 2018-07-09 20:04:01
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue-CLI2 中的 Vue-Router 和 Vue-Resource 实战
+**简单记录一下这两个插件的使用方法，写了一个demo，方便理解及应用。**
+### （一）安装vue-cli2.x脚手架
+如果还没安装的，或安装过程不熟的，可以参考这篇文章教程，写的很详细——[Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）](https://www.jianshu.com/p/1626b8643676/)，这个文章作者真的很用心，向他学习。
+
+### （二）安装vue-router和vue-resource插件
+如果在安装脚手架的时候安装了vue-router，可以直接跳转到安装vue-resource。
+如果不是的，可以使用命令：`cd <项目文件夹>` 切换到项目文件夹路径下，然后使用命令行安装：`npm install vue-router --save` 和`npm install vue-resource --save`
+
+这里说明一下安装`npm install 插件 +[参数]`，表示的意思：
+1.使用：`npm install 插件` ：会把这个插件安装到node_modules目录中，但不会修改package.json内容；
+
+2.`npm install 插件 --save` ：在项目发布上线之后还会依赖用到的插件，没有这个插件，项目不能正常的运行，自动更改package.json内容 ；
+
+3.`npm install 插件 --save-dev `：把插件安装到开发依赖中，项目上线之后不会用到的插件，针对个别插件，比如说这个“babel-loader”，是在项目编译解析完成后发布就没用到了的，自动更改package.json内容；
+
+### （三）使用vue-router+vue-resource写一个跳转请求页面数据的demo
+1.先看一下安装脚手架的时候安装的路由界面及配置：
+
+
+2.如果一开始没有的安装vue-router后自己手动安装的，可以参考这个main.js 和router文件夹的index.js配置的配置代码如下：
+main.js代码：
+```
+import Vue from 'vue'
+import App from './App'
+import router from './router'//引入路由指定文件
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+ el: '#app',
+ router,//实例化，表示会使用
+ render: h => h(App)//vue2.0写法
+
+ //以下是vue1.0的写法
+ //components: { App },//注册组件信息
+ // template: ''//简写的模板调用组件的标签
+})
+
+```
+如果对代码中的`render: h => h(App)//vue2.0写法` 不理解的可以查看我之前写的文章——[vue-cli2.x中的render: h => h(App)解析](https://blog.csdn.net/qq_35324453/article/details/80961128)
+
+router文件夹的index.js代码：
+```
+import Vue from 'vue'
+import Router from 'vue-router'//引入路由配置的模块
+import HelloWorld from '@/components/HelloWorld'//引入需要路由转址的路径
+import Home from '@/components/Home'//引入需要路由转址的路径
+import VueResource from 'vue-resource'//引入vue-resource插件http请求
+//下面这种方法引用也可以
+// import HelloWorld from '../components/HelloWorld'//引入需要路由转址的路径
+// import Home from '../components/Home'//引入需要路由转址的路径
+
+Vue.use(Router)//声明引用，全局使用
+Vue.use(VueResource)//声明引用，全局使用
+
+export default new Router({
+
+ // 注意当有多个路由的时候默认使用第一个路由地址
+ routes: [//注意routers是一个对象数组
+ {//需要跳转的组件需要import引进
+ path: '/',//路由的地址，此时表示根路径
+ name: 'HelloWorld',
+ component: HelloWorld
+ },
+ {//需要跳转的组件需要import引进
+ //路由的地址，此时表示根路径。注意第二个路由地址这里需要添加上组件名
+ path: '/Home',
+ name: 'Home',
+ component: Home
+ }
+ ],
+ mode:"history"//去掉url链接中的#符号
+})
+
+```
+3.添加一个组件Home.vue，添加位置如下：
+
+
+组件代码为：
+```
+
+
+
{{ msg }}
+ test
+
以下是获取http请求的数据内容
+
+ - {{user.id}}. {{user.name}}
+
+
+
+
+
+
+
{{test}}
',
+ data:{
+ test:'hello'
+ }
+ });
+ ```
+
+2. 如果使用vue-loader加载.vue文件时（组件文件），webpack在打包对模板进行了渲染，就需要Runtime版本。示例如下：
+
+ ```
+ new Vue({
+ el: '#app',
+ components: { App },
+ template: ''
+ })
+ ```
+
+从Compiler版本修改为Runtime版本。只需如示代码：
+
+
+添加一行代码：`'vue$': 'vue/dist/vue.esm.js'` ，然后重新运行编译就可以了
diff --git a/docs/posts/growth-record/frame/vue/vue2-basics-knowledge.md b/docs/posts/growth-record/frame/vue/vue2-basics-knowledge.md
new file mode 100644
index 00000000..c188e62f
--- /dev/null
+++ b/docs/posts/growth-record/frame/vue/vue2-basics-knowledge.md
@@ -0,0 +1,88 @@
+---
+title: Vue2 基础知识点（一）
+date: 2018-07-07 20:04:01
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue2 基础知识点（一）
+**本文针对自己学习官方文档时，总结一些易容易混淆的知识点做一下记录。欢迎指正或学习交流。**
+
+### （一）常用基础知识点
+
+1. `v-on:click=''`、`@click=''`、`:click=''` 三种写法；
+ 注意函数调用：直接使用双花括号调用函数是要使用函数名+括号，其他直接使用函数名即可，或使用函数名+括号（click 事件中）注意传参的函数必须带括号，可以不带参数，不然会报错对象空值；
+
+2. `v-if=''` 条件渲染与`v-show=''` 的区别：`v-if` 条件：不存在不会占位空间不会被渲染挂载；`v-show` 为真时，去掉 `display：none`，为假时显示`display：none`。默认会占用空间，会被渲染挂载。
+
+3. `v-for=''` 可以通过两组方式遍历数组（也可以遍历对象）：一种是通过数组下标；另一种是循环遍历；
+ `v-for='user in users' 或 v-for='(user,index) in users'` 第二个参数是数组索引值；
+
+```html
+v-for还可以渲染div
+
+
{{index+1}}
+ {{user.name}}---{{user.age}}
+
+
+v-for使用template标签，这个标签不像div一样会被渲染出来，只渲染template里面的标签
+
+ {{index+1}}
+ {{user.name}}---{{user.age}}
+
+
+遍历数组里面的对象，遍历两次
+
+
+
{{item}}---{{key}}
+
+
+```
+
+4. 数据双向绑定的两种方法：
+
+```html
+双向数据绑定ref/$refs示例：input/select/textarea
+
+
+
+您输入的名字为：{{name}}
+
+
+您输入的年龄为：{{age}}
+
+双向数据绑定v-model示例：input/select/textarea
+
+
+
+您输入的名字为：{{name}}
+
+
+您输入的年龄为：{{age}}
+ ```
+
+ js部分：
+```javascript
+new Vue({
+ el:'#vue-app',
+ data:{
+ name:'',
+ age:''
+ },
+ methods:{
+ logName:function(){
+ // console.log("您正在输入名字~");
+ // $refs获取标记的值，后面接命名值+value
+ // console.log(this.$refs.refName.value);
+ this.name=this.$refs.refName.value;
+ },
+ logAge:function(){
+ // console.log("您正在输入年龄~");
+ this.age=this.$refs.refAge.value;
+ }
+ }
+})
+```
+
+5. `computed` 和 `methods` 方法：只要methods方法之一被调用，其他所有方法都会被渲染执行，很耗费性能；计算属性，只会调用相应的方法体，是应用于搜索，调用比较多的方法体。
diff --git a/docs/posts/growth-record/frame/vue/vue2-component-props.md b/docs/posts/growth-record/frame/vue/vue2-component-props.md
new file mode 100644
index 00000000..384af26a
--- /dev/null
+++ b/docs/posts/growth-record/frame/vue/vue2-component-props.md
@@ -0,0 +1,91 @@
+---
+title: Vue2 父子组件动态传值
+date: 2018-06-26 20:02:02
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue2 父子组件动态传值
+**在学习 Vue2.x 的时候，遇到了一个问题，就是父子组件如何传递动态输入的值，文档介绍都是传递固定值的，比如我想传递一个刚输入的值呢，子组件如何显示？一下就是简单的代码：**
+
+注：本人使用的是官方的**脚手架**学习的，可以通过父级组件向子级组件传递动态输入的值。然后本人重写了一个测试页面，直接复制代码就可以运行的（看懂以下代码，父子组件传递原理也是一样的，此处以对象为例）：
+
+```html
+
+
+
+
+
+
+
+ 父组件向子组件动态传值示例
+
+
+
+
+
+
+
+
+
添加一个列表项：
+
+
+
显示输入框传递给子组件的添加内容（对象）：
+
+
+
+
+
+
+
+
+