这个按钮被点击了 {{ counter }} 次。
1.2 绑定一个函数
var example2 = new Vue({
el: ‘#example-2’,
data: {
name: ‘Vue.js’
},
// 在 methods
对象中定义方法
methods: {
greet: function (event) {
// this
在方法里指当前 Vue 实例
alert(‘Hello ’ + this.name + ‘!’)
// event
是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
1.3 可以直接在html中传入参数
new Vue({
el: ‘#example-3’,
methods: {
say: function (message) {
alert(message)
}
}
})
1.4 想要传入event?可以这样子
Submit
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
1.5 事件修饰符
常用的比如stopPropagation(),event.preventDefault(),可以这样子来
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了 事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
- .stop
- .prevent
- .capture
- .self
.once