【vue干货】vue事件
2018-01-05 本文已影响0人
涂大宝
vue干货第二集
Vue和angular的区别
- vue是一个mvvm框架（库），和angular类似，比较容易上手，小巧
- vue：
■ 简单，易学 中文
■ 指令以v-xxx
■ 一片html代码配合上json，在new出来一个vue的实例
■ 一个个人维护项目
■ 适合：移动端项目，小巧
■ vue的发展势头很猛，GitHub上的star数量已经超越angular - angular：
■ 上手难，框架大一些
■ 指令以ng-xxx
■ 所有属性和方法都挂到¥scope身上
■ angular由Google维护
■ 适合：pc端项目
*共同点：不兼容低版本IE
常用指令：
- 指令的含义：扩展html标签的功能,属性
- angular常用的指令：ng-model（放在表单的input元素上）, ng-controller
*对应的vue也有常用的指令：v-model： 一般用在表单元素(input)上 双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<input type="text" v-model="msg">
<br>
{{msg}}
</body>
</html>
- v-for 循环数组指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环数组</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
- 如何循环json文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环json文件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}} {{$index}}
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
</li>
</ul>
<hr>
<ul>
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
</div>
</body>
</html>
- 事件：在angularjs中是ng-click，在vue里面的基础事件 : v-on:click='函数'
添加一个按钮，点击按钮时在页面中添加一个tomato
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础事件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
还有一些其他的事件：
v-on:mouseover
v-on:mouseout
v-on:mousedown
v-on:dblclick
- v-show 显示隐藏：点击按钮div消失的demo，通过按钮的点击控制v-show的属性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
a:true
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="a=false">
<div style="width:100px; height:100px; background: red" v-show="a">
</div>
</div>
</body>
</html>
- vue 事件简写
v-on:click 等价 @click
*事件冒泡
阻止冒泡：cancelBubble
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.cancelBubble=true;
},
show2:function(){
alert(2);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click="show($event)">
</div>
</div>
</body>
</html>
方法2: click.stop 推荐！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
},
show2:function(){
alert(2);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show()">
</div>
</div>
</body>
</html>
阻止默认行为：
1.preventDefault
2.contextDefault.prevent推荐！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.preventDefault();
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()">
</div>
</body>
</html>
常用的键 ：简介的形式
回车@keyup/keydown.enter ，
上@keyup/keydown.up，
下@keyup/keydown.down，
左@keyup/keydown.left，
右@keyup/keydown.right ，
