我在這里學(xué)習(xí)內(nèi)置指令
- v-model
- v-if
- v-show
- v-else
- v-for
- v-bind
- v-on
v-model表單數(shù)據(jù)模型雙向綁定
example：
① 表單文本輸入框效果
<input type="text" v-model.trim="myValue"> {{ myValue }}
export default {
data () {
return {
myValue: '',
}
}
- v-model.lazy 延遲，當(dāng)我們完成了輸入后按enter鍵才會(huì)有輸出。
<input type="text" v-model.lazy="myValue"> {{ myValue }}
輸入內(nèi)容沒有即刻顯示:
點(diǎn)擊Enter鍵后:
- v-model.number 強(qiáng)制我們輸入的值是數(shù)字
<input type="text" v-model.number="myValue"> {{ myValue }}
此時(shí)測試時(shí)笨腥，會(huì)發(fā)現(xiàn)效果和什么都不加即
<input type="text" v-model="myValue"> {{ myValue }}沒有任何區(qū)別
但實(shí)際上改變的是所輸入內(nèi)容的類型，我們可以對Mustache的輸入內(nèi)容稍作修改舶掖，改為{{ typeof myValu }}看看有什么不同之處
1.v-model時(shí)，無論是空白、還是純字母眠冈、純數(shù)字或者是數(shù)字字母混合桩引，其類型都是string
<input type="text" v-model="myValue"> {{ typeof myValue }}
- v-model.number時(shí)
當(dāng)文本框內(nèi)容為空白或者是輸入的第一個(gè)字符是非數(shù)字是缎讼，都是String類型
當(dāng)輸入的內(nèi)容為純數(shù)字或者是以數(shù)字開頭的都是number類型。
對于以數(shù)字開頭的數(shù)字字母混合按理來說應(yīng)該是String類型坑匠，但我們可以看到下圖第2,3兩個(gè)文本框血崭， 當(dāng)鼠標(biāo)不再聚焦到文本框時(shí)，數(shù)字后面的內(nèi)容就會(huì)自動(dòng)刪除厘灼。
- v-model.trim 文本框前后輸入的空格會(huì)被忽略掉夹纫。
② 復(fù)選框效果
<input type="checkbox" value="apple" v-model="myBox">apple
<input type="checkbox" value="banana" v-model="myBox">banana
<input type="checkbox" value="pinapple" v-model="myBox">pinapple
{{ myBox }}
export default {
data () {
return {
myBox: []
/*因?yàn)閺?fù)選框中有不同的元素，所以給myBox初始化為一個(gè)空的數(shù)組*/
}
}
v-if
v-if指令是根據(jù)條件表達(dá)式的值來執(zhí)行元素的插入或者刪除行為捷凄。
v-show
條件渲染指令，和v-if指令不同的是围来，使用v-show指令的元素始終會(huì)被渲染到HTML跺涤，它只是簡單地為元素設(shè)置CSS的style屬性匈睁。
v-if 是html代碼中有沒有被選中的內(nèi)容
v-show是沒有被選中的內(nèi)容display為none但它是存在的。
v-else
v-else元素必須立即跟在v-if或v-show元素的后面——否則它不能被識別桶错。
v-for
指令基于一個(gè)數(shù)組渲染一個(gè)列表航唆，它和JavaScript的遍歷語法相似
v-for="item in items" (items是一個(gè)數(shù)組，item是當(dāng)前被遍歷的數(shù)組元素院刁。)
v-for 數(shù)組渲染和對象渲染的區(qū)別
① 數(shù)組渲染
export default {
data () {
return {
hello: 'hello vue.js',
list: [
{
name: 'apple',
price: 34
},
{
name: 'banana',
price: 56
}
]
}
<template>
<div id="app">
<ul>
<li v-for="(item, index) in List">{{ item.name }} + {{ item.price }} + {{ index }}</li>
</ul>
</div>
</template>
結(jié)果演示為：
- apple + 34 + 0
- banana + 56 + 1
②對象渲染
data () {
return {
objList: {
name: 'apple',
price: 34,
color: 'red',
weight: '2kg'
}
}
}
<template>
<div id="app">
<ul>
<li v-for="(value, key) in objList">{{ key }} + {{ value }}</li>
</ul>
</div>
</template>
結(jié)果演示：
- name + apple
- price + 34
- color + red
- weight + 2kg
提示：
上面所用到的item,index,value,key都是自定義變量糯钙。
數(shù)組渲染可以顯示下標(biāo)如index，對象渲染可以顯示對象名如key
v-for參數(shù)列表
- 一個(gè)參數(shù) ：
v-for="value in items" - 兩個(gè)參數(shù)：
<div v-for="(value, key) in object"> {{ key }}: {{ value }} </div> - 三個(gè)參數(shù)：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
v-bind
綁定標(biāo)簽屬性退腥。
v-bind指令可以在其名稱后面帶一個(gè)參數(shù)任岸，中間放一個(gè)冒號隔開，這個(gè)參數(shù)通常是HTML元素的特性（attribute）狡刘，例如：v-bind:class （可以給這個(gè)class添加新的屬性）
example:用v-bind綁定class
①class 為一個(gè)字符串時(shí)
<a v-bind:class = "classStr">to baidu</a>
/*給a標(biāo)簽加上class為red-font的js代碼*/
export default {
data () {
return{
classStr: 'red-font'
}
}
}
②加上的類名也可以是一個(gè)對象享潜。
<a v-bind:class = "className">to baidu</a>
/*給a標(biāo)簽加上class為red-font的js代碼，根據(jù)布爾值判斷是否加入*/
export default {
data () {
return{
className: {
'red-font'/*這是類名*/ : true,
'blue-font': false
}
}
}
}
③以數(shù)組的方式添加類名
<a v-bind:class = "className">to baidu</a>
/*數(shù)組里面全部的類名都會(huì)被加入到a標(biāo)簽中*/
export default {
data () {
return{
className: [red-font, big-font, blue-font]
}
}
}
④在標(biāo)簽中直接輸入要添加的calss
<a v-bind:class = [classA, classB,{red-font: hassErr}]>to baidu</a>
/*同時(shí)將classA和classB渲染到了a標(biāo)簽中*/
export default {
data () {
return{
classA: 'isClassA',
classB: 'isClassB',
hassErr: true
}
}
}
或者<a v-bind:class = [classA, {red-font: true }]>to baidu</a>
v-on
v-on指令用于給監(jiān)聽DOM事件嗅蔬，它的用語法和v-bind是類似的
v-on可以是自定義事件也可以是瀏覽器的默認(rèn)事件剑按。
example：
瀏覽器默認(rèn)事件<a v-on:click="doSomething">
自定義事件：<a @my-event="onComaMyEvent">
v-bind和v-on的縮寫
Vue.js為最常用的兩個(gè)指令v-bind和v-on提供了縮寫方式。v-bind指令可以縮寫為一個(gè)冒號澜术，v-on指令可以縮寫為@符號艺蝴。
