【Vue】 -(7) 事件和方法

使用v-on绑定事件
	<button @click="hello">Hello</button><br />
	<button @click="say('I love you')">say</button><br />
	访问原生事件
	<button @click="do('Nihao',$event)">do</button><br />
	
	
	事件修饰符<br />
	<form v-on:submit.prevent="onSubmit" action="http://www.baidu.com">
		<a @click.stop="doThis">阻止单击事件冒泡</a>
		<input type="submit" value="提交事件不再负载页面" />
		<input v-on:keyup.enter="submit" type="submit" value="只有在keyup等于enter才提交">
	</form>
	<br /><br />
	表单控件绑定:
	使用V-model进行双向绑定,处理一些极端的需求,如下：
	<span>Message is:{{message}}</span><br />
	<input type="text" v-model="message" placeholder="Edit me" /><br /><br /><br />
	单个多选框：逻辑值
	<input type="checkbox" id="checkbox" v-model="checked" value="游泳"/>游泳？
	<label for="checkbox">{{checked}}</label>
	<br /><br /><br /><br />
	绑定到数组:不是逻辑值，是value的值
	<input type="checkbox" value="A" v-model="model" id="A" />
	<label for="A">A</label>
	<input type="checkbox" value="B" v-model="model" id="B" />
	<label for="B">B</label>
	<input type="checkbox" value="C" v-model="model" id="C" />
	<label for="C">C</label><br />
	<span>selcted:{{model | json}}</span>
	
	单选框:<br />
	<input type="radio" value="男" v-model="sex" />男
	<input type="radio" value="女" v-model="sex" />女
	<br /><span>{{sex}}</span>
	
	下拉框:<br />
	<select v-model="selected" multiple>
	  <option selected>A</option>
	  <option>B</option>
	  <option>C</option>
	</select>
	<br>
	<span>Selected: {{ selected | json }}</span>
	
	
	<!-- 在 "change" 而不是 "input" 事件中更新 -->
	<input v-model="msg" lazy><span>{{msg}}</span><br /><br />
	<input v-model="age" number><span>{{age}}</span>

对应的js

var vm=new Vue({
	el:'#app',
	data:{
		text:'Hello',
		model:[]
	},
	methods:{
		hello:function(){
			alert(this.text+" Vue.js");
		},
		say:function(text){
			alert('say'+text);
		},
		do:function(text,event){
			alert(text);
			event.preventDefault();
		}
	}
});