2018-09-14
什么是Vue的指令牺弹？Vue的指令有哪些浦马？其實(shí)這些這些看著繁瑣的指令，他總共分為兩大塊（內(nèi)置指令和自定義指令）张漂。今天我們就先說說內(nèi)置指令晶默。
QAQ:只有元素可以設(shè)置樣式。
①v-for
循環(huán)指令（遍歷,其意義在于檢查集合中的元素并做處理）根據(jù)一組數(shù)據(jù)的選項(xiàng)列表進(jìn)行渲染航攒。
eg:<li v-for="(item,index) in arbj">{{item}}</li>
②v-model
數(shù)據(jù)雙向綁定磺陡，用于表單元素;他的指令在<input>,<textarea>,<select>元素上創(chuàng)建數(shù)據(jù)雙向綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素漠畜。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)币他，并對一些極端場景進(jìn)行一些特殊處理。
eg:<input type="text" v-model="message">
<p>{{message}}</p>
③v-on
綁定事件監(jiān)聽器,事件類型由參數(shù)指定憔狞。表達(dá)式為：v-on：事件名="函數(shù)名"(事件名與Js不同蝴悉，使用時(shí)沒有on)。
eg:<button v-on:click="funcname"></button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='exchange'>
<p>{{value}}</p>
<button v-on:click="exchanged">切換</button>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#exchange',
data:{
value:'hello word',
// txt:'hello vue',
blur:true
},
methods:{
exchanged:function(){
// this.value=this.txt
if(this.blur==true){
this.value='hello vue',
this.blur=false
}else{
this.value='hello word'
this.blur=true
}
}
}
})
//添加 push()
//刪除 splice(index,n) //從哪開始 刪除幾個(gè)
</script>
</body>
</html>
效果圖：
QAQ：數(shù)組元素的添加與刪除（添加：push(),刪除：splice(index,n)=》》 （從哪個(gè)開始刪瘾敢，刪幾個(gè)））拍冠。
④v-bind
動(dòng)態(tài)的綁定一個(gè)或多個(gè)特性，或一個(gè)組件prop到表達(dá)式簇抵。在綁定class或style特性時(shí)倦微，支持其他特性的值，如數(shù)組或?qū)ο?/code>正压。
(在綁定 prop 時(shí)，prop 必須在子組件中聲明责球〗孤模可以用修飾符指定不同的綁定類型。沒有參數(shù)時(shí)雏逾，可以綁定到一個(gè)包含鍵值對的對象嘉裤。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對象)。表達(dá)式：v-bind:屬性名="值",<script></script>中用methods（方式栖博，方法）：{function(){}}切記只有函數(shù)調(diào)用時(shí)函數(shù)方可執(zhí)行屑宠。
eg:<img v-bind:src="imageSrc">
QAQ：v-bind的屬性名稱駝峰化。
⑤v-show
控制元素顯示影藏仇让。不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中典奉。v-show 只是簡單地切換元素的 CSS 屬性 display躺翻。
⑥v-if
隱藏屬性=》》直接刪了visibility:hidden;
QAQ:v-show，v-if的區(qū)別：
1 .v-if當(dāng)值為 true時(shí)卫玖，顯示div 公你，當(dāng)值為false時(shí)，該元素消失假瞬，代碼也會(huì)消失陕靠，相當(dāng)于將代碼刪除了，當(dāng)在為true時(shí)脱茉，頁面會(huì)重新渲染div;
而v-show 控制的隱藏出現(xiàn)剪芥，只是將css屬性設(shè)為了display：none 或block;
⑦v-else，v-else-if
不需要表達(dá)式琴许，前一兄弟必須有v-if或v-else-if
if(){}
if(條件){1}else{2}
else...if 多重條件語句
if(){
}else if(){
}else if(){
}else{
}
v-if,v-else,v-else-if隨機(jī)數(shù)效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p v-if='num==0'>00000000000</p>
<p v-else-if='num==1'>1111111111</p>
<p v-else-if='num==2'>22222222</p>
<p v-else='num==5'>555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()*(max-min+1)+min)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
效果圖:
![]()
num-01.png
v-for税肪，v-model，v-on綜合應(yīng)用(添加列表)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">
{{value}}
<button v-on:click='delt(index)'>刪除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: '#itany',
data: {
arr: ['吃飯', '睡覺', '打游戲'],
txt: ''
},
methods: {
add: function() {
this.arr.push(this.txt),
this.txt = ''
},
delt: function(ind) {
this.arr.splice(ind, 1)
}
}
})
</script>
</body>
</html>
效果圖：
圖片來回效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
overflow: hidden;
}
li {
margin-left: 50px;
width: 60px;
border: 1px solid #000;
float: left;
text-align: center;
list-style: none;
}
</style>
</head>
<body>
<div id='itany'>
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: '#itany',
data: {
url: 'images/03.jpg',
// num:[1,2,3,4,5]
list: ['images/03.jpg', 'images/06.jpg', 'images/07.jpg']
},
methods: {
chg: function(ind) {
this.url = this.list[ind]
}
}
})
</script>
</body>
</html>
效果圖：
