vue指令之v-on

main.js：

var app = new Vue({
    el: '#app',
    methods: {
        onClick: function(){
            console.log("clicked!");
        },
        onEnter: function(){
            console.log("mouse entered!");
        },
        onLeave: function(){
            console.log("mouse leaved!");
        },
        onSubmit_: function(e){
            e.preventDefault();
            console.log("submited_!");
        },
        onSubmit: function(){
            console.log("submited!");
        },
        onKeyUp: function(){
            console.log("key pressed!");
        },
        onEnter: function(){
            console.log("entered!");
        }
    }
})

index.html：

html>
lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

    charset="UTF-8">
    


id="app">
    
v-on:click="onClick" v-on="{mouseenter: onEnter, mouseleave: onLeave}">点我
    
@click="onClick">点我

    
v-on:submit="onSubmit_($event)">
        type="text"/>
        type="submit">提交
    

    
v-on:submit.prevent="onSubmit">
        type="text"/>
        type="submit">提交
    

    
v-on:keyup="onKeyUp">
        type="text"/>
        type="submit">提交
    

    
v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
        type="text"/>
        type="submit">提交
    

.stop：阻止事件冒泡；

.prevent：阻止默认事件；

.keyup.enter.esc.space：回车或点击esc或点击空格键

type="text" v-on:keyup = "changeName">输出：{{name}}
type="text" v-on:keyup.enter.space = "name = $event.target.value"/>输出：{{name}}
action="" v-on:submit.prevent>
    type="submit" value="提交"/>

data: {
    counter: 0,
    name: 'Vue.js'
},

changeName: function(event){
    this.name = event.target.value;//不使用v-model,将当前input值替换name
}

用v-on和v-bind实现双向数据绑定：

id="app">
    type="text" v-bind:value="value" v-on:input="value = $event.target.value"/>
    
{{value}}

var app = new Vue({
    el: '#app',
    data: {
        value: 'hello'
    }
});

v-html：一定要防止跨域脚本攻击

v-html="html">

var app = new Vue({
    el: '#app',
    data: {
        value: 'hello',
        html: '
hello
'
    }
});