about use Vue of methods

methods 处理事件

methods 在vue中处理一些逻辑方面的事情。vue事件监听的方式看上去有点违背分离的传统观念。而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的viewModel上的，所有不会导致维护上的困难。使用v-on 有以下好处：

通过HTML模板就能轻易定位在JavaScript代码里对应的方法

不需要在JavaScript里手动去绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM无全解耦，更易于测试。

当一个ViewModel被销毁时。所有的事件处理器都会自动被删除，无须担心如何自己清理他们。

在vue中ViewModel中的逻辑处理。一般都在Vue的Methods来处理。这里由于很多事件处理逻辑代码都很复杂，如果我们直接把JavaScript代码写在v-on指令中有时并不可行。所有在methods中定义方法，让v-on指令来接收调用。

methods事件和处理

给一个 button 使用 v-on 指令，绑定一个 click 事件，给这个事件指定一个方法，这个方法主要用来改变文本的显示。比如：一开始在页面上渲染的文本是“没发生任何事情”，点击 button 按钮之后，执行 prompt 方法，然后页面渲染的文本变成了“快来看这里！我是新讯息！”。使用Vue来处理，其实很简单：

<!-- HTML -->
<div id="app">
    <button @click="prompt">点击我(^_^)</button>
    <p>{{ message }}</p>
</div>
let app = new Vue({
    el: '#app',
    data () {
        return {
            message: '没发生任何事情!'
        }
    },
    methods: {
        prompt: function () {
            this.message = '快来看这里！我是新讯息！'
        }
    }
})

如果需要在内联语句处理器中访问原生的DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。在上面的示例中修改一下，给prompt()中传参数：

HTML -->
<div id="app">
    <button @click="prompt('快来看这里！我是新讯息！', $event)">点击我(^_^)</button>
    <p>{{ message }}</p>
</div>
let app = new Vue({
    el: '#app',
    data () {
        return {
        message: '没发生任何事情!'
        }
    },
    methods: {
        prompt: function (message, event) {
        if (event) {
            console.log(event)
            event.preventDefault();
        }
        this.message = message
        }
    }
})

about use Vue of methods

猜你喜欢