标签：inpu amp 时间 message sage top new on() put
监听事件
v-on 指令监听DOM 事件触发一些JavaScript
<div id="example">
<button v-on:click="counter +=1">add 1</button>
<p>这个按钮被点击了 {{counter}}</p>
</div>
<script>
new Vue({
el:‘#example‘,
data:{
counter:0
}
})
</script>
方法事件处理器
事件处理的逻辑很复杂，直接把JavaScript 代码写在v-on 指令中是不可行的。因此，v-on 可以接收一个定义的方法调用。
<button v-on:click="example1">example1</button> //js new Vue({ el:‘#example‘, data:{ name: ‘Vue.js‘ }, methods:{ example1:function(event){ alert(‘Hello ‘+this.name+‘ !‘) if(event){ alert(event.target.tagName) } } } })
內联处理器方法
<input type="button" value="say hi" v-on:click="say(‘hi‘)"> //js methods:{ say:function(message){ alert(message) }
事件修饰符
.stop 阻止事件冒泡
.prevent 提交时间不再重载页面
<div v-on:click="parent"> <div v-on:click.stop="child">{{message}}</div> </div> // methods:{ parent:function(){ alert(‘parent‘) }, child:function(){ alert(‘child‘) } }
标签：inpu amp 时间 message sage top new on() put
原文地址：http://www.cnblogs.com/hi-lilian/p/7355498.html
