Vue.js

Vue.js 学习笔记 5

常用语法

v-on

v-on用于绑定事件，简写为@。v-on可以绑定单个事件格式为：v-on:click="onclick",其中，onclick为自定的函数。这个函数放在method对象中，而不是data中。绑定多个事件的格式为：v-on = "{mouseenter:onenter,mouseleave:onout}"
代码如下

html:

<div id="app">
    <button v-on:click="onClick">Click me!</button>
    <button v-on="{mouseenter: onEnter, mouseleave:onOut}">
        Click me again!
    </button>
    <form @keyup.enter="onKeyup" @submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">submit</button>
    </form>
</div>

js:

var app = new Vue({
    el:'#app',
    methods:{
        onClick:function(){
            console.log("onClick");
        },
        onEnter:function(){
            console.log("onEnter")
        },
        onOut:function(){
            console.log('outEnter')
        },
        onSubmit:function(){
            console.log('submitted')
        },
        onKeyup:function(){
            console.log('Keyup')
        }
    }
})