从零开始构建一个Vue项目
环境准备：
- 安装node
- 安装npm(一般node默认自带安装了npm)
- 验证是否安装成功
- 喜欢用yarn的，安装yarn
npm install -g yarn
- 安装git
1.安装vue-cli
npm install -g @vue/cli
OR
yarn global add @vue/cli
卸载方法：npm uninstall @vue/cli -g
验证是否安装好 vue -V
2.创建一个vue项目
vue create zgz-vue-app
安装成功后，切换到项目目录下，输入npm run serve启动项目。
如何使用Vue-router？
- 安装
1.1通过npm安装 npm install vue-router@3.0.6 --save
1.2通过vue-cli插件形式安装 vue add router
动态路由的使用
其中params参数位于前缀位置，并归类为路由参数；而query参数则位于路径后端，并与location中的search字段相对应。通常情况下，默认情况下params会通过name属性进行传递；对于query部分，则可以通过path属性或者name属性来实现。
示例：
显示用户信息页面
- 在src/router/index.js里面添加路由
如图所示是动态路由的复杂匹配机制，在该模式中name参数必不可少。其中age和sex为可选的参数
- 添加用户信息组件
- 在地址栏输入用户信息，效果如图
嵌套路由
- 在src/router/index.js下新建路由配置，配置如图：
- 添加main.vue组件
- 运行效果如图：
Vuex的使用
- 安装vuex
- Vuex使用
在项目根目录src下创建一个专门用于存储的目录结构。具体操作如下：首先生成一个名为"store"的子目录；接着在其内部创建一个index.js.js脚本用于核心逻辑实现；最后建立根目录和模块化存放组件的专门路径。
Root用于存储根级别的，modules用于存储属于某一个模块的。
- 代码及效果如图：
Axios使用
- 安装
- 在src下新建文件夹http，在http下新建文件index.js
- 根据功能模块定义请求文件夹，在相应模块下编写请求方法
- 在组件内调用
- 调用效果
- 用node代理请求解决跨域
第三方组件库的使用
- 安装
- 引入
全局注册所有组件
- 使用
- 效果
Vue父子组件生命周期执行顺序
父组件最先触发了created事件，在此之后其兄弟组件依次被激活并触发了同样的created事件；在mount过程中，则是以从前到后的顺序依次完成了mount操作；最后一步由父组件完成了整个mount流程。
子组件更新v-model值生命周期执行顺序
依次触发父组件的BEFORE_UPDATE事件；随后触发子组件的BEFORE_UPDATE事件；接着触发子组件的UPDATED事件；最后触发父组件的UPDATED事件。
触发事件导致原因出现。使用this.$emit(input, newValue)方法从而更新了父组件的值。因此，在执行update操作前，父组件通过props将更新后的信息传递给子组件。
更新前
点击更新值
