Vue中的一些指令

2022-09-09 12:30:17 字數 4607 閱讀 7619

作用:防止閃爍

使用步驟

給插值表示式所使用的標籤加上v-cloak屬性

v-cloack

>

p>

定義樣式

[v-cloak]

作用:渲染資料,跟插值表示式作用一樣

使用:給想要渲染data中的資料的標籤加上v-text=」data「

v-text

="data"

>

div>

跟插值表示式的區別

v-text無閃爍問題

插值表示式只會替換佔位符,v-text會自動覆蓋元素中的原來內容

作用:將資料轉換為html格式

使用:給想要渲染data中的資料的標籤加上v-html=」data「

v-html

="data"

>

div>

與v-text和插值表示式的區別

v-text和插值表示式只會將資料當成字串進行輸出

v-html會將資料當成html**進行輸出

作用:vue中用於繫結資料的指令

使用:在標籤屬性前加上v-bind:,屬性中可以寫合法的表示式

type

="text"

v-bind:value

="data"

/>

效果:先解析加了v-bind的屬性中的字串,當有與data中的資料相同的字串名稱時,就會找到這個資料來代替屬性中的值。

簡寫:可以用乙個:代替

作用:vue中用於繫結方法的指令

使用:先在要繫結的觸發事件前加上v-on:,然後再vue例項中定義方法

type

="button"

v-on:click

="handle"

/>

跟js方法相比:不用再進行dom操作

跟jqery相比:無太大明顯差別

簡寫:可以用乙個@代替

作用:實現資料的雙向繫結

使用:只能用在表單元素上(input,select,checkbox),直接用v-model代替value屬性,屬性的值填上data中的資料名稱,當頁面中v-model的值修改時,vue例項中的data中的資料也會對應修改

type

="text"

v-model

="data"

/>

與v-bind的區別

v-bind是將資料從vue例項中的data渲染到頁面中,會實時監聽data中的資料變化

v-model是監聽vue例項中的data和頁面上的資料變化,一旦發生變化,就會根據改變的一方的值來統一資料

作用:迴圈遍歷陣列或物件,迭代

使用

陣列,}

物件(物件陣列),}

迭代,}

,標籤內用}進行計數

跟c:for的使用差不多

在實際使用的時候,直接使用v-for可以不用帶入使用c:for所要匯入的包,功能也比c:for強大,還可以遍歷data中的資料

使用::key=""

v-for

="item in data"

:key

="item.id"

>

div>

作用:使頁面中渲染出來的資料,不只是簡單的排序,而是按照data資料中的某個屬性(id)進行唯一性標識

作用範圍:只有在對物件(物件陣列)進行遍歷時才能起作用,陣列的話無法使用,因為陣列不能提供乙個唯一性標識的資料(陣列的唯一性標識是下標,物件陣列可以提供唯一標識)

注意:key的值應為字串或數字

作用:根據值判定是否顯示該元素

使用:v-if=「true」

v-if

="true"

>

div>

特點:每次都會進行dom的刪除或建立操作

使用規則:跟j**a中的if,else,else if使用相似

作用:根據值判定是否顯示該元素

使用:v-show=「true」

v-show

="true"

>

div>

特點:不會進行dom的刪除或建立操作,只是切換了display:none樣式

與v-if的區別

v-if有較高的切換效能消耗,無初始渲染消耗

v-show有較高的初始渲染消耗

當乙個元素可能永遠不會在頁面上顯示出來,推薦使用v-if

當乙個元素涉及到頻繁的切換,體檢使用v-show

目的:為了不操作dom完成一些特定的功能

規定:指令都以v-開頭

使用

type

="text"

v-指令名稱

/>

定義方法

vue.

directive

('指令名稱',}

)

引數1:指令名稱

引數2:定義函式

作用

定義乙個只有定義了該指令的vue例項才能使用的指令

使用

type

="text"

v-指令名稱

/>

定義方法

var vm =

newvue(}

}})

bind:

作用:指令剛繫結到元素時呼叫,對元素執行一次初始化動作

作用時間

元素剛繫結了指令,但還沒插入到dom,簡單的說就是元素還在記憶體中被渲染,但還沒有解析和載入到頁面上時

跟樣式相關的操作可以放到bind中

inserted:

作用:被繫結的元素在插入到dom中時,會執行一次動作

作用時間

當元素插入到dom時,簡單的說就是當該元素載入到頁面上時

與js相關的操作應放到inserted中

update:

作用:當被繫結的元素更新時,會執行動作,修改內容,等

作用時間:當元素被修改時,常見的有,下拉表單,文字框,核取方塊等元件被修改時

componentupdated:

作用:指令所在元件的 vnode 及其子 vnode 全部更新後呼叫,一般使用 update 即可

沒搞懂componentupdated和update的區別

unbind:

作用:在元素被移除bind時,會執行動作

目前我沒有想到有什麼方法能夠將元素的bind移除,知道的大佬可以教教我。

時間順序:

bind>inserted(>update/componentupdated)>unbind

自定義指令的鉤子函式簡寫

vue規定了乙個簡寫方式,相當於將函式定義到bind和update中

定義方式:

'指令名稱'

:function

(el,binding)

Linux中基礎的一些指令

一 其他命令 1.clear 清屏 2.ls 列出當前資料夾下的所有檔案 eg ls home 列出 home資料夾下的所有檔案 ls a 列出當前資料夾所有檔案,包括隱藏檔案 3.ls l 列出當前資料夾的所有子檔案,以長列表的形式 eg drwxrwxr x 2 terry webui 4096...

Oracle的一些指令

1 檢視所有的資料庫例項 select fromv instance 如 ora9i 2 檢視當前庫的所有資料表 sql select table name from all tables select from all tables 返回所有表 select table name from all...

linux 的一些指令

ls pwd 顯示使用者當前所在的目錄 cd 將當前工作目錄改變到指定目錄下 touch 建乙個檔案 rmmkdir 建立目錄 rmdir 刪除目錄或者檔案 man cp src dest ctrl l 清屏 clear su username 切換賬戶到username 退出賬戶 exit 0 c...