vue小金库

vue图片懒加载

npm install vue-lazyload --save-dev

vue路由权限

参考连接

动态加载菜单和路由addRoute

用router.addRoute来动态添加路由、子路由
原现有路由

const routes = [
    {
        path: '/',
        name: 'Login',
        component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue')
    },
    {
        path: '/index',
        name: 'index',
        meta: { title: '首页', noCache: true },
        component: () => import(/* webpackChunkName: "about" */ '@/views/index.vue'),
        children:[]
        // children: [{
        //     path: '/test',
        //     name: 'test',
        //     component: () => import('../views/test.vue')
        // }
                // ]
    }
]

想要在index下动态添加子路由test，特别要注意添加的子路由的path必定要把父路由的路径也带上

const routeObj = {
    path: 'index/test', // 这里要把父路由的路径也带上
    name: 'test',
    meta: { title: '测试路由test', noCache: true },
    component: () =>
        import('../test/test.vue'),
}
this.$router.addRoute('index', routeObj)

为何vue中data是一个函数

当咱们的data是一个函数的时候，每个实例的data属性都是独立的，不会相互影响了。你如今知道为何vue组件的data必须是函数了吧。这都是由于js自己的特性带来的，跟vue自己设计无关

Vue中v-if和v-for的一块儿使用时的几种处理方式

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每一个 v-for 循环中。即——先运行v-for 的循环，而后在每个v-for 的循环中，再进行 v-if 的条件对比。因此，不推荐v-if和v-for同时使用。

一 嵌套式

<template v-for="(item, index) in list" :key="index">    
   <div v-if="item.isShow">{{item.title}}</div>
</template>

计算属性(推荐使用)

<template>
 <div>
    <div v-for="(user,index) in activeUsers" :key="user.name" >
        {{ user.name }} 
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: {//经过计算属性过滤掉列表中不须要显示的项目
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isShow;//返回isShow=true的项，添加到activeUsers数组
      })
    }
  }
};
</script>

深刻了解nextTick

使用场景
在进行获取数据后，须要对新视图进行下一步操做或者其余操做时，发现获取不到 DOM。
原理
1.异步说明

Vue 实现响应式并非数据发生变化以后 DOM 当即变化，而是按必定的策略进行 DOM 的更新。

2.事件循环说明

简单来讲，Vue在修改数据后，视图不会马上更新，而是等同一事件循环中的全部数据变化完成以后，再统一进行视图更新。

<template>
  <div>
    <h1 ref="nexttick">{{ msg }}</h1>
    <h1 @click="nexttick">点击事件</h1>
  </div>
</template>

<script>
import bus from "../utils/eventBus";
export default {
  data() {
    return {
      msg: "假的nexttick",
    };
  },
  methods: {
    nexttick: function () {
      this.msg = "真的nextTick";
      想要当即使用更新后的DOM。这样不行，由于设置message后DOM尚未更新
      console.log(this.$refs.nexttick.textContent); 并不会获得'真的nextTick'
      解决方法:使用nextTick;以下:
      this.$nextTick(() => {
      这样能够，nextTick里面的代码会在DOM更新后执行
        console.log(this.$refs.nexttick.textContent);能够获得'真的nextTick'
      });
    },
  }
};
</script>