vue自定義指令的建立和使用

2021-09-03 01:47:36 字數 813 閱讀 5845

1、bind:只呼叫一次,指令第一次繫結到元素時呼叫,用這個鉤子函式可以定義乙個繫結時執行一次的初始化動作。

2、inserted:被繫結元素插入父節點時呼叫(父節點存在即可呼叫,不必存在於document中)。

3、update:被繫結於元素所在的模板更新時呼叫,而無論繫結值是否變化。通過比較更新前後的繫結值,可以忽略不必要的模板更新。

4、componentupdated:被繫結元素所在模板完成一次更新週期時呼叫。

5、unbind:只呼叫一次,指令與元素解綁時呼叫

方式一main.js裡面引入例如

import rounddirective from 『…/js/directive/round』

全域性註冊

vue.directive(『round』, rounddirective)

貼上round.js的**

export default,

]if (typeof value === 『object』)

style.width = width + 『px』

style.height = height + 『px』

style.verticalalign = 『middle』

const colorname = colorvalue.filter(item => )

style.background = colorname[0] ? colorname[0].color : ''

style.display = 'inline-block'

})}

}}引用

方式二官方文件

vue自定義指令的建立和使用

一 自定義指令的建立和使用 vue自帶的指令很多,v for v if v else v else if v model v bind v on v show v html v text.但是這些指令都是比較偏向於工具化,有些時候在實現具體的業務邏輯的時候,發現不夠用,如何來自定義指令.1 自定義指...

vue 自定義指令的使用

在vue開發專案中,指令的使用場景也是比較多的,那麼該如何定義使用呢?找到 src directive 下新建 gender 目錄,下面新建 index.js 和 gender.js gender 使用方法 1 gender.install install export default gender...

vue自定義過濾器的建立和使用

過濾器的作用 實現資料的篩選 過濾 格式化。vue1.版本是有內建的過濾器,但是在vue2.所有的版本都已經沒有自帶的過濾器了。1 過濾器建立 過濾器的本質 是乙個有引數 有返回值的方法 new vue 2 過濾器使用 語法 舉個例子 3 過濾器高階用法 在使用過濾器的時候,還可以指定引數,來告訴過...