Vue霸道！v-on指令如何实现网页互动感爆棚？

html
点击登录</button>

    点击我

Vue实例代码：

“`javascript

new Vue({

new Vue({
    el: '#app',
    methods: {
        handleClick() {
            console.log('按钮被点击了！');
        }
    }
});

el:’#app’,

methods:{

handleClick: function(){

console.log(‘按钮被点击了！’);

}

}

});

这就来个实例~看，一旦你点了那个按钮，神奇的事情发生了——“按钮被点击了！”唰地一下出现在了控制台里，这就是v-on 指令能干出来的事儿，它会抓住并回应那些令人心动的点击瞬间！

处理输入事件

    
    
{{ message }}

除了点触以外，处理输入是表格互动中的常见事。用v-on命令将input事件跟方法绑定起来，我们就能随时侦测输入框内的内容变动，然后采取恰当措施。比方说，用这种方法，我们能让留言板应用在用户打字时，就实时地展示他写字数多少了。

data:{

message:”

},

处理事件：看到什么就顺手处理了

new Vue({
    el: '#app',
    data: {
        message: ''
    },
    methods: {
        handleInput(event) {
            this.message = event.target.value;
        }
    }
});

把事件的目标值设为消息呗。

这段代码就是告诉你怎么用v-on指令来追踪输入框里的字变动，然后把输入的文字保存到我们的Vue实例中叫message的属性里面~

处理提交事件

说到提交事件，就是当你点了“提交”按钮以后的事。举个例子你到一个网站上要注册账号，填好了账号和密码，然后一按“提交”，这时候网站就会检查一下你输入的信息是否都对了，合不合格。

注册</button>

handleSubmit: function(){

//处理表单提交逻辑

这里我们把submit事件和handleSubmit方法绑了起来，然后用event.preventDefault()把表单的默认提交给拦截下来了。

提交