vue 高级部分

props的其它内容

props的作用就是用于在子组件中接收传入的数据

props的使用方式

    1.数组

        props:['name']

    2.对象,指定传入变量的类型

        props:{name:Number}

    3.对象，传入变量有类型、默认值和必填

        props: {

            name: {

                type: String,  # 类型

                required: true,  # 必填

                default: ''    # 默认值

            }

        }

混入 mixin

mixin的作用就是将多个组件共用的配置提取成一个混入对象，其实就是将多个组件都能用到的配置提出来放到一个文件中，并导出，谁要用就导入

使用步骤

    1.定义混入对象

        新建mixin包，在mixin包下新建index.js

    2.在index.js中写组建中会用到的配置项，如data,methods等

        export const zyg = {

            methods: {

            },

            mounted() {

            },

            data() {

                return {

                }

            }

        }

    3.局部使用(只在当前组件中使用)

        import {zyg} from '@/mixin'

        mixins: [zyg]  # 配置项

    4.全局使用(所有组件都能用)

        在main.js中

        import {zyg} from '@/mixin'

        Vue.mixin(zyg)

    5.在组件中直接使用即可

插件

插件主要就是用于增强Vue

他其实就是一个包含install方法的一个对象，install的第一个参数时vue，第二个以后的参数是使用插件的时候传递的数据

使用方法

    1.新建包plugins，在包中新建index.js

        import Vue from 'vue';

        import axios from 'axios';

        export default {

            install(vue) {

                # 1.自定义指令

                # 2.定义全局变量，之后所有组件都能用，借助于Vue.prototype往里放，以后只需要this.$ajax，就是axios对象

                # 3.使用全局混入

                # 4.自定义全局组件

            }

        }

    2.在main.js中配置

        import plugin from '@/plugins'

        Vue.use(plugin)

elementui的使用

1.安装

    cnpm i element-ui -S

2.配置完整引入，在main.js中写以下内容

    import ElementUI from 'element-ui';

    import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(ElementUI)

    以后就可以在组件中直接使用elementui提供的全局组件

3.使用组件

    elementui官网复制粘贴

vuex

vuex就是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

使用步骤

    1.安装

        新建store包，新建index.js

    2.在index.js中写

        export default new Vuex.Store({

            state: {

                # 放数据的

            },

            mutations: {

                # 放一个方法，正常是让actions中的方法来调用

                # 组件也可以直接调用

            },

            actions: {

                # 放方法，正常组件调用

            }

        }) 

    3.组件中

        显示state中的变量

        html:

            {{$store.state.变量名}}

        js:

            this.$store,state.变量名

    4.修改state中变量的值

        正常步骤:

            1.组件中js

                this.$store.dispatch('actions中的方法', 参数)

            2.actions中的方法调用

                context.commit('mutations', 参数)

                actions: {

                    add(context, value) { # context为固定参数，value为接收的参数

                        context.commit('aaa', value)  # aaa为mutations中的方法

                    }

                }

            3.在mutations中修改state的值

            mutations: {

                aaa(state, value) {  # state 是Store中的state

                }

            }

        非正常步骤:在没有网络请求或其它业务逻辑时使用

            1.跳过actions

                this.$store.commit()

            2.直接改值

                this.$store.state.变量名

vuex在执行时actions可以与后端交互

vuex可以用于多组件数据共享

vue Router

1.基本使用

    1.创建项目时就已经创建好了直接使用即可

    2.配置路由跳转

        const routers = [

            {

                path:'/',

                name: 'index',

                component: Indedx  # 已经提前导入了import Index from "@/views/IndexView";

            },

            {

                path: '/home',

                name: 'home',

                component: () => import('@/views/HomeView')  # 没有提前导入

            }

        ]

2.点击跳转路由的两种方式

    1.js控制

        this.$router.push('路径')

    2.标签控制

        <router-link to="/路由">

            <button>点击跳转页面</button>

        </router-link>

3.路由跳转携带数据的两种方式

    1.在路径中使用?携带

        /index/?pk=1

        获取pk: this.$route.query.pk

    2.路径中分割

        /index/1/

        使用这种方式router的index文件中对应的路径要改

            {

                path: '/index/:id',

                name: 'index',

                component: Index

            }

        获取id: this.$route.params.id

4.区分this.$route与this.$router

    this.$route  # 是当前路由对象，内部有传入的参数

    this.$router  # mew VueRouter对象，可以实现路由的跳转，router文件中的index.js文件中

5.两种跳转方式

    1.使用对象

        this.$router.push({

            name: 'index',

            params: {

                id: 18

            }

        })

    2.标签跳转

        <router-link :to="{name:'login', query: {name: 'zyg'}, params: {id: 18}}">

            <button>点击跳转</button>

            </router-link>

6.路由守卫

    全局守卫

        前置路由守卫，在进路由前执行

        后置路由守卫，路由跳转走执行

    用法:

        router文件的index.js中

        router.beforeEach((to, from, next) => {  # to是去哪个路由，from是从哪个路由来，next加括号执行

            if (to.name == 'login') {

                next()  # 真正跳转到要去的路径

            } else {

                var res = localStorage.getItem('userinfo')

                if (res) {

                    next()

                }else {

                    alert('')

                    this.$router.push({name: 'login', params: {id: 99}})

                }

            }

        })

localStorage系列

localStorage系列主要是用于浏览器存储数据，只是存储数据的方式不同

localStorage

    永久存储，除非清空数据或手动删除、代码删除

    localStorage.setItem('userinfo', JSON.stringify(this.userInfo))  # 存数据

    localStorage.getItem('userinfo')  # 取数据

    localStorage.clear()  # 清空全部数据

    localStorage.removeItem('userinfo')   # 清空userinfo的数据

sessionStorage

    临时存储，清理需要关闭浏览器或手动删除、代码删除

    sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))  # 存数据

    sessionStorage.getItem('userinfo')  # 取数据

    sessionStorage.clear()  # 清空全部

    sessionStorage.removeItem('userinfo')  # 清空userinfo的数据

cookie

    有过期时间，到期自动清理，而且需要借助第三方模块 vue-cookie

    cookies.set('userinfo', JSON.stringify(this.userInfo))  # 存数据

    cookies.get('userinfo')  # 取数据

    cookies.delete('userinfo')  # 删除数据

巴特西

vue 高级部分

props的其它内容

混入 mixin

插件

elementui的使用

vuex

vue Router

localStorage系列

最新文章

热门文章