这里我们学习vue1.0和2.0看看他们之间有什么不同；
1.vue的基础指令##
1.1 v-on 指令的使用；####
//html
<button v-on:click="change"> 改变name值</button>
//可以使用简写方式
<button @click="change"> 改变name值</button>
//js
var vm = new Vue({
el:'#app', //表示当前vue对象接管app的div区域
data: {
name:'黑马程序员' // 相当于是MVVM中的Model这个角色
},
methods:{
change:function(){
this.name += '1';
}
}
});
注意：
- 常用事件：v-on:click,keydown,keyup,mouseover,submit等；
- 可是使用简写方式 @click;
- 事件修饰符：(.prevent，.stop ),分别代码阻止默认行为，和阻止冒泡
1.2 差值表达式
//html
<div id="app">
{{ name + '1'}}
{{ name == 'wo'? 'true': 'false' }}
{{ if1(name) }}
</div>
//js
var vm = new Vue({
el:'#app',
data: {
name:'黑马程序员'
},
methods:{
'if1':function(str){
return str == 'wo'
}
}
});
注意:定义函数名称的使用尽量避免使用es6关键字；由于差值表达式会出现闪烁问题，所以使用时应该避免闪烁问题。
1.3 v-text 和 v-html
<div id="app">
<span v-text="name"></span>
<div v-html="name"></div>
</div>
new Vue({
el :'#app',
data:{
name:'<h1>黑马程序员</h1>'
}
});
注意：text会转义标签，html不会转义标签
1.4 v-bloak 指令(解决{{}} 闪烁问题)####
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<span v-cloak>{{name}}</span>
</div>
</body>
//js
new Vue({
el:'#app',
data:{
name:'黑马程序员'
}
});
注意：要写对应的css代码配合使用
1.5 v-bind
<body>
<div id="app">
<input type="text" v-bind:value="name">
//简写方式
<input type="text" :value="name">
//常量与变量搭配使用
<a v-bind="{href:'http://itcast.cn/index/'+id}">跳转</a>
</div>
</body>
var vm = new Vue({
el:'#app',
data:{
name:'黑马程序员',
id:2
}
});
注意：在使用v-bind的使用如果有部分内容不变，我们可以使用第三种方式；
1.6 v-model 双向数据绑定####
<div id="app">
<input type="text" v-model="name">
<form action="#">
<input type="text" id="username" v-model="user.uname" >
<input type="password" id="pwd" v-model="user.upwd">
<input type="submit" v-on:click="submit" value="注册">
</form>
</div>
/js
var vm = new Vue({
el:'#app',
data:{
name:'黑马程序员',
user:{uname:'',upwd:''}
},
methods:{
submit:function(){
alert(this.user.uname +" pwd="+this.user.upwd);
}
}
});
注意：
1.使用v-model的时候存在修饰符，number .lazy .trim
2.但是在vue1.0 与vue2.0的用法并不相同，下面给出一个案例，具体的请查看官网文档 修饰符
vue1.0的修饰符
<input type="text" v-model="age" number>
vue 2.0的修饰符
<input type="text" v-model.number="age" >
1.7 v-for####
<div id="app">
<ul>
<!-- vue1.0 的写法 -->
<li v-for="(index,item) in list" track-by="$index">{{index}}-{{item}}</li>
<!-- vue 2.0的写法
<li v-for="(item,index) in list" :key="index">{{index}}-{{item}}</li>-->
<!-- <li v-for ="(key,item) in user">{{key}}-{{item}}</li> -->
</ul>
</div>
//js
new Vue({
el:'#app',
data:{
list:[1,2,3,4,4],
user:{uname:'itcast',age:10}
}
});
注意：vue 1.0 与 2.0 对于 v-for 使用区别总结
- vue1.0 总有 $index,在2.0中移除了$index
- vue1.0 中 （index,item） in list ，而在2.0中变成了（item,index）in list 的写法
- vue1.0 中 使用 trakck-by 来标记 dom 对象的唯一性，vue2.0中改成了：key
1.8 v-if 与 v-show
<body>
<div id="app">
<button v-on:click="toggle">显示隐藏切换</button>
<div v-show="isshow">div的值</div>
</div>
</body>
new Vue({
el:'#app',
data:{
isshow:true
},
methods:{
toggle:function(){
//实现业务则只需要将isshow的值每次都取反即可
this.isshow =!this.isshow;
}
}
});
注意：
v-if 如果不显示则会删除dom节点， v-show 则是在节点上增加 display:none;
网友评论