網站首頁 Vue 正文
Vue.directive
自定義指令的五個鉤子函數
下面展示一些 內聯代碼片。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-focus="msg" v-model="msg">
div>
<script src="./vue.js">script>
<script>
Vue.directive('focus', {
// 五個鉤子函數
// 只調用一次, 在指令 和 元素第一次綁定時執行, 此時元素不一定渲染了
// 一般在bind中可以進行指令的初始化 (具體初始化什么內容, 和功能相關)
bind() {
console.log('bind')
},
// 在指令所在元素, 插入到頁面中時, 執行 (元素肯定是渲染了)
inserted() {
console.log('inserted')
},
// 當指令的值發生修改時, 觸發
update() {
console.log('update')
},
// 會等待當前組件以及子組件的節點都更新完成后, 調用
componentUpdated() {
console.log('componentUpdated')
},
// 當指令 和 元素解綁時觸發
unbind() {
console.log('unbind')
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
script>
body>
html>
鉤子函數的參數
鉤子函數有倆個參數
參數1: el 指令所在的元素
參數2: binding 指令相關的信息的對象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<div id="app">
<p v-demo:aa.bb.cc.dd="msg">{{ msg }}p>
div>
<script src="./vue.js">script>
<script>
// v-model="msg"
// v-text="msg"
// 完整的指令: v-on:click.prevent.stop="fn"
Vue.directive('demo', {
// 5個鉤子函數, 鉤子函數的參數
// 5個鉤子函數的參數一個樣
// 參數1: el 指令所在的元素
// 參數2: binding 指令相關的信息的對象
// (1) name 指令名 => demo
// (2) value 指令的值
// (3) arg 指令的參數 :aa
// (4) modifiers 指令的修飾符 .bb.cc
bind(el, binding) {
console.log(el)
console.log(binding)
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
/*
鉤子函數的參數
el: 指令所在的當前元素
binding: 指令相關信息的對象
(1) name 指令名
(2) value 指令值
(3) arg 指令的參數 :click
(4) modifiers 指令的修飾符 .prevent.stop
*/
script>
body>
html>
下面是對應參數
下面是自定義指令的用法
- value 的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<div id="app">
<h1 v-red>{{ msg }}h1>
<h2 v-color="color">你好哇h2>
<hr>
<p v-text="msg">p>
<p v-mytext="msg">p>
div>
<script src="./vue.js">script>
<script>
// var div = document.createElement('div')
// div.style.backgroundColor = 'blue'
// 需求1: v-red 指令, 給哪個元素加, 這個元素字體顏色就變成紅色
Vue.directive('red', {
// 一般指令的初始化, 都會放到bind中
bind(el, binding) {
el.style.color = 'red'
}
})
// 需求2: v-color = '值'
// el 當前指令所在的元素
// binding 指令相關的信息對象
// (1) name 指令名
// (2) value 指令值
// (3) arg 指令參數 :click
// (4) modifiers 指令的修飾符 .aa.bb
Vue.directive('color', {
bind(el, binding) {
console.log(binding);
// console.log(binding.value)
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
})
// 實現 v-mytext
Vue.directive('mytext', {
bind(el, binding) {
el.innerText = binding.value
},
update(el, binding) {
el.innerText = binding.value
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
color: 'green'
}
})
script>
body>
html>
- arg 的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<div id="app">
<h1 v-bind:title="msg" v-bind:str="str">{{ msg }}h1>
<h1 v-mybind:title="msg" v-mybind:str="str">{{ msg }}h1>
<hr>
<p v-color:bg="bgColor">我是文本, 我希望設置背景顏色p>
<p v-color:font="fontColor">我是文本, 我希望設置字體顏色p>
div>
<script src="./vue.js">script>
<script>
// el 指令所在的元素
// binding 指令相關的信息
// (1) name 指令名
// (2) value 指令值
// (3) arg 指令參數 :title 屬性名
// (4) modifiers 指令的修飾符 .bb .cc
// v-bind:title="msg" 設置元素的 title屬性, 值就是 msg的值
Vue.directive('mybind', {
bind(el, binding) {
console.log(binding.arg) // 屬性名
// console.log(binding.value) // 屬性值
// getAttribute 獲取標簽屬性, setAttribute(name, value)
el.setAttribute(binding.arg, binding.value)
},
update(el, binding) {
el.setAttribute(binding.arg, binding.value)
}
})
// 需求: 對于 v-color 進階
// v-color:bg="值" :bg就是設置背景顏色
// v-color:font="值" :font就是設置字體顏色
Vue.directive('color', {
bind(el, binding) {
// 可能設置背景, 也可能設置是字體, 判斷一下
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
},
update(el, binding) {
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
str: '你好哇',
bgColor: 'pink',
fontColor: 'red'
}
})
script>
body>
html>
- modifiers 的使用(修飾符)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<div id="app">
<p v-color:bg.bold.italic="bgColor">我是加粗的文本, 我希望設置背景顏色p>
<p v-color:font.italic="fontColor">我是傾斜的文本, 我希望設置字體顏色p>
div>
<script src="./vue.js">script>
<script>
// el 指令所在的元素
// binding 指令相關的信息
// (1) name 指令名
// (2) value 指令值
// (3) arg 指令參數 :title 屬性名
// (4) modifiers 指令的修飾符 .bb .cc
// 需求: 對于 v-color 進階
// v-color:bg.bold="值" .bold 字體要加粗
// v-color:font.italic="值" .italic 字體要傾斜
Vue.directive('color', {
bind(el, binding) {
// 可能設置背景, 也可能設置是字體, 判斷一下
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
console.log(binding.modifiers)
if (binding.modifiers.bold) {
el.style.fontWeight = 700
}
if (binding.modifiers.italic) {
el.style.fontStyle = 'italic'
}
},
update(el, binding) {
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
str: '你好哇',
bgColor: 'pink',
fontColor: 'red'
}
})
script>
body>
html>
自定義指令小技巧
當bind和updata 邏輯一樣是可以簡寫
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<div id="app">
<h1 v-color="color">{{ msg }}h1>
div>
<script src="./vue.js">script>
<script>
// Vue.directive('color', {
// bind() {...},
// update() {...}
// })
// 如果配置的鉤子函數, bind 和 update 的邏輯, 是一模一樣的, 可以簡寫
// Vue.directive(指令名, 函數) 這個函數表示直接統一配置了 bind 和 update
Vue.directive('color', (el, binding) => {
el.style.color = binding.value
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
color: 'red'
}
})
script>
body>
html>
原文鏈接：https://blog.csdn.net/ss043500/article/details/119581613
相關推薦
- 2022-05-31 jQuery實現側邊導航欄及滑動電梯效果(仿淘寶)_jquery
- 2022-09-15 docker倉庫登錄及配置insecure-registries的方法_docker
- 2022-05-01 使用SQL實現車流量的計算的示例代碼_MsSql
- 2022-08-03 GoFrame框架garray并發安全數組使用開箱體驗_Golang
- 2024-07-18 spring @retryable不生效的一種場景
- 2022-04-21 C語言中的柔性數組你真的了解嗎_C 語言
- 2023-01-19 利用Python構建Flutter應用的教程詳解_python
- 2022-10-14 laravel 中關于模型查詢構造器的特殊用法
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速