vue语法模板

事件

（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>

 

posted @ 2017-07-05 09:55  星光泪痕  阅读(150)  评论(0)    收藏  举报