Vue基础学习概念

目录

​​​​​​​路由

命名视图布局：

Vue中的过滤器

ElementUI插件： 

子组件和父组件传值：

兄弟组件传值

Vuex插件：集中式的状态管理。

Vuex的五个核心概念：State、Getters、Mutations、Actions、Modules

Modules

Vuex映射函数

映射Mutations 

映射actions：mapActions 映射函数，用户映射出指定的Actions

从模块中映射： 

自定义指令、自定义插件： ​​​​​​​

---

​​​​​​​路由

路由高亮：默认的一个属性。route-view-active linkActiveClass属性

路由动画：transition标签和属性 v-enter，v-leave-to，v-enter-active，v-leave-active

路由穿参：route，和/：

路由的子组件切换：路由children属性的使用。

命名视图布局：

Componets:{}

使用name命名制定使用哪个组件。

笔记截图：

笔记截图

Vue中的过滤器

 

 

ElementUI插件： 

 

网络请求：插件 axios

子组件和父组件传值：

provide: 选项，用于定义依赖数据，提供给他的后代组件使用。

inject: 注入，通过inject选项，注入父组件中定义的依赖数据。

prop: 可以像这样给 prop 传入一个静态的值.

注意：inject、props是只读的，如果要改数据，需要中转。

在父组件中定义一个方法， 该方法作为依赖数据，inject也接收一下方法。然后在子组件调用该方法，此过程可以修改数据。子组件更改父组件的数据。

$emit()方法用于自定义事件，并触发事件，$on（简写 @）用于监听事件的触发。

兄弟组件传值

中央事件总线 $bus：在Vue类型的原型对象上，加一个属性，该属性值是一个Vue的实例对象。

这样会的做法就是：所有的Vue对象，都会有一个属性值Vue实例（并且是同一个对象）。

Vue.prototype.$bus = new Vue()

Vuex插件：集中式的状态管理。

import Vuex from "vuex"

Vue.use(Vuex)

//创建全局状态管理对象,并且导出

export default new Vuex.Store({

})

//导入全局状态管理对象

import store from './store'

new Vue({

//store:store,//key和value一样，可以简写成store

render:h => h(app),

store

})
 

Vuex的五个核心概念：State、Getters、Mutations、Actions、Modules

State：状态、数据。

改数据或者状态只能用Mutations，

 

 getters:定义全局状态里的计算属性。

mutations：定义操作状态的方法。

 action:定义所有的异步操作，注意： 官方推荐所有的操作都要进过actions，再由actions操作mutations。

actions里定义的方法，有两个参数：

1,上下文（当前store对象），2,新的值。

通过commit调用mutations里的方法，通过dispatch调用actions方法。

Modules

为了简化store，可以将使用模块化，每个模块化都会有State、Getters、Mutations、Actions，

Car.js(1)

Car.js(2)

  

index.js

Vuex映射函数

从Vuex到入映射函数（mapState和mapGetters、mapMutations），用于制定的state。前提：保证属性名和映射函数的属性一致。 

 ...是展开运算符。

映射函数原理如下图：

映射Mutations 

映射方法名和全局的状态里的方法名必须一致，方法必须要穿参数。

映射actions：mapActions 映射函数，用户映射出指定的Actions

使用映射函数，映射Actions方法必须满足两个条件，同Mutations。

1.方法名必须跟actons里的定义方法相同。

2.方法必须要穿参数。 

从模块中映射： 

自定义指令、自定义插件： ​​​​​​​