vue中的一些用法,持續更新中

2022-07-22 06:30:10 字數 4465 閱讀 3502

1、跳轉用法

@1、在template模板中通常使用router-link to='url'

@2、在js中

1、this.$router.push();

2、this.$router.push(});

3、this.$router.push(});

第一種不傳參直接跳轉到某乙個頁面,第二種,第三種傳參跳轉到某個頁面,第二種和第三種不同的是都傳了引數過去,第二種引數在url中顯示第三種不顯示

2、this的用法js中的this指向的該元素,在vue中this指代的是vue這個物件。

3、@1、prop 父元件向子元件傳遞資訊,著重與資料傳遞,並不能呼叫子元件的屬性和方法

@2、$ref 著重與索引主要用來呼叫子元件的屬性和方法,不擅長資料傳輸,作用於元素的時候相當於選擇器

@3、$emit 子元件向父元件傳值,vm.$emit( event, arg ),$emit 繫結乙個自定義事件event,當這個這個語句被執行到的時候,就會將引數arg傳遞給父元件,父元件通過@event監聽並接收引數。

@4、vm.$emit(event),父元件呼叫@event時,父元件呼叫了該函式

4、v-if和v-show的區別

v-if條件判斷,如果為false將不顯示在html中也不存在,而v-show如果為false不顯示但是在html中存在只不過屬性為display:none;

5、vue store 中的commit和dispatch

this.$store.commit(fn,value)同步操作

this.$store.dispatch(fn,value)非同步操作

6、filters過濾器,前端用管道進行過濾},此時如果status為0,則會顯示為未付款

filters:}}

簡單的講,前端表示式 value | filter(value)

filter這個函式接收到了value值,進行對value的操作,返回的值即是過濾後的值。

7、v-bind: 簡寫:,html屬性不能使用雙大括號形式繫結,只能使用v-bind指令

8、v-text與v-html的區別

前者不解析html標籤渲染包含的資訊,後者解析html標籤之後渲染資訊。此外這兩個指令還有另乙個用途「防抖」。

9、事件修飾 .stop, .prevent , .once , .self , .capture

stop:阻止事件冒泡

prevent:阻止預設事件

once:只觸發一次

self:只有點選自己時才觸發

capture:把冒泡改為傾聽,冒泡從內島外,傾聽從外到內

10、compont用法,詳解下方鏈結

11、鉤子函式,鉤子函式的作用例如頁面裝載後開始讀取一些資料進行初始化

beforecreated 元件建立前    1

created元件建立後    2

beforemount 裝載前    3

mounted裝載後    4

beforeupdate 更新前    5

updated 更新後    6

beforedestroy 銷毀前    7  this.$destroy 銷毀,銷毀例項,例項銷毀了不存在上述操作

destroyed 銷毀後    8

12、t如何修改itle,修改index.html檔案,一般html檔案在根目錄下或者public目錄下

13、v-for 倒序   reverse()     陣列順序顛倒

注釋:當data的某個屬性是乙個陣列時,用v-for可以遍歷,但顯然陣列是可能變動的,因此對以下變動也進行資料繫結;

push()         陣列末尾新增

pop()           陣列末尾取出

shift()          陣列開頭取出

unshift()      陣列開頭新增

splice()        刪除並插入

sort()           排序

reverse()     陣列順序顛倒

當利用以上方法變更陣列時,被渲染的內容會實時更新;

14、原物件中無某個鍵值想要新增乙個新的鍵值

this.$set(this.obj,"key","value");

this.$delete(this.obj,"key");

15、vue中遍歷的寫法

this.obj.foreach((el,index)=>)

遍歷查詢某乙個值出現的次數同樣可以用filter過濾去查詢

this.obj.filter(item=>item.state==='0').length   //(過濾物件中state===0的個數有多少個)

16、核取方塊選中之後為true,未選中為false

checkbox 雙向繫結乙個變數之後可以通過選中來改變這個變數,改變的變數為布林值

17、axios   (ai'ke'c'l's)

npm install axios

cdn位址

axios get的用法,.catch處理錯誤函式

//

為給定 id 的 user 建立請求

axios.get('/user?id=12345')

.then(

function

(response) )

.catch(function

(error) );

//可選地,上面的請求可以這樣做

axios.get('/user',

}).then(

function

(response) )

.catch(function

(error) );

axios post請求,axios.post的三種用法  傳送門

axios.post('/user', )

.then(

function

(response) )

.catch(function

(error) );

執行多個請求

function getuseraccount() 

function getuserpermissions()

axios.all([getuseraccount(), getuserpermissions()])

.then(axios.spread(function (acct, perms) ));

18、map函式    遍歷乙個陣列對這個陣列進行操作變成乙個新的陣列,或者對這個陣列進行值的判斷取出想要的一條或多條

var memo=[,]

var text=,number=

memo.map(

function

(v,k)

if(v.type=='number')

})

19、foreach迴圈

this.arr.foreach((value,index)=>)

20、reduce 計算陣列元素相加後的總和 

array.reduce(function(total, currentvalue, currentindex, arr), initialvalue);

total:初始值,currentvalue 當前元素  currentindex 當前元素索引  arr 當前元素陣列物件 initialvalue 傳遞給函式的初始值

return this.arr.reduce((total,v)=>,0)

21、活動路由的顏色 設定路由選中後路由連線的顏色,例如導航欄點選了相應的導航跳到了新的頁面,導航欄相應的需要變顏色

linkactiveclass:'active'

22、工程化專案後在a元件想要引入b元件分三步,

在元件的同級目錄下,新建個index.js

import login from "./login"

export default

}

一、引入 import b from "./b"

二、宣告 components

在main.js下面引用元件並use

import login from '@/components/common/login'

vue.use(login);

三、在template裡面使用為全域性元件**都可以呼叫

23、vuex狀態管理,狀態管理在簡單的計算中無需使用因為vuex有點太重了

狀態管理的四個屬性

state----定義狀態屬性

getters----定義讀取狀態的方法

actions----定義改變狀態的方法(使用者呼叫)

mutations---定義改變狀態的方法(實際上的狀態改變是由mutations處理,actions呼叫mutations,使用者呼叫actions)

關於git分支的一些用法 持續更新中

今天,簡單了解了一下關於git分支的用法 場景 由於專案需要,我們團隊進行開發,各個成員完成各自的功能模組,但是在git上上傳的時候非常亂,這個時候,我們需要用到分支branch,當然這個功能只是分支的一部分功能,還有很多功能後續我會再進行深度學習了解。找到團隊的github位址,把他轉殖下來 gi...

unittest的一些坑 機制 持續更新中

def test0 self self.b 5 def test1 self pring self.b這個執行起來之後,雖然會先執行test0,但是執行到test1時 會報錯類變數裡根本沒有b 這點是和普通類方法截然相反的,普通類方法,是可以輸出b 5的 還有,在unittest中的用例方法中,是沒...

一些函式(持續更新)

itertools模組的zip longest對於巢狀list的使用 文章中在變換句子矩陣的時候使用了itertools模組的zip longest函式。使用方法如下 batch list itertools.zip longest batch,fillvalue pad fillvalue就是要填...