vue小实例

本文链接： https://blog.csdn.net/qq_36784628/article/details/101761020

1、点击按钮，样式切换

<el-button @click="changeBtn('one')" :class="btnNum == 'one'?'active':''">昨日</el-button>

2、插槽slot

匿名插槽：

<div>
    <p>这里是文字</p>
    <slot></slot>
</div>

父组件中：

<newdiv><p>我是被插槽引用进去的</p></newdiv>

具名插槽：

<div>
    <p>这里是文字</p>
    <slot name="test"></slot>
</div>

父组件

<newdiv><p slot="test">我是被插槽引用进去的</p></newdiv>

三、图片引入

<img :src="require('@/assets/image/login/user.png')" />

四、监听路由

watch:{
        $route(to,from){
            if(to.path == "/"){
                this.$store.dispatch("changFlag",false);
                localStorage.removeItem("user");
                localStorage.removeItem("pageIndex");
                this.$store.dispatch("changeDestroy",true);
            }
        }
    }

五、导航钩子有哪些？

分为全局和全局和局部

全局：

beforeEach:在路由切换开始时
afeterEcach：在路由切换离开时

局部

局部到单个路由（写在路由注册）
beforeEnter

局部到组件（写在组件的函数）
beforeRouterEnter
beforeRouterUpdate
buforeRouterLeave

全局的路由守卫

//route是路由注册的实例对象

route.beforeEach((to,from,next)=>{
    if(to.meta){
        //执行该执行的
    }else{
        //跳到登录页
    }
})

六、VUE的四个指令和用法

v-if 、v-bind（：绑定属性）、v-on（@ 绑定事件）、v-for（循环）

七、为什么定义变量的data必须是一个函数

防止组件之间的相互影响

八、xios和ajax 区别

asios支持promise和提供拦截器

九、路由懒加载

需要的时候再加载路由；在祖册路由时候用 component:import(@xx/xx/xxx.vue)

十、vue-loader加载器

使vue可以热更新、编译vue代码为js等浏览器能识别的语言

十一、vue的虚拟dom 的理解

以js的形式去添加dom元素，优化了diff算法，<template>就是一个虚拟dom，最好用于做批量修改

十二、MVVM和mvc的理解

MVVM：view 《==》viewmodel model 《==》viewmodel

MVC：view《==》controller《==》model《==》view

十三、keep-live缓存的使用

a页面条到b页面，再返回a页面，则a页面不再发请求

用到路由的meta和keep-alive的inlude属性

猜你喜欢