初步认识Vue,以及其中常见的-指令
Vue简介
Vue.js是一套用于构建用户界面的渐进式框架,它只注重于视图层,采用自底向上增量式的设计。
指令
指令是Vue.js的重要特征,他是带着v-前缀的特殊属性,从写法上来说,指令的值限定为绑定表达式。指令用于在绑定表达式的值发生改变时,将这种数据的变化应用到DOM上。当数据变化时,指令会根据指定的操作对DOM进行修改,这样就无需手动的去管理DOM的变化和状态,提高了程序的可维护性。
下面介绍几个Vue中的常见指令:
1. v-bind指令
- v-bind指令可以为HTML元素绑定属性,就像下面的代码,通过v-bind指令将img元素的src属性与表达式imageSrc的值进行绑定。
- v-bind动态地绑定一个或多个特性,可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),如v-bind: class,class可以和v-bind:class同时存在 ,也就是说有class了,再添加v-bind:class并不会覆盖原来的样式类,而是在原来基础上添加新的类名。
- v-bind可以简写成 “:”
<img v-bind:src="imageSrc">;
使用v-bind为HTML元素绑定class属性。代码如下
<style>
.title{
color: #ff0000;
border: 1px solid #ff00ff;
display: inline-block;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
//使用v-bind指令,将该标签的class属性与数据对象中的value属性绑定
//数据对象中的value属性的值就是<span>标签的class属性值
<span v-bind:class="value">武汉加油,中国加油</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
value:'title'//定义绑定的属性值
}
});
</script>
</body>
2.v-on 指令
- v-on指令用于监听DOM事件,该指令在模板中直接使用,在触发事件时会执行一些JavaScript代码,在HTML中使用v-on指令,指令后面可以是所有原生事件名称。
- v-on可以简写成“@”
下面代码将click单击事件绑定到show()方法当中,当单击“显示”按钮时,将执行show()方法,该方法在Vue实例中进行定义;
<button v-on:click="show">显示</button>
使用v-on绑定事件,实现动态改变图片的透明度功能:
<body>
<div id="app">
<img id="image" v-bind:src="url" v-on:mouseover="visible(1)" v-on:mouseout="visible(0)">
</div>
<script>
var Vm=new Vue({
el:"#app",
data:{
url:'./img/d.jpg'//图片的地址
},
methods:{
visible:function(i){
var image= document.getElementById('image');
if(i==1){
image.style.opacity=0.5;
}else{
image.style.opacity=1;
}
}
}
})
</script>
</body
3.v-if、v-else 指令
- v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素,如果表达式得值为true,就输出DOM元素和它包含的子元素,否则就将DOM元素及其子元素移除。
- v-if后面“”中的内容是一个返回布尔值的表达式,表达式可以是一个布尔属性,也可以是一个返回布尔的运算式。
- v-if是条件渲染指令,它根据表达式的真假来删除和插入元素
- -v-else指令相当于JavaScript中的else部分,两个指令可以配合来使用,v-else指令与v-if或者v-show同时使用,v-if条件不成立则会显示v-else内容
例如可以使用这两个指令来判断2020年二月份的天数。代码如下:
<body>
<div id="app">
<p v-if="(year%4==0 && year%100!=0) || year%400==0">
{{show(29)}}
</p>
<p v-else>
{{show(28)}}
</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
year:2020
},
methods:{
show:function(days){
alert(this.year+'年2月份有'+days+'天');//弹出对话框
}
}
})
</script>
</body>
4.v-show 指令
<body>
<div id="app">
<p v-if="message">1</p>
<p v-show="message">2</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:false
}
})
</script>
</body>
- v-show不管条件是否成立,都会渲染html,而v-if只有条件成立才会渲染。
- 当 message的值为false条件不成立时,可以看到v-if的html并没有渲染出来,而使用v-show的div仅仅是更改了它的样式display: none。
小案例
点击按钮。来展示和隐藏文本:
<body>
<div id="app">
<p v-if="isShow">hello Vue</p>
<!-- <p v-show="isShow">hello Vue</p> -->
<button type="button" @click="show(1)">显示</button>
<button type="button" @click="show(0)">隐藏</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
isShow:true,
},
methods:{
show:function(type){
if(type){
this.isShow=true;
}else{
this.isShow=false;
}
}
}
})
</script>
</body>
5.v-for 指令
- Vue.js提供了列表渲染功能,指令基于一个数组渲染一个列表,可以将数组中的数据循环渲染到DOM中,使用v-for指令进行渲染,其效果类似于JavaScript中的遍历。
- 使用v-for指令遍历数组使用item in items形式的语法,其中itmes为数据对象中的数组名称,item为数组元素的别名,通过别名可以获取当前数组遍历的每个元素。
例如:使用v-for指令输出数组中储存的名字:
<body>
<div id="app">
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
//自定义对象中的数组名称
items:[
{name:'北京'},
{name:'上海'},
{name:'杭州'},
{name:'重庆'},
{name:'武汉'}
]
}
})
</script>
</body>
- 在使用v-for指令遍历数组时,还可以指定一个参数作为当前数组元素的索引,语法格式为==(item,index)in items==,其中items为数据中的数组名称,item为数组元素的别名,index为数组元素的索引。
例如,给下列城市前添加相应的索引:
<body>
<div id="app">
<ul>
//{{index}}与{{item.name}}中间的连接符号可以自定义
<li v-for="(item,index) in items">{{index}}.{{item.name}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
//自定义对象中的数组名称
items:[
{name:'北京'},
{name:'上海'},
{name:'杭州'},
{name:'重庆'},
{name:'武汉'}
]
}
})
</script>
</body>
- v-for指令除了可以遍历数组之外,还可以遍历对象。遍历对象使用value in object形式的语法,其中,object为对象的名称,value为对象属性值的别名。
例如,使用v-for只指令输出对象中储存的人物信息:
<body>
<div id="app">
<ul>
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
//自定义数据中对象的名称
object:{
name:'张三',
sex:'男',
age:20,
character:'活泼开朗'
}
}
})
</script>
</body>
- 在应用v-for遍历对象时,还可以使用第二参数为对象属性名(键名)提供一个别名,语法格式为==(value,key)in object ==,其中object为对象名称,value为对象属性值的别名,key为对象属性名的别名。
代码如下:
<body>
<div id="app">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
//自定义数据中对象的名称
object:{
name:'张三',
sex:'男',
age:20,
character:'活泼开朗'
}
}
})
</script>
</body>
- v-for指遍历对象时,还可以使用第三个参数为对象提供索引,语法格式为==(value,index,key)in object==,其中value为对象属性值别名,index为对象索引,key为对象属性名别名。
代码如下:
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) in object">{{index}}.{{key}}:{{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
//自定义数据中对象的名称
object:{
name:'张三',
sex:'男',
age:20,
character:'活泼开朗'
}
}
})
</script>
</body>
6.v-model 指令
- v-model 指令可以实现对表单元素进行双向数据绑定,在修改表单元素值的同时。Vue实例中对应的属性值也会随之更新,反之亦然。
- v-model还会根据控件类型自动选取正确的方法来更新元素。
使用v-model指令对单行文本框进行数据绑定,代码如下:
<body>
<div id="app">
<input v-model="message">
<p>当前输入:{{message}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
})
</script>
</body>
- 应用v-model指令将单行文本框得值和Vue实例中的message 属性值进行了绑定,当文本框中的内容发生变化时,message属性值也会相应的发生更新。
总结案例
<body>
<div id="app">
<!-- 表头 -->
<div class="title">添加新用户</div>
<div class="form">
<!--使用v-model进行双向绑定 -->
姓名:<input type="text" v-model="person.name"><br/>
年龄:<input type="text" v-model="person.age"><br/>
<!-- 使用v-on绑定点击事件 -->
<button type="button" @click="add">添加</button>
</div>
<table>
<tr class="thead">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<!-- 使用v-for遍历数组 -->
<tr v-for="(item,index) in object">
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.age"></td>
<td>
<a href="javascript:;" @click="deleteItem(index)">删除</a>
<a v-if="item.age>=18" href="javascript:;" @click="marry(index)">成年</a>
</td>
</tr>
</table>
</div>
<script>
var vm =new Vue({
el: '#app',
data: {
person:{
name:'',
age:'',
},
object:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
},
methods:{
add:function(){
this.list.push(this.person);
this.person = {name:'',age:''};
},
deleteItem:function(index){
// 删除一个数组元素
this.list.splice(index,1);
},
marry:function(){
alert("你成年了");
}
},
created:function(){
}
})
</script>
</body>