vue在標簽中怎么使用自定義屬性并獲取

蝸牛 互聯網技術資訊 2022-08-12 38 0

這篇文章主要介紹“vue在標簽中怎么使用自定義屬性并獲取”,在日常操作中,相信很多人在vue在標簽中怎么使用自定義屬性并獲取問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue在標簽中怎么使用自定義屬性并獲取”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

在標簽中使用(data-XXX)自定義屬性并獲取

我們在vue中有時候為給標簽加一些特有的屬性, 當我們在標簽上觸發了事件之后, 就可以在 event 對象上面獲取

標簽的寫法

<div?class="menu-item"?@click="clickMenu('參數一',$event)"?:data-mytype="1">
??<van-image?:src="aaa"></van-image>
??<span>{{?item.title?}}</span>
</div>

上面的 @click 的函數中, 如果要傳入事件參數, 必須使用 $event ,這是固寫的,不能變

當我們觸發了這個事件, 要在事件中得到 data-mytype的自定義屬性, 有兩種方法

方法一

methods:{
clickMenu(param1,event){
console.log(param1);//參數一
let?mytype?=?event.currentTarget.dataset.mytype;
}
}

方法二

methods:{
clickMenu(param1,event){
console.log(param1);//參數一
let?mytype?=?event.currentTarget.getAttribute("data-mytype");
}
}

網上有很多使用 event.srcElement 這個的已經過時了, 并且得不到想要的值, 上面兩種方式就可以解決

兩種方法的區別在于, 方法二更為通用一些,只要是標簽上的屬性, 不管是不是以“data-” 開頭的都可以獲取到, 而方法一, 只有在屬性是以 “data-” 開頭的才可以接收到?

vue基礎-自定義指令

v-on、v-bind、v-once等都是Vue內置指令,拿來就能用。

但他們的功能有時不能滿足我們。

這時我們就需要自定義一個指令,就像自定義一個函數一樣,完成我們想要做的事情。

模擬兩個需求,通過案例,對自定義指令的語法進行了解

需求1:

  • 定義一個v-big指令,和v-text功能類似,但會把綁定的數值放大10倍。

需求2:

  • 定義一個v-fbind指令,和v-bind功能類似,但可以讓其所綁定的input元素默認獲取焦點。

語法

<div?id="root">
	<h3>{{name}}</h3>
	<h3>當前的n值是:<span?v-text="n"></span>?</h3>
	<!--?<h3>放大10倍后的n值是:<span?v-big-number="n"></span>?</h3>?-->
	<h3>放大10倍后的n值是:<span?v-big="n"></span>?</h3>
	<button?@click="n++">點我n+1</button>
	<hr/>
	<input?type="text"?v-fbind:value="n">
</div>

自定義指令的語法,也和內置指令一樣,? ?v-xxx = "a"??或 v-xxx:a,? ? xxx為自定義指令的名字,a為綁定的屬性.

vue在標簽中怎么使用自定義屬性并獲取  vue 第1張

當自定義指令創建完,我們看一下Vue實例里的語法該怎么寫?

new?Vue({
	el:'#root',
	data:{
		name:'尚硅谷',
		n:1
	},
	directives:{
????????big(element,binding){
			console.log('big',this)?
			element.innerText?=?binding.value?*?10
		},
		fbind:{
			bind(element,binding){
				element.value?=?binding.value
			},
			inserted(element,binding){
			????element.focus()
			},
			update(element,binding){
				element.value?=?binding.value
			}
		}
	}
})

自定義指令被當作配置對象寫入directives對象中,其執行的方式寫成回調函數。

傳參

可以見得,配置對象中與有兩個傳參,element與binding,他們分別代表著,其所綁定的標簽,與其綁定的屬性。

directives:{
	big(element,binding){
		console.log(element)
		console.log(binding)
????},
//......

vue在標簽中怎么使用自定義屬性并獲取  vue 第2張

配置對象中常用的三個回調

配置對象中,有三個固定函數,它們分別是bind、inserted、update

fbind:{
	//指令與元素成功綁定時(一上來)
	bind(element,binding){
		element.value?=?binding.value
	},
	//指令所在元素被插入頁面時
	inserted(element,binding){
			element.focus()
	},
	//指令所在的模板被重新解析時
	update(element,binding){
		element.value?=?binding.value
	}
}

正如注釋所寫,bind是當指令與元素成功綁定,也就是也面被解構后,就會執行。

  • inserted是當所綁定元素在頁面存在時,執行

  • update是當模板被重新解構時,執行

全局自定義指令

如果想全局配置一個自定義指令,多個Vue實例都能調用,其寫法與過濾器的全局配置類似

語法:

Vue.directive(指令名,配置對象) 或 ? Vue.directive(指令名,回調函數)

//定義全局指令
Vue.directive('fbind',{
????bind(element,binding){
		element.value?=?binding.value
	},
}

文章到這里就結束了

最后,放上全部筆記

<body>
		<!--?
				需求1:定義一個v-big指令,和v-text功能類似,但會把綁定的數值放大10倍。
				需求2:定義一個v-fbind指令,和v-bind功能類似,但可以讓其所綁定的input元素默認獲取焦點。
				自定義指令總結:
						一、定義語法:
									(1).局部指令:
												new?Vue({															new?Vue({
													directives:{指令名:配置對象}???或???		directives{指令名:回調函數}
												})?																		})
									(2).全局指令:
													Vue.directive(指令名,配置對象)?或???Vue.directive(指令名,回調函數)
?
						二、配置對象中常用的3個回調:
									(1).bind:指令與元素成功綁定時調用。
									(2).inserted:指令所在元素被插入頁面時調用。
									(3).update:指令所在模板結構被重新解析時調用。
?
						三、備注:
									1.指令定義時不加v-,但使用時要加v-;
									2.指令名如果是多個單詞,要使用kebab-case命名方式,不要用camelCase命名。
		-->
		<!--?準備好一個容器-->
		<div?id="root">
			<h3>{{name}}</h3>
			<h3>當前的n值是:<span?v-text="n"></span>?</h3>
			<!--?<h3>放大10倍后的n值是:<span?v-big-number="n"></span>?</h3>?-->
			<h3>放大10倍后的n值是:<span?v-big="n"></span>?</h3>
			<button?@click="n++">點我n+1</button>
			<hr/>
			<input?type="text"?v-fbind:value="n">
		</div>
	</body>
	
	<script?type="text/javascript">
		Vue.config.productionTip?=?false
?
		//定義全局指令
		/*?Vue.directive('fbind',{
			//指令與元素成功綁定時(一上來)
			bind(element,binding){
				element.value?=?binding.value
			},
			//指令所在元素被插入頁面時
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析時
			update(element,binding){
				element.value?=?binding.value
			}
		})?*/
?
		new?Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函數何時會被調用?1.指令與元素成功綁定時(一上來)。2.指令所在的模板被重新解析時。
				/*?'big-number'(element,binding){
					//?console.log('big')
					element.innerText?=?binding.value?*?10
				},?*/
				big(element,binding){
					console.log('big',this)?//注意此處的this是window
					//?console.log('big')
					element.innerText?=?binding.value?*?10
				},
				fbind:{
					//指令與元素成功綁定時(一上來)
					bind(element,binding){
						element.value?=?binding.value
					},
					//指令所在元素被插入頁面時
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析時
					update(element,binding){
						element.value?=?binding.value
					}
				}
			}
		})
		
	</script>

到此,關于“vue在標簽中怎么使用自定義屬性并獲取”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注蝸牛博客網站,小編會繼續努力為大家帶來更多實用的文章!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看