一，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類型的輸入框

這種方式的輸入框，是可以直接通過這個(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ù)沒有輸入值，只有單選值，因此需要在這個(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è)單選框一樣，只有選擇，沒有具體的輸入這個(gè)value值，因此需要在標(biāo)簽內(nèi)部加上這個(gè)value值，除了需要在這個(gè)標(biāo)簽內(nèi)部加上這個(gè)value值之外，還需要在vue實(shí)例的data中，通過數(shù)組的方式接收這個(gè)復(fù)選框所選擇的值。

愛好:
學(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ù)選框沒有這個(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è)由于也是選擇框，沒有輸入具體的數(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中沒有配置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í)候，如果后端沒有做這個(gè)是否為全部數(shù)字的校驗(yàn)的時(shí)候，那么就可以通過這個(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í)際開發(fā)中，如果后端沒有及時(shí)的對(duì)前端傳過來的數(shù)據(jù)進(jìn)行一個(gè)字符串的去空格的話，也是可以通過前端的這個(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)聽事件
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)容，如果直接使用 {{}} 的插值語法獲取值，就不會(huì)替換，因此直接使用 {{}} 來獲取值更靈活。

但是如果整個(gè)節(jié)點(diǎn)只有數(shù)據(jù)中的那一個(gè)值，如上面的只有name值，那么v-text和這個(gè)插值語法是等價(jià)的，如果結(jié)點(diǎn)中還有其他值，那么就不推薦使用這個(gè)v-text了。如下，如果結(jié)點(diǎn)中還有你好兩個(gè)字，那么就不能使用v-text，而是需要使用下面的雙花括號(hào) 的插值語法的形式獲取值。

<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ǎng)站上動(dòng)態(tài)的渲染html，會(huì)容易的導(dǎo)致XSS攻擊，因此一定要在可信的內(nèi)容上使用v-html

2.2.3，v-clock

該指令是一個(gè)沒有值的指令，如果在網(wǎng)速慢時(shí)，導(dǎo)致vue實(shí)例加載比較慢，從而讓html頁面給正常加載在頁面，讓用戶看到一些未經(jīng)加載的不友好的頁面時(shí)，可以使用這個(gè)v-clock。

v-clock一般搭配這個(gè)css中的屬性樣式使用，如果在網(wǎng)速慢時(shí)，導(dǎo)致這個(gè) {{name}} 直接以文本的形式渲染在頁面上，那么可以先使用這個(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è)沒有值的指令，就是值在標(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)也是沒有值的，如果在結(jié)點(diǎn)上加了這個(gè)這個(gè)指令，那么vue會(huì)跳過該結(jié)點(diǎn)的編譯過程，就是會(huì)將開發(fā)人員在結(jié)點(diǎn)上寫的內(nèi)容直接渲染在頁面上，因此這個(gè)指令最好不要亂加。但是也可以通過添加這個(gè)指令，將一些沒有使用到指令語法，插值語法的結(jié)點(diǎn)更快的加速編譯。

如下第一個(gè)h1標(biāo)簽為純文本，和vue實(shí)例沒有太大關(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í)例中通過這個(gè)directives來實(shí)現(xiàn)，他和data平級(jí)，里面通過定義函數(shù)來實(shí)現(xiàn)這個(gè)自定義的命令，在定義函數(shù)時(shí)不需要加上v- ，不過在使用的時(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í)，就是一上來第一次使用的時(shí)候

2：指令所在的模板被重新解析時(shí)被調(diào)用，比如data中有數(shù)據(jù)發(fā)生改變

2.2.3，對(duì)象式自定義指令

再來一個(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
                },
                //指令所在元素被插入頁面時(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)存中，還沒有應(yīng)用到頁面上而出現(xià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
    },
    //指令所在元素被插入頁面時(shí)
    inserted(element,binding){
        element.focus();
    },
    //指令所在的模板被重新解析時(shí)被調(diào)用 
    update(element,binding){
        element.value = binding.value * 10
    }
})

這樣就可以實(shí)現(xiàn)全局的指令配置了，其底層原理和過濾器一樣。

到此這篇關(guān)于vue的表單數(shù)據(jù)收集，基本指令和自定義指令的文章就介紹到這了,更多相關(guān)vue基本指令和自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論