vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
一,vue的核心屬性
1,收集表單數(shù)據(jù)
1.1,收集數(shù)據(jù)案例
可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定,但是在有些輸入框中,還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用。
1.1.1,type類型的輸入框
這種方式的輸入框,是可以直接通過(guò)這個(gè)v-model獲取到值的。因?yàn)?strong>v-model默認(rèn)就是收集輸入框的value值
賬號(hào):<input type="type" v-model = "userInfo.account"> <br/><br/>
密碼:<input type="type" v-model = "userInfo.possword"> <br/><br/>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
userInfo:{
account:'',
possword:''
}
}1.1.2,radio類型的單選框
和上面的type類型不一樣,因?yàn)樯厦娴膖ext類型有輸入的value,而這種類型的數(shù)據(jù)沒(méi)有輸入值,只有單選值,因此需要在這個(gè)標(biāo)簽內(nèi)部加上這個(gè)value值,這樣才能獲取到選擇的值。
性別:
男<input type="radio" name="sex" v-model = "userInfo.sex" value="male">
女<input type="radio" name="sex" v-model = "userInfo.sex" value="female"> <br/><br/>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
userInfo:{
sex:''
}
}1.1.3,checkbox類型的復(fù)選框
在這個(gè)復(fù)選框中,由于也和這個(gè)單選框一樣,只有選擇,沒(méi)有具體的輸入這個(gè)value值,因此需要在標(biāo)簽內(nèi)部加上這個(gè)value值,除了需要在這個(gè)標(biāo)簽內(nèi)部加上這個(gè)value值之外,還需要在vue實(shí)例的data中,通過(guò)數(shù)組的方式接收這個(gè)復(fù)選框所選擇的值。
愛(ài)好:
學(xué)習(xí)<input type="checkbox" v-model = "userInfo.hobby" value="study">
運(yùn)動(dòng)<input type="checkbox" v-model = "userInfo.hobby" value="sport">
打游戲<input type="checkbox" v-model = "userInfo.hobby" value="games"> <br/><br/>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
userInfo:{
hobby:[]
}
}如果復(fù)選框沒(méi)有這個(gè)value值,那么勾選的本質(zhì)就是一個(gè)布爾屬性,如需要在勾選注意事項(xiàng)的時(shí)候,是可以不需要這個(gè)value值的,并且在data中接收到的這個(gè)值也是一個(gè)布爾值。
<input type="checkbox" v-model = 'userInfo.agree'>接受并訂閱
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
userInfo:{
agree:''
}
}1.1.4,select類型的下拉框
這個(gè)由于也是選擇框,沒(méi)有輸入具體的數(shù)據(jù),因此需要在option中配置value值。并且在vue實(shí)例中的data數(shù)據(jù)用字符串接收即可。
所屬地區(qū):
<select v-model="userInfo.city">
<option value="">請(qǐng)選擇所屬地區(qū)</option>
<option value="江西">江西</option>
<option value="廣東">廣東</option>
<option value="貴州">貴州</option>
<option value="貴州">湖南</option>
</select> <br/><br/>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
userInfo:{
city:''
}
}1.2,收集表單數(shù)據(jù)總結(jié)
text
若輸入框是一個(gè)文本屬性,則v-model收集的值是value值,用戶輸入的值就是value值
<input type = "text">
radio
若輸入框是一個(gè)單選框,則v-model收集的是value值,并且在標(biāo)簽內(nèi)需要配置value值
<input type = "radio">
checkbox
若輸入框是一個(gè)復(fù)選框,那就需要分情況討論
1,如果input中沒(méi)有配置value屬性,那么收集到的就是一個(gè)是否勾選的checked,是一個(gè)布爾值
2,如果input輸入框中有配置value的屬性:
(1).如果在data中的初始值是一個(gè)非數(shù)組,如一個(gè)字符串,那么收集到的也是checked的布爾值
(2).如果data中的初始值是一個(gè)數(shù)組,那么收集到的就是value組成的數(shù)組
1.3,v-model的三個(gè)修飾符
lazy
指的是失去焦點(diǎn)在收集數(shù)據(jù),如下在文本框中輸入數(shù)據(jù)時(shí),不需要實(shí)時(shí)的根據(jù)用戶的輸入或者刪除將內(nèi)容進(jìn)行數(shù)據(jù)的收集,而是在點(diǎn)擊其他組件,失去焦點(diǎn)的時(shí)候再去收集全部的數(shù)據(jù)
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
number
輸入字符串轉(zhuǎn)化為有效的數(shù)字,比如在輸入用戶的年齡或者電話號(hào)碼的時(shí)候,如果后端沒(méi)有做這個(gè)是否為全部數(shù)字的校驗(yàn)的時(shí)候,那么就可以通過(guò)這個(gè)指令進(jìn)行校驗(yàn)了。這個(gè)指令一般搭配這個(gè)輸入框的number類型一起使用
年齡:<input type="number" v-model.number = "userInfo.age"> <br/><br/>
trim
對(duì)輸入的數(shù)據(jù)進(jìn)行收尾的去除空格。這個(gè)在實(shí)際開(kāi)發(fā)中,如果后端沒(méi)有及時(shí)的對(duì)前端傳過(guò)來(lái)的數(shù)據(jù)進(jìn)行一個(gè)字符串的去空格的話,也是可以通過(guò)前端的這個(gè)指令進(jìn)行一個(gè)數(shù)據(jù)的去重的。
賬號(hào):<input type="type" v-model.trim = "userInfo.account"> <br/><br/>
2,指令
2.1,基本指令
在vue內(nèi)部提供了很多可以直接使用的指令,如一些使用比較頻繁的指令,如下
v-bind:?jiǎn)蜗蚪壎? v-model:雙向綁定 v-for:遍歷數(shù)組 v-on:監(jiān)聽(tīng)事件 v-if:條件渲染(控制結(jié)點(diǎn)是否存在) v-show:條件渲染(控制結(jié)點(diǎn)是否展示) v-else:配合v-if使用
除了上面這些使用的頻繁的基本指令之外,vue也提供了很多的其他指令
2.2.1,v-text
可以直接在標(biāo)簽中使用,將會(huì)把標(biāo)簽所在的結(jié)點(diǎn)渲染文本內(nèi)容
<div v-text = "name"></div>
<div>{{name}}</div>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
name:'zhs'
}但是使用這個(gè)標(biāo)簽的時(shí)候,v-text會(huì)替換掉整個(gè)結(jié)點(diǎn)的內(nèi)容,如果直接使用 {{}} 的插值語(yǔ)法獲取值,就不會(huì)替換,因此直接使用 {{}} 來(lái)獲取值更靈活。
但是如果整個(gè)節(jié)點(diǎn)只有數(shù)據(jù)中的那一個(gè)值,如上面的只有name值,那么v-text和這個(gè)插值語(yǔ)法是等價(jià)的,如果結(jié)點(diǎn)中還有其他值,那么就不推薦使用這個(gè)v-text了。如下,如果結(jié)點(diǎn)中還有你好兩個(gè)字,那么就不能使用v-text,而是需要使用下面的雙花括號(hào) 的插值語(yǔ)法的形式獲取值。
<div v-text = "name"></div>
<div>你好,{{name}}</div>同樣這個(gè)結(jié)點(diǎn)也不會(huì)去解析data數(shù)據(jù)中的含有標(biāo)簽的值。如下,如果實(shí)例中的值是一個(gè)含有標(biāo)簽的值,在使用v-text的時(shí)候,會(huì)直接將這個(gè)str的這個(gè)值以文本的形式直接渲染在結(jié)點(diǎn)中,而不會(huì)對(duì)里面的標(biāo)簽進(jìn)行一個(gè)解析。
<div v-text = "str"></div>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
str:"<h3> 你好!</h3>"
}2.2.2,v-html
這個(gè)v-html和這個(gè)v-text的這個(gè)文本使用是一樣的,可以替換整個(gè)結(jié)點(diǎn)的內(nèi)容。但是和v-text不一樣的就是,v-html可以對(duì)data數(shù)據(jù)中的內(nèi)容進(jìn)行一個(gè)html的解析,如果數(shù)據(jù)中的字符串有html的標(biāo)簽,那么會(huì)直接對(duì)這些標(biāo)簽進(jìn)行一個(gè)解析。
<div v-text = "str"></div>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
str:"<a href = "www.baidu.com"> 點(diǎn)我跳轉(zhuǎn)百度</h3>"
}但是在使用這個(gè)v-html的時(shí)候,會(huì)帶有一定的安全性的問(wèn)題,如果在網(wǎng)站上動(dòng)態(tài)的渲染html,會(huì)容易的導(dǎo)致XSS攻擊,因此一定要在可信的內(nèi)容上使用v-html
2.2.3,v-clock
該指令是一個(gè)沒(méi)有值的指令,如果在網(wǎng)速慢時(shí),導(dǎo)致vue實(shí)例加載比較慢,從而讓html頁(yè)面給正常加載在頁(yè)面,讓用戶看到一些未經(jīng)加載的不友好的頁(yè)面時(shí),可以使用這個(gè)v-clock。
v-clock一般搭配這個(gè)css中的屬性樣式使用,如果在網(wǎng)速慢時(shí),導(dǎo)致這個(gè) {{name}} 直接以文本的形式渲染在頁(yè)面上,那么可以先使用這個(gè)display這個(gè)屬性將對(duì)應(yīng)的html的內(nèi)容暫時(shí)給隱藏掉,在加載到vue實(shí)例之后,那么這個(gè)v-clock這個(gè)指令就會(huì)被刪除,那么這個(gè)display也使用不上,那么這個(gè)name對(duì)應(yīng)的值就會(huì)被正常的展示
<style>
//只有是這個(gè)v-clock屬性的都有下面的樣式
[v-clock]{
display:none;
}
</style>
<div id = "root">
<h1 v-clock>{{name}}</h1>
</div>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
name:'zhs'
}2.2.4,v-once
該指令也是一個(gè)沒(méi)有值的指令,就是值在標(biāo)簽中使用這個(gè)指令之后,初次渲染這個(gè)值是一個(gè)動(dòng)態(tài)指令,渲染完這個(gè)值之后會(huì)這里面的內(nèi)容就會(huì)變成一個(gè)靜態(tài)的內(nèi)容,以后數(shù)據(jù)發(fā)生改變的時(shí)候不會(huì)引起v-once所在結(jié)果的更新。
<div id = "root">
<h1 v-once>初始值為:{{n}}</h1>
<h1>當(dāng)前n的值為:{{n}}</h1>
<button @click="n++">點(diǎn)我n+1</button>
</div>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
n:1
}2.2.5,v-pre
這個(gè)結(jié)點(diǎn)也是沒(méi)有值的,如果在結(jié)點(diǎn)上加了這個(gè)這個(gè)指令,那么vue會(huì)跳過(guò)該結(jié)點(diǎn)的編譯過(guò)程,就是會(huì)將開(kāi)發(fā)人員在結(jié)點(diǎn)上寫的內(nèi)容直接渲染在頁(yè)面上,因此這個(gè)指令最好不要亂加。但是也可以通過(guò)添加這個(gè)指令,將一些沒(méi)有使用到指令語(yǔ)法,插值語(yǔ)法的結(jié)點(diǎn)更快的加速編譯。
如下第一個(gè)h1標(biāo)簽為純文本,和vue實(shí)例沒(méi)有太大關(guān)系,因此為了加速編譯,可以直接使用這個(gè)v-pre指令。
<div id = "root">
<h1 v-pre>vue其實(shí)很簡(jiǎn)單</h1>
<h1>當(dāng)前n的值為:{{n}}</h1>
<button @click="n++">點(diǎn)我n+1</button>
</div>
<!-- vue實(shí)例中的data數(shù)據(jù) -->
data:{
n:1
}2.2,自定義指令
2.2.1,函數(shù)式自定義指令
就是自定義一些vue中不存在的指令,可以在vue實(shí)例中通過(guò)這個(gè)directives來(lái)實(shí)現(xiàn),他和data平級(jí),里面通過(guò)定義函數(shù)來(lái)實(shí)現(xiàn)這個(gè)自定義的命令,在定義函數(shù)時(shí)不需要加上v- ,不過(guò)在使用的時(shí)候需要加上。
假設(shè)一個(gè)需求,定義一個(gè) v-big 的指令,其功能和v-text類似,但是會(huì)將綁定的數(shù)值放大10倍。其完成的代碼實(shí)現(xiàn)如下:
<div id="root">
<h1>當(dāng)前元素的值是:<span v-text = "n"></span></h1>
<h1>放大10倍后的值是:<span v-big = "n"></span></h1>
<button @click="n++">點(diǎn)我n+1</button>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止vue啟動(dòng)時(shí)提示生產(chǎn)提示
new Vue({
//指定當(dāng)前實(shí)例為哪個(gè)容器服務(wù),id對(duì)應(yīng)#,class對(duì)應(yīng).
el:'#root',
//data用于存儲(chǔ)數(shù)據(jù),只有el對(duì)應(yīng)的容器可以使用
data:{
n:1
},
directives:{
// element:一個(gè)真實(shí)的dom元素span
// binding:標(biāo)簽和元素之間的綁定,即span和這個(gè)big之間的綁定
big(element,binding){
//修改元素里面的值
element.innerText = binding.value * 10;
console.log(element,binding)
}
}
})
</script>并且big函數(shù)被調(diào)用的時(shí)機(jī)有兩種
1:指令與元素成功綁定時(shí),就是一上來(lái)第一次使用的時(shí)候
2:指令所在的模板被重新解析時(shí)被調(diào)用,比如data中有數(shù)據(jù)發(fā)生改變
2.2.3,對(duì)象式自定義指令
再來(lái)一個(gè)需求,就是自定義一個(gè)v-fbind指令,和v-bind功能類似,但可以讓其所綁定的input元素默認(rèn)的獲取焦點(diǎn)。
<div id="root">
<input type="text" v-fbind:value = "n">
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止vue啟動(dòng)時(shí)提示生產(chǎn)提示
new Vue({
//指定當(dāng)前實(shí)例為哪個(gè)容器服務(wù),id對(duì)應(yīng)#,class對(duì)應(yīng).
el:'#root',
//data用于存儲(chǔ)數(shù)據(jù),只有el對(duì)應(yīng)的容器可以使用
data:{
n:1
},
directives:{
fbind:{
//指令與元素成功綁定時(shí)
bind(element,binding){
element.value = binding.value * 10
},
//指令所在元素被插入頁(yè)面時(shí)
inserted(element,binding){
element.focus();
},
//指令所在的模板被重新解析時(shí)被調(diào)用
update(element,binding){
element.value = binding.value * 10
}
}
}
})
</script>從上面兩段可以發(fā)現(xiàn),這個(gè)函數(shù)式的寫法就是對(duì)象式的簡(jiǎn)寫,由于binding和這個(gè)update兩個(gè)函數(shù)要做的事基本是一樣的,因此在函數(shù)式中只需要寫一份即可。而這個(gè)inserted就是為了解決指令綁定完元素,但是元素還在內(nèi)存中,還沒(méi)有應(yīng)用到頁(yè)面上而出現(xiàn)的問(wèn)題。
2.2.3,全局指令
上面兩個(gè)講的主要是在vue實(shí)例的局部指令,如果多個(gè)實(shí)例都需要使用這個(gè)指令的話,那么就可以定義成全局指令。
函數(shù)式全局指令
//Vue.directive(指令名,回調(diào)函數(shù))
Vue.directives("big",function(element,binding){
//修改元素里面的值
element.innerText = binding.value * 10;
console.log(element,binding)
)對(duì)象式全局指令
//Vue.directive(指令名,配置對(duì)象)
Vue.directives("fbind",fbind:{
//指令與元素成功綁定時(shí)
bind(element,binding){
element.value = binding.value * 10
},
//指令所在元素被插入頁(yè)面時(shí)
inserted(element,binding){
element.focus();
},
//指令所在的模板被重新解析時(shí)被調(diào)用
update(element,binding){
element.value = binding.value * 10
}
})這樣就可以實(shí)現(xiàn)全局的指令配置了,其底層原理和過(guò)濾器一樣。
到此這篇關(guān)于vue的表單數(shù)據(jù)收集,基本指令和自定義指令的文章就介紹到這了,更多相關(guān)vue基本指令和自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式
這篇文章主要介紹了Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
Vue3 elementUI 中 date-picker 使用過(guò)程遇到坑
這篇文章主要介紹了Vue3 elementUI 中 date-picker 使用過(guò)程遇到坑,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過(guò)點(diǎn)擊空白頁(yè)面來(lái)讓彈窗隱藏,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)抽獎(jiǎng)效果Demo
這篇文章主要介紹了vue實(shí)現(xiàn)抽獎(jiǎng)效果Demo,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue3中element-plus表格搜索過(guò)濾數(shù)據(jù)
本文主要介紹了vue3中element-plus表格搜索過(guò)濾數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-03-03

