vue使用技巧

2021-10-06 12:10:53 字數 2130 閱讀 4261

1.「全域性元件註冊」

原:

新:

建立全域性.js檔案管理全域性元件 globalcomponent.js

// 1 - globalcomponent.js

import vue from 'vue' // 引入vue

// 處理首字母大寫 abc => abc

function changestr(str)

/* require.context(arg1,arg2,arg3)

arg1 - 讀取檔案的路徑

arg2 - 是否遍歷檔案的子目錄

arg3 - 匹配檔案的正則

關於這個api的用法,建議小夥伴們去查閱一下,用途也比較廣泛

*/const requirecomponent = require.context('.', false, /\.vue$/)

console.log('requirecomponent.keys():',requirecomponent.keys()) // 列印

requirecomponent.keys().foreach(filename => )

// 2 - 將globalcomponent.js引入main.js

import global from './components/globalcomponent'

// 3 - 使用這類元件不再需要引入和註冊,直接標籤使用即可

2.extra:路由分割槽以及動態新增路由

建立專門的路由.js檔案管理所有的路由

總路由管理檔案 - index.js

分割槽路由

- index.routes.js

- login.routes.js

在大型專案中,往往會有很多互不關聯的模組,例如電商平台中的**,個人資訊,這種情況下就可以對路由進行分割槽

// 分割槽路由檔案寫法

export default

// 總路由管理檔案 index.js 寫法

import vue from 'vue'

import vuerouter from 'vue-router'

vue.use(vuerouter)

const routerlist = // 路由陣列 - 存放所有路由

function importall(routerarr))

}importall(require.context('.',true,/\.routes\.js/))

const routes = [

...routerlist

]const router = new vuerouter()

export default router

3.拯救繁亂的template

template存在一定的缺陷,例如:

處理多個button

原: button1

button2

button3

新:

// 建立乙個button.vue檔案 寫法如下//  引入

4.「高精度全域性許可權處理」

處理某按鈕顯示許可權問題

/* 在專案裡新建乙個common資料夾用於存放全域性 .js 檔案

這種全域性資料夾做法相當普遍,一般專案裡都應該有這樣乙個資料夾來管理全域性的東西

*/// common/jurisdiction.js 用於存放與許可權相關的全域性函式/變數

export function checkjurisdiction(key) else

}// 將全域性許可權js掛載到全域性中

// main.js

import from './common/jurisdiction'

// 優雅操作 - vue自定義指令

vue.directive('permission',

}else

}})// 使用方式

許可權1許可權2

// 無需再通過value去判斷,直接通過v-permission的值進行判斷即可

vue使用技巧

透傳透傳props props child component 透傳attrs attrs child component 透傳object obj child component 透傳事件 listeners child component 動態指令 動態繫結 someprop something...

Vue元件使用技巧 is屬性

首先,提起vue的元件,大家都不會陌生,使用起來就像使用普通標籤一樣簡單,功能也可以隨意定製,真的是很方便.但是基於html語法,一些特定的標籤,比如,等.在標籤下,只有標籤是有效的,同理表現下只有有效,那麼如果我們想加入自定義的元件該怎麼辦呢.這種方法顯然是不太適合的 my component u...

vue 使用技巧總結 19 01

上面的函式中使用箭頭,會導致 this 捕獲不到 vue 例項。各位道友切記切記.目前通常使用的方式是 然後在查資料的時候翻到了乙個統一管理的方式 asynccomponent.js 檔案 export const component01 import views export const comp...