vue中品牌列表案例及涉及到的知識點 完整可執行

2021-10-06 07:37:58 字數 3828 閱讀 2535

這個案列中詳述了:自定義按鍵修飾符,自定義指令,自定義過濾器

複習了v-model v-for

按鍵修飾符 .後加鍵 系統提供的有 enter,tab,delete,esc,space,up,down,left,right;

如果要用別的,則可以使用鍵盤碼(鍵盤上的每個鍵都對應乙個碼 比如113=f2),則是@keyup.113=「add」

如果不用碼則需要自定義按鍵修飾符,如本例中定義的f2 寫法是@keyup.f2=「add」

如果需要給keywords新增預設獲得焦點 但不用document.getelementbyid(「keywordtext」).focus(),則使用自定義指令,詳細用法看**

在案例**中還複習了@click.prevent事件修飾符

this.bandlist.foreach

this.bandlist.filter

this.bandlist.some

this.bandlist.findindex

this.bandlist.splice(id,1)

this.bandlist.push

這些用法

<

!doctype html>

"zh"

>

"utf-8"

>

"vue.js"

>

<

/script>

品牌列表<

/title>

<

/head>

<

!-- 這個案列中詳述了:自定義鍵盤修飾符,自定義指令,自定義過濾器 --

>

>

品牌列表<

/h3>

id"text" v-model=

"newid"

>

<

/label>

<

!-- 按鍵修飾符 .後加鍵 系統提供的有 enter,tab,

delete

,esc,space,up,down,left,right;

如果要用別的,則可以使用鍵盤碼(鍵盤上的每個鍵都對應乙個碼 比如113

=f2),則是@keyup.

113=

"add"

如果不用碼則需要自定義按鍵修飾符,如本例中定義的f2 寫法是@keyup.f2=

"add"

-->

name"text" v-model=

"newname" @keyup.f2=

"add"

>

<

/label>

"button" @click=

"add" value=

"新增品牌"

>

<

!-- 如果需要給keywords新增預設獲得焦點 但不用document.

getelementbyid

("keywordtext").

focus()

,則使用自定義指令--

>

<

!-- 如果v-color中不加''

,則 --

>

"text" v-model=

"keywords" id=

"keywordtext" v-focus v-color=

"'blue'" v-fontweight=

"900" v-fontsize=

"20"

>

<

/div>

"1">

索引<

/th>

id<

/th>

name<

/th>

ctime<

/th>

操作<

/th>

<

/tr>

<

/tr>

<

/tbody>

<

/table>

<

/div>

//這行**如果放在script的最上面則沒用,放在最下面則可以生效

'keywordtext').focus()

//不用上面的dom操作,使用自定義指令v-focus 定義的時候不用加v- ,這個自定義指令如果放在vm例項的後面,則載入頁面會報錯

//引數二是個物件,有一些鉤子函式,在特定的階段執行相關的操作

//這個也可以在vm例項中定義為私有指令

//和js行為有關的在inserted中執行,和樣式有關在bind執行

vue.

directive

("focus",,

inserted:

function

(el)

, updated:

function

(el)})

vue.

directive

("color",}

)//定義自定義鍵盤修飾符 鍵盤上的每個鍵都對應乙個碼 比如113==f2

vue.config.keycodes.f2 =

113//過濾器函式中的第乙個引數是固定的是源資料,後面的是引數,提高程式健壯性,可以使用es6 pattern = ''給乙個初始值

vue.

filter

("timeformat"

,function

(data , pattern ='')

-$-$

` //模板字串 es2015新增的符號

}else-$

-$$:

$:$`

}})var vm =

newvue(,

],newid:'',

newname:'',

keywords:''}

, methods:

this

.bandlist.

push

(car)},

research

(keywords)

// });

// return newlist

//方法二:使用filter 進行過濾

return

this

.bandlist.

filter

(item=>})

},del(id)

// })

//方法二:使用findindex查詢陣列中的元素索引,

// var index = this.bandlist.findindex(item=>

// })

// console.log(index)

// this.bandlist.splice(index,1)

//方法一和方法二是在id值唯一的情況下,如果id不唯一,則會出錯

//方法三:直接傳入索引值

this

.bandlist.

splice

(id,1)

}}, filters:-$

-$` }

else-$

-$$:

$:$----`

}}}, directives:},

//自定義指令的函式可以簡寫,這種寫法表示將bind和update上都是執行這個

'fontsize'

:function

(el,binding)}}

)<

/script>

<

/body>

<

/html>

JavaScript中涉及到的RegExp型別

正規表示式 由一些普通字元和特殊字元組成的,用以描述一種特定的字元規則的表示式,它是用來限制使用者在網際網路中輸入的規則 建立正規表示式 var 變數名 正規表示式的內容 修飾符 var reg 123456789 i var 變數名 new regexp 正規表示式的內容,修飾符 var reg ...

讀取網頁中涉及到的高度

目前已經總結的有 offsetheight offsettop clientheight clienttop scrollheight scrolltop innerheight outerheight將來準備看的有 有關控制滾動的該屬性是乙個唯讀屬性,返回乙個代表畫素高度的整數值,高度包括元素高度...

GPU設計中涉及到的座標

在gpu硬體處理以及opengl建模過程中都將設計到6種空間處理,直接構成了6種座標處理的環境 1 model space或者object space 這個空間是物件空間,與其他空間沒有關係,只是直接形成這個物體的具體輪廓以及其他屬性 attribute 物件的最終構成都是有vertex都成,由他的...