事件
（1）点击事件
v-on:click="show()" 简写@click="show()"
（2）键盘事件
@keydown="show()"
（3）默认事件
部分html代码
<div id='box'>
<input type="button" value="点我啊" @contextmenu="show($event)"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#box',
data:{
},
//函数方法
methods:{
show:function(ev){
alert(1);
//阻止默认行为
ev.preventDefault();
}
}
})
</script>
简写@contextmenu.prevent="show()"
（4）阻止冒泡
<div id='box'@click="show2()">
<input type="button" value="点我啊" @click="show($event)"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#box',
data:{
},
//函数方法
methods:{
show:function(ev){
alert(1);
//阻止冒泡
ev.cancelBubble = true;
},
show2:function(){
alert(2)
},
}
})
</script>
简写：@click.stop="show()"
属性
属性v-bind:src, 简写 :src
属性class 、style
<style type="text/css">
.red{
color: red;
}
.blue{
background: pink;
}
</style>
</head>
<body>
<div id="box">
<!--:class="{red:true,blue:true}"red是class名 通过true和false来判断显示和不显示 true和false也可以是数据-->
<p :class="{red:a,blue:b}">内容</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
a:true,
b:false
},
methods:{
}
})
</script>
---------------------------------------------------------------------
<div id="box">
<!--<p :style="[a,c]">内容</p>-->
<p :style="a">这是</p>
<div v-html="message"> </div>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
/*a:{color:'red'},*/
/*驼峰写法*/
/*c:{backgroundColor:'pink'}*/
a:{
color:'red',
backgroundColor:'pink'
},
message:'<h1>今天是17年7月5号</h1>'
},
methods:{
}
})
</script>