console
new Vue({
el: '#example-3',
data: {
text: 'init'
},
methods: {
say: function(message) {
alert(message)
},
warn: function(message, event) {
if (event) {
alert(event.bubbles);
event.preventDefault()
}
alert(message)
},
submitEnter: function(event) {
alert(this.text)
},
submitRight: function(event) {
alert(1111111111)
},
doSomething: function() {
alert("doSomething")
},
onCtrlClick: function() {
alert("onCtrlClick")
}
}
})
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<div id="example-3">
<button v-on:click="say('hi')">
Say hi
</button>
<button v-on:click="say('what')">
Say what
</button>
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<input v-on:keyup.esc="submitRight($event)" v-on:keyup.enter="submitEnter($event)" v-model='text'>
<div v-on:click.ctrl="doSomething">Do something</div>
<div v-on:click="doSomething">Do something2</div>
<div v-on:click.ctrl.exact="onCtrlClick">onCtrlClick</div>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>