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>