一、什么是指令
用来扩张html标签的功能
vue常用指令
- v-model:双向数据绑定，常用于表单元素
- v-for: 对数组或对象进行循环操作
- v-on:时间绑定,用法：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元素上，同时p标签里也要现实msg.打开页面我们发现当向input中输入内容时，p标签中的值会随着input中的内容变化，这就是一个最简单的双向数据绑定
2.v-for:对数组或对象进行循环操作
<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>
现在要把fruit数组中的水果现实在li中，所以就要循环li, 所以li标签中要用v-for="val in fruit"
注:val不是固定值，可以自己写，li标签之间显示的就是val值
如果我们也想显示数组中元素的下标,只需要将html改成如下即可
<div id='itany'>
<ul>
<li v-for='(val,index) in fruit'>{{index}}=>{{val}}</li>
</ul>
</div>
index就代表元素的下标，当然index也不是固定值，也是可以自己写的
2.1循环对象也是同理的
<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循环数组对象
<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>
注：循环数组对象时,val指的是数组中的每个对象访问对象中的属性值要用.（点），对象.属性名
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
点击按钮把input中的内容添加到下面的水果列表中
代码如下
<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实例中的数据要用this
this.fruit='';//清空input
}
}
})
</script>
</body>
注:
1. 原生js中向数组中添加元素要用push,在vue中同样要用push
2.vue实例中的方法要访问对象实例中的数据要用this
4.1案例2：完成如下图所示的案例
2.png
在每个水果后面添加一个删除按钮，点击删除就可以把当前的删除，点击添加就可以添加水果
<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实例中的数据要用this
this.fruit='';//清空input
},
delt:function(index){
this.fruitList.splice(index,1);
}
}
})
</script>
</body>
注：删除的时候要传一个index,这样就可以实现点击哪个删除哪个，如果不想穿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'>点击按钮隐藏</button>
<button v-on:click='shows'>点击按钮显示</button>
<button v-on:click='toggle'>点击按钮隐藏显示来回切换</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;//点击隐藏
},
shows:function(){
this.flag=true;//点击显示
},
toggle:function(){//点击隐藏或显示
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来控制的
练习：
结合bootstrap完成如下效果
xx.png
点击添加按钮可以把输入矿中的内容添加到table中，点击每行的删除也可以当前行删除掉
代码
<!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>
网友评论