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:
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p><button v-on:click="onClick" v-on="{mouseenter: onEnter, mouseleave: onLeave}">点我</button></p> <p><button @click="onClick">点我</button></p> <form v-on:submit="onSubmit_($event)"> <input type="text"/> <button type="submit">提交</button> </form> <form v-on:submit.prevent="onSubmit"> <input type="text"/> <button type="submit">提交</button> </form> <form v-on:keyup="onKeyUp"> <input type="text"/> <button type="submit">提交</button> </form> <form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit"> <input type="text"/> <button type="submit">提交</button> </form> </div> <script src="../lib/vue.js"></script> <script src="./js/main.js"></script> </body> </html>
.stop:阻止事件冒泡;
.prevent:阻止默认事件;
.keyup.enter.esc.space:回车或点击esc或点击空格键
<p><input type="text" v-on:keyup = "changeName">输出:{{name}}</p> <p><input type="text" v-on:keyup.enter.space = "name = $event.target.value"/>输出:{{name}}</p> <form action="" v-on:submit.prevent> <input type="submit" value="提交"/> </form>
data: { counter: 0, name: 'Vue.js' },
changeName: function(event){ this.name = event.target.value;//不使用v-model,将当前input值替换name }
用v-on和v-bind实现双向数据绑定:
<divv id="app"> <input type="text" v-bind:value="value" v-on:input="value = $event.target.value"/> <p>{{value}}</p> </divv>
var app = new Vue({ el: '#app', data: { value: 'hello' } });
v-html:一定要防止跨域脚本攻击
<div v-html="html"></div>
var app = new Vue({ el: '#app', data: { value: 'hello', html: '<h1>hello</h1>' } });