# vue2.0知识点

**Repository Path**: tao-wenbo/vue20-knowledge-points

## Basic Information

- **Project Name**: vue2.0知识点
- **Description**: 学习vue2.0记录下的知识点
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-27
- **Last Updated**: 2022-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue知识点补充

## 1.prop

​	prop传参方式
```js
//使用数组形式  简单 但是不可以定义默认值和参数规则
props: [ "name" ]
//或者使用对象形式
props: {
    prop1: [ Number, String, Boolean, Array, Object, Date, Function, Symbol ],//可以设置多个值，表示多个可能类型
    name: {
        type: Number,  //type控制类型，以首字母大写形式定义
        default: 0,
        required: true //控制是否为必填项
    },
    //自定义验证函数
    prop2: {
        validator( value ){
            //如果validator是true则验证通过，否则认证失败
            return false
        }
    }
}
```



## 2. /deep/ 深度选择器

```js
//用法
/deep/ .head{
    background: #fff;
}

//用处：使用第三方组件库，修改默认样式的时候要加
```



## 3. eventbus (兄弟组件之间通信)

```js
//1.创建eventbus.js文件
import Vue from "vue"
export default new Vue()

//2.发送方
import bus from ".../eventbus.js"
bus.$emit( "name", value );

//3.接收方
import bus from ".../eventbus.js"
bus.$on( "name", ( value ) => {
    console.log( value )
} )
```



## 4.this.$nextTick( callback )

```js
//这个方法可以延迟执行一些代码 延迟到dom渲染之后执行  保证回调可以操作到最新的dom元素
this.$nextTick( () => {
    console.log( 321 )
})
```



## 5. 组件中的name属性

```js
//组件定义时的 name属性主要应用场景用于结合keep-alive	便签实现缓存，在调试工具中组件名称也是name
```

## 6.动态组件的渲染

```js
//使用<component>组件
<component is="注册的组件名"><component>
```



## 7.keep-alive

```jsx
//组件中定义了name属性，则使用name，假如没有则使用组件的注册名
//include和exclude只能选择一个
<keep-alive include="组件名1,组件名2" exclude="组件名1,组件名2">
	<component is="注册的组件名"><component>
    //或者可以使用路由组件
    <router-view></router-view>
</keep-alive>
        
//被keep-alive包裹会增加activated和deactivated
```

## 8.slot

v-slot：可以简写为#

```jsx
//用法
<组件名>
    {/*在父组件中可以使用这用的形式拿到slot传递的值*/}
    <template v-solt:default="scope">
    	{{scope.key}}
    </template>
</组件名>

<组件>
    <slot name="default" key="value">
        {/*key可以随意定义名字,当slot使用自定义属性的时候就是作用域插槽*/}
    	<div>slot在用户没有指定内容，显示这里</div>
    </slot>
</组件>

//可以简写为
<组件名>
    <template #default="scope">
    	{{scope.key}}
    </template>
</组件名>


```

## 9.自定义指令

### （1）私有自定义指令

```jsx
//在组件内部
export default {
    directives: {
        指令名字:{
            //当指令第一次被触发立马会去执行bind函数，只执行一次
            bind( el, binding ){
                //el指的是当前指令所绑定的dom元素对象，可以通过第二个参数的value值拿到传递的参数
      			binding.value
            },
            //当指令传参和dom更新的时候会触发update函数，可以和bind函数一致
            updata( el, binding ){
                binding.value
            }
        }
    }
}

//使用的时候
<div v-指令名字="value1"></div>

//当bind和update中的内容完全一致的时候可以简写
export default {
    directives: {
        指令名字( el, binding ){
                //el指的是当前指令所绑定的dom元素对象，可以通过第二个参数的value值拿到传递的参数
      			binding.value
        },
    }
}
```



### （2）全局自定义指令

```js
//在main.js中使用, 要在new Vue之前使用
vue.directive( "指令名", ( el, binding ) => {
    binding.value
} )
```



## 10.过滤器

vue中只能在插值表达式和v-bind属性绑定，常用于文本的格式化

### （1）局部过滤器

```jsx
export default{
    filters: {
        //过滤器实质是一个函数,val是管道符前面的值
       	过滤器名( val ){
            //强调过滤器必须要有返回值
            return val
        }
    }
}

<div>{{ shuai | 过滤器名 }}</div>
```



### （2）全局过滤器

```jsx
Vue.filter( "过滤器名", ( value ) => "value")
```



## 11.监听器

```js
export default{
    data(){
        return {
            uname: "",
            obj: {
                name: "21"
            }
        }
    },
    watch: {
        //使用方法格式的监听器， 缺点：进入页面的时候无法自动触发。 无法监听到对象内部的属性变化
        uname( newVal, oldVal ){
            
        },
        //对象格式的监听器 immediate，可以通过deep深度监听对象属性
        uname: {
            handler( newVal, oldVal ) {
                
            },
            immediate: true, // 在页面初始时就会调用handler函数，控制监听器是否自动触发一次
            deep: true
        },
        //当要监听对象的某个属性的时候
        'obj.name'( newVal, oldVal ){
            
        }
    }
}
```

## 12.vue-router

```jsx
//创建router.js
import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes = [
    { path: "/", redirect: "/home" } //重定向
    { path: "/home", component: 组件名, children: [
    	{ path: "child1", component: 组件 }, //子组件中不带/的
	] },
    { path: "/about", component: 组件名, redirect: "/about/child2", //当有子组件时可以重定向
      children: [
    	{ path: "child2", component: 组件 }, //子组件中不带/的。子路由的path可以为空，这样就可以等价于重定向的作用，但是写法简单
	] },
    {
        //使用正则匹配404页面，必须放在最后一个
        path: "/:path(.*)",
        component: 404组件
    }
]

export default new VueRouter({
    routes
})


//main.js中使用
import router from ".../router.js"

new Vue( {
    ...,
    router
} )


//使用
<router-link to="/home"></router-link>
<router-view></router-view>
```

## 13.动态路由

### （1) 路由传参

```js
{ path: "/home/:id", component: Home } 
//获取
this.$route.params.id
```

### （2）开启路由的props传参

```js
{ path: "/home/:id", component: Home, props: true } //只有动态路由参数的时候可以开启开启路由的props传参可以在组件中的props中接收到
//获取
export default{
    props: [ "id" ]
}
```

### （3）查询参数传参

```js
//调用的时候
this.$route.query
```

（4）路由参数正则匹配

```js
{
    path: "/home/:id(\\d+)", //id匹配数字
    path: "/home/:id*", //id可有可无
    path: "/home/:id+", //id有多个参数
}
```



## $router和$route的区别

```js
this.$router //是路由的“导航对象”，对应路由实例
this.$route //是路由的“参数对象”，对应单个路由
```





## 14.导航守卫

### （1）全局前置守卫

```js
const router = new VueRouter({...})

router.beforeEach( ( to, from, next ) => {
    // to 是将要访问的路由的信息对象
    // from 是将要离开的路由的信息对象
    // next 是一个函数，next()表示放行，允许此次路由导航
    /*
    	next的三种调用方式: 1.  next()  表示放行
    	2. next( "/login" )  跳转到其他页面去
    	3. next( false ) 表示留在当前页
    */
} )                             
```



## 15.动态绑定样式

### （1）三元表达式

```js
:class={ isNeed: "class1": "" }
```

### （2）对象

```js
:class="obj"

obj: {
    class1: true,
    class2: false
}
```

## 16.动态参数和动态事件

```jsx
<div :[propName]="shuai" @[eventName]="done"></div>

export default {
    data(){
        return {
            propName: "class",
            eventName: "click"
        }
    },
    methods: {
        done(){
            
        }
    }
}
```

## 17.跨级传参 provide/inject

```js
//发送方
export default {
    data(){
        return {
            message: "fda",
            obj: {
                message: "123"
            }
        }
    },
    //要访问data中的属性，provide要是一个方法
    //provide/inject并不是响应式， 要想要响应式的数据，第一种方法是不使用组合式的api
    provide(){
        return {
            message: () => this.message, //函数返回响应式数据
            obj: this.obj, //响应式对象，传递过去的是一个地址，内部改变也是响应式的
        }
    },
}

//接收方
export default {
    inject: [ "message", "obj" ],
    data(){
        return {
            message: "fda",
            obj: {
                message: "123"
            }
        }
    },
}
//使用的时候
{{obj.message}}
{{message()}}
```

## 18.vuex

创建store/index.js

```js
import { createStore } from "vuex"
const store = createStore({
    state(){
        return {}
    },
    getters: {},
    mutations: {},
    actions: {},
})
```

### *多模块

创建moduleA.js和moduleB.js

```js
const moduleA = {
    state(){
        return {}
    },
    getters: {},
    mutations: {},
    actions: {},
}
export default moduleA


const moduleB = {
    state(){
        return {}
    },
    getters: {},
    mutations: {},
    actions: {},
}
export default moduleB
```

store/index.js中

```js
import { createStore } from "vuex"
import moduleA from "./moduleA.js"
import moduleB from "./moduleB.js"
const store = createStore({
    module: {
        moduleA,
        moduleB
    }
})

//vuex会自动将其模块挂载到store上，可以直接使用this.$store.commit/getters/dispatch触发方法
```

### *辅助函数

作用：减少调用时候的语句长度，更加方便

```js
import { mapState, mapMutations,mapGetters, mapActions } from "vuex"
export default{
    data(){
        return {}
    },
    method: {
        ...mapMutations([ "mutations中定义的方法名", ... ]),
        ...mapActions( [ "actions中定义的方法名", ... ] )
    },
    computed: {
         ...mapState( [ "state属性名",... ] ),
    	...mapGetters( ["getters中定义的方法名", ""] )
    },
}

//调用的时候可以直接使用
```

### *命名空间

作用：增加代码可读性和可维护性。可以通过控制台输出找到对应的模块。

```js
const moduleA = {
    nameSpaced: true,//开启命名空间
    state(){
        return {
            shuai: "bo"
        }
    },
    getters: {
        shuaiGetter: ( state ) => state.shuai 
    },
    mutations: {
        changeShuai: ( state, name ) => {
            state.shuai = name
        }
    },
    actions: {},
}
export default moduleA

import { createStore } from "vuex"
import moduleA from "./moduleA.js"
import moduleB from "./moduleB.js"
const store = createStore({
    module: {
        a: moduleA,
        b: moduleB
    }
})
//之后访问的话,所有变量都会带有a/前缀
this.$store.getters[ "a/shuaiGetter" ]
this.$store.commit[ "a/shuaiGetter", "123" ]
。。。
//使用辅助函数的时候第一个参数是定义的模块名
mapGetters( "a", ["getters中定义的方法名", "",... ] )
                  
```