事件深入
v-on
- v-on：click/mouseup...
- 简写： @click:"" （推荐）
事件对象
- @click="show($event)"
事件冒泡
--- 阻止冒泡
- event.cancelBubble=true
- @click.stop="show($event)" （推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/vue1.0.js"></script>
<script>
window.onload=function(){
new Vue({
el: '#box',
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/vue1.0.js"></script>
<script>
window.onload=function(){
new Vue({
el: '#box',
methods: {
show: function (ev) {
alert(1)
},
show2: function (){
alert(2)
}
}
})
}
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show($event)" />
</div>
</div>
</body>
</html>
默认行为（默认事件）
- ev.preventDefault();
- @contextmenu.prevent；推荐
<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>
键盘
- 键盘事件：@keydown，@keyup
- 常用键：
- 回车：
- @keyup.13
- @keyup.enter
- 上，下，左，右
- @keyup/keydown.left
- @keyup/keydown.right
- @keyup/keydown.up
- @keyup/keydown.down
- 回车：
属性
- 用v-bind关联属性，如v-bind:src=""，
简写为：src="" - <img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
- <img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
var Box2 = new Vue({
el: '#box2',
data: {
url: 'http://e.hiphotos.baidu.com/image/w%3D500/sign=f41ccdfef1f2b211e42e854efa816511/e61190ef76c6a7ef2a3f03abf7faaf51f3de6626.jpg'
}
})
}
<div id="box2">
<img :src="url" alt="" />
</div>
class和style
- class
- :class="[a]" a是数据
<style>
.big{
font-size:100px;
}
</style>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:'big'
},
methods:{
}
});
};
</script>
<div id="box">
<strong :class="[a]">文字...</strong>
</div>
- :class="[a,b,c]" 可多个class
- :class="{red:a, blue:false}" a是数据且为布尔值
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
}
});
};
</script>
<div id="box">
<strong :class="{red:true,blue:true}">文字...</strong>
</div>
- :class="json"
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
},
methods:{
}
});
};
</script>
<div id="box">
<strong :class="json">文字...</strong>
</div>
- style(与class类似)
- :style="[c]"
- :style="[c,d]"
- :style="json"
- 注意: 复合样式，采用驼峰命名法
模板
- {{msg}} 数据更新模板变化
- {{*msg}} 数据只绑定一次
- {{{msg}}} HTML转意输出
过滤器:-> 过滤模板数据
- 系统提供一些过滤器:uppercase，lowercase，capitalize
- {{msg| filterA}}
- {{msg| filterA | filterB}}
- {{msg| filterA 参数}} 如：currency 钱
<div id="box">
{{12|currency '￥'}}
</div>
