### vue
#### vue生命周期
beforeCreated
`实例初始化，数据观察和event/watch事件配置之前被调用`
created
`实例创建后立即调用，数据观测，数据和方法运算，watch/event事件回调`
beforeMount
`挂载之前被调用：相关的render函数首次调用`
mounted
`el被实例替换，并挂载到实例上去之后调用该钩子。mounted不会承诺所有的子组件都一起挂载，如果想要整个视图都渲染完毕，可以用vm.$nextTick替换mounted`
beforeUpdate
`数据更新时调用，适合在更行之前访问现在有的dom比如手动移除已添加的事件监听器`
> 该钩子在服务器渲染期间不会调用，因为只有初次渲染会在服务器端进行
updated
`由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该钩子。在这个钩子被调用时，组件DOM已经更新，所以你现在可以依赖于DOM操作。`
activated
`keep-alive组件激活时调用`
deactivated
`keep-alive组件停用时调用`
beforeDestroy
`实例销毁之前调用。实例仍然可用`
destroyed
`Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。`
### vue项目大致
### 创建
```vue
vue init webpack 项目名 // creat 项目名 新版本
cd 项目名
npm i 下载关联组件
npm run dev 运行
```
使用
```vue
导入axios插件：
1.新建http.js模块->插件代码
2.导入axios
3.按照文档开发插件 开发插件
import axios from 'axios'
const Http = {}
Http.install = function(Vue) {
Vue.prototype.$http = axios
}
export default Http
4.main。js引入插件
5.Vue.ues（Http） 、、全局使用axios
```
> 给单元格内容包裹容器template（vue提供的组件）x
```vue
1.通过template的属性slot-scope可以把上层数据传递给层里进行使用
2.slot-scope的值可以随便写 通常命名为 scope
3."scope"会自动去找上一级数据 el-table :data 的值 tableData
4. scope.row 是数据源中的每个元素 这里是对象 (row 不能随便写)
```
eg：
```js
<template slot-scope="scope">
{{ scope.row.create_time|fmtDate}}
</template>
```
> 页面变化之前判断是否登录
```vue
router.beforeEach((to, from, next) => {
to：即将要进入的目标
from：单前导航正要离开的路由
next：进行管道的下一个钩子函数
}
```
> 操作dom
`ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
### vue-router
#### 嵌套路由
```vue
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
```
### 重定向
```vue
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
```
### 动态路由匹配
一个“路径参数”使用冒号 `:` 标记。当匹配到一个路由时，参数值会被设置到`this.$route.params`
可以通过`this.$router.push（路径)来实现页面跳转
### vuex
> Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
- **state**，驱动应用的数据源；
- **view**，以声明方式将 **state** 映射到视图；
- **actions**，响应在 **view** 上的用户输入导致的状态变化。
> namespaced:true
>
> 前提：在模块中开启命名空间
### Mutation 必须是同步函数
Action 可以包含任意异步操作
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 `context.commit`
### 插件
> vuex-router-sync
使用插件，使路由配置直接在context中
### 组件通信
`父子通信`
1. 在子组件props:["msg"]
2. 使用组件时 <child-a :msg="父组件data的数据">
3. 在子组件的template {{msg}}
`子传父`
1. 在子组件中 this.$emit(自定义事件名xxx,数据a)
2. 在使用子组件时 child-a @xxx="父组件methods中的方法fnx"
3. 在父组件的methods中fnx(argv){此时 argv就是数据a}
`兄弟传信`
1. A 触发事件 vm.$emit(事件名,数据a)
2. B 绑定事件 vm.$on(事件名,(argv)=>{此时 argv就是数据a})