北风网-Vue.js 学习笔记(3)
第三章：事件
第1节视频：事件处理
一、Vue.js 使用 v-on 指令监听DOM事件来触发 JavaScript 回调函数。
<input type = "button" v-on:click = "test" value = "按钮" />
methods:{
test:function(){
alert("HelloWorld");
}
}
二、$event 参数
1、事件回调函数可以传入 $event 这个事件对象
<input type = "text" @keydown = "test($event)" />
methods:{
test:function($event){
if($event.keyCode == 13){
$event.target.blur();
}
}
}
第2节视频：事件修饰符_1
一、事件修饰符
1、在事件处理程序中调用 event.preventDefault()或event.stopPropagation()是很常见 的。尽管我们可以在事件处理函数中轻松实现这点，但更好的方式是：事件处理函数只有纯粹的数据逻辑，而不是去处理DOM事件细节。
2、为了解决这个问题，Vue为 v-on 提供了事件修饰符。通过由 “ . ” 来调用修饰符。
.stop
.prevent
.capture
.self
.once
3、.stop修饰符用来阻止事件冒泡。
<!-- 阻止单击事件冒泡 -->
<div @click = "test_1">
<input type = "button" value = "测试" @click.stop = "test_2">
</div>
4、.prevent 修饰符取消事件的默认动作。
<form v-on:submit.prevent = "onSubmit" method = "post" action = ".......">
<input type = "submit" value =“提交”>
</form>
第3节视频：事件修饰符_2
1、.capture 修饰符捕获冒泡事件
<div @click.capture = “test_1”>
<input type = "button" value = "测试" @click = "test_2" >
</div>
2、.self 只在当前控件触发事件
<div @click.self = "test_1">
<input type = "button" value = "测试" @click = "test_2">
</div>
3、 .once 事件只会执行一次
<div @click = "test_1">
<input type = "button" value = "测试" @click.once = "test_2" >
</div>
第4节视频：表单处理
一、表单控件绑定：
1、可以用 v-model 指令在表单控件上创建双向数据绑定
<input type = "text" v-model = "username" />
2、v-model 会忽略所有表单元素的 value 、checked、selected 特性的初始值，因为它会以模型层的数据作为初始值。
data:{
username:"Scott"
}
3、v-model 指令可以用来绑定复选框
<input type = "ckeckbox" v-model = "sport" value = "足球" />足球
<input type = "ckeckbox" v-model = "sport" value = "篮球" />篮球
<input type = "ckeckbox" v-model = "sport" value = "羽毛球" />羽毛球
<input type = "ckeckbox" v-model = "sport" value = "游泳" />游泳
<p>{{sport}}</p>
data:{
sport:[]
}
4、v-model 指令可以用来绑定单选按钮
<input type = "radio" v-model = "sex" value = "男">男
<input type = "radio" v-model = "sex" value = "女">女
<input type = "radio" v-model = "sex" value = "保密">保密
<p>{{sex}}</p>
data:{
sex:"保密"
}
5、v-model 指令可以用来绑定下拉列表
<select v-model = "nation">
<option value = "汉族">汉族</option>
<option value = "藏族">藏族</option>
<option value = "蒙古族">蒙古族</option>
<option value = "回族">回族</option>
<option value = "朝鲜族">朝鲜族</option>
</select>
<p>{{nation}}</p>
二、lazy修饰符
1、v-model 在 input 事件中同步输入框的数据，但可以添加一个 lazy 修饰符，从而转变为在 change 事件中同步
<input type = "text" v-model.lazy = "username" />
<p>{{username}}</p>
三、number 修饰符
1、如果想自动将用户的输入值转为 Number 类型，可以添加一个 number 修饰符
<input type = "text" v-model.number = "salary" />
<p>{{salary}}</p>
四、trim 修饰符
1、如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
<input type = "text" v-model.trim = "address" />
<p>{{address}}</p>
