一、什么是指令
用來擴(kuò)張html標(biāo)簽的功能
vue常用指令
- v-model:雙向數(shù)據(jù)綁定，常用于表單元素
- v-for: 對數(shù)組或?qū)ο筮M(jìn)行循環(huán)操作
- v-on:時(shí)間綁定,用法：v-on:事件
- v-show/v-if：控制元素的顯示隱藏
1.v-model
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
msg:''
}
})
</script>
我們把msg綁定到input元素上，同時(shí)p標(biāo)簽里也要現(xiàn)實(shí)msg.打開頁面我們發(fā)現(xiàn)當(dāng)向input中輸入內(nèi)容時(shí)，p標(biāo)簽中的值會(huì)隨著input中的內(nèi)容變化，這就是一個(gè)最簡單的雙向數(shù)據(jù)綁定
2.v-for:對數(shù)組或?qū)ο筮M(jìn)行循環(huán)操作
<div id='itany'>
<ul>
<li v-for='val in fruit'>{{val}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
fruit:['香蕉','蘋果','鴨梨']
}
})
</script>
現(xiàn)在要把fruit數(shù)組中的水果現(xiàn)實(shí)在li中，所以就要循環(huán)li, 所以li標(biāo)簽中要用v-for="val in fruit"
注:val不是固定值，可以自己寫，li標(biāo)簽之間顯示的就是val值
如果我們也想顯示數(shù)組中元素的下標(biāo),只需要將html改成如下即可
<div id='itany'>
<ul>
<li v-for='(val,index) in fruit'>{{index}}=>{{val}}</li>
</ul>
</div>
index就代表元素的下標(biāo)，當(dāng)然index也不是固定值，也是可以自己寫的
2.1循環(huán)對象也是同理的
<div id='itany'>
<ul>
<li v-for='(val,ind) in user'>{{ind}}=>{{val}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
user:{id:'001',name:'jack',age:'18'}
}
})
</script>
2.2循環(huán)數(shù)組對象
<div id='itany'>
<ul>
<li v-for='(val,ind) in fruit'>
{{val.id}}
{{val.name}}
{{val.price}}
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
fruit:[
{id:'001',name:'香蕉',price:'1'},
{id:'002',name:'蘋果',price:'2'},
{id:'003',name:'鴨梨',price:'3'}
]
}
})
</script>
注：循環(huán)數(shù)組對象時(shí),val指的是數(shù)組中的每個(gè)對象訪問對象中的屬性值要用.（點(diǎn)），對象.屬性名
3.v-on:事件綁定
<div id='itany'>
<ul>
<button v-on:click='alt'>按鈕</button>
</ul>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
fruit:[
{id:'001',name:'香蕉',price:'1'},
{id:'002',name:'蘋果',price:'2'},
{id:'003',name:'鴨梨',price:'3'}
]
},
methods:{
alt:function(){
alert('v-on事件綁定')
}
}
})
4案例1：完成如下圖所示的案例
1.png
點(diǎn)擊按鈕把input中的內(nèi)容添加到下面的水果列表中
代碼如下
<body>
<div id='itany'>
<input type="text" name="" v-model='fruit'>
<button v-on:click='add'>添加水果</button>
<ul>
<li v-for='val in fruitList'>{{val}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
fruitList:['香蕉','蘋果','鴨梨'],
fruit:''
},
methods:{
add:function(){
this.fruitList.push(this.fruit);//向列表中插入值
//注：訪問vue實(shí)例中的數(shù)據(jù)要用this
this.fruit='';//清空input
}
}
})
</script>
</body>
注:
1. 原生js中向數(shù)組中添加元素要用push,在vue中同樣要用push
2.vue實(shí)例中的方法要訪問對象實(shí)例中的數(shù)據(jù)要用this
4.1案例2：完成如下圖所示的案例
2.png
在每個(gè)水果后面添加一個(gè)刪除按鈕，點(diǎn)擊刪除就可以把當(dāng)前的刪除，點(diǎn)擊添加就可以添加水果
<body>
<div id='itany'>
<input type="text" name="" v-model='fruit'>
<button v-on:click='add'>添加水果</button>
<ul>
<li v-for='val in fruitList'>
{{val}}
<button v-on:click='delt(index)'>刪除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
fruitList:['香蕉','蘋果','鴨梨'],
fruit:''
},
methods:{
add:function(){
this.fruitList.push(this.fruit);//向列表中插入值
//注：訪問vue實(shí)例中的數(shù)據(jù)要用this
this.fruit='';//清空input
},
delt:function(index){
this.fruitList.splice(index,1);
}
}
})
</script>
</body>
注：刪除的時(shí)候要傳一個(gè)index,這樣就可以實(shí)現(xiàn)點(diǎn)擊哪個(gè)刪除哪個(gè)，如果不想穿index,那就要把splice()中的index換成this就可以了
5.v-show/v-if
使用v-show/v-if完成如下效果圖
3.png
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width:100px;
height:100px;
background-color: #f00;
}
</style>
</head>
<body>
<div id='itany'>
<button v-on:click='hide'>點(diǎn)擊按鈕隱藏</button>
<button v-on:click='shows'>點(diǎn)擊按鈕顯示</button>
<button v-on:click='toggle'>點(diǎn)擊按鈕隱藏顯示來回切換</button>
<p v-show='flag'>歡迎光臨</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
flag:true,
},
methods:{
hide:function(){
this.flag=false;//點(diǎn)擊隱藏
},
shows:function(){
this.flag=true;//點(diǎn)擊顯示
},
toggle:function(){//點(diǎn)擊隱藏或顯示
if(this.flag){
this.flag=false;
}else{
this.flag=true;
}
}
}
})
</script>
</body>
</html>
v-show/v-if都可以控制元素的顯示和隱藏，但是方式不一樣，v-show使用的是display:none來控制的，v-if使用的是visibility:hidden來控制的
練習(xí)：
結(jié)合bootstrap完成如下效果
xx.png
點(diǎn)擊添加按鈕可以把輸入礦中的內(nèi)容添加到table中，點(diǎn)擊每行的刪除也可以當(dāng)前行刪除掉
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶管理</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div id='itany' class='container'>
<form>
<div class='form-group'>
<label>用戶名</label>
<input type="text" class='form-control' placeholder="請輸入用戶名" v-model='info.uname'>
</div>
<div class='form-group'>
<label>年齡</label>
<input type="text" class='form-control' placeholder="請輸入年齡" v-model='info.age'>
</div>
<div class='form-group'>
<label>郵箱</label>
<input type="text" class='form-control' placeholder="請輸入郵箱" v-model='info.email'>
</div>
<div class='form-group text-center'>
<input type="button" name="" class='btn btn-success' value='添加' v-on:click='add'>
<input type="button" name="" class='btn btn-info' value='重置'>
</div>
</form>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>郵箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(value,index) in user'>
<td>{{index+1}}</td>
<td>{{value.uname}}</td>
<td>{{value.age}}</td>
<td>{{value.email}}</td>
<td><button v-on:click='delet'>刪除</button></td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
user:[
{uname:'jack',age:18,email:'123@126.com'},
{uname:'rose',age:19,email:'456@126.com'},
{uname:'jhon',age:20,email:'789@126.com'}
],
info:{}
},
methods:{
add:function(){
this.user.push(this.info);
},
delet:function(){
this.user.splice(this,1);
}
}
})
</script>
</body>
</html>
