ggggxc学习笔记----Vue学习笔记III----事件、表单

四、事件机制

1.事件绑定：用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。

例：

<button v-on:click="greet">Greet</button>
methods: { 
	greet: function (event) { 
	    if (event) { alert(event.target.tagName) } // `event` 是原生 DOM 事件 
   	} 
}

 

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，通过$event传递原生事件对象。

例：

<button v-on:click="say('hi',$event)">Say hi</button>
methods: { say: function (message,event) { alert(message) } }
//简写：<button @click="say('hi',$event)">Say hi</button>

 

2.事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，通过事件修饰符来完成这些细节。

<form v-on:submit.prevent="onSubmit"></form>

（1）常见修饰符：

.stop            停止事件冒泡   

.prevent       阻止事件默认行为

.capture       在事件捕获阶段执行事件处理函数

.self              只当在 event.target 是当前元素自身时触发处理函数

.once            事件处理函数执行一次后解绑

.passive       滚动事件的默认行为 (即滚动行为) 将会立即触发 ，一般与scroll连用，能够提升移动端的性能

（2）按键修饰符 ：一般与keyup事件类型配合使用

.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.shift、.meta

（3）鼠标修饰符

.left、.right、.middle

五、表单输入绑定

1.介绍：用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

（1）单行文本框

<input v-model="message" placeholder="edit me">

（2）多行文本框

<textarea v-model="message" placeholder="multiple lines"></textarea>

（3）复选按钮

<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">

（4）单选按钮

<input type="radio"  value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked">

（5）下拉菜单

<select v-model="selected">
       <option disabled value="">请选择</option>
       <option>A</option>
       <option>B</option>
</select>

2.修饰符：可以增加表单绑定能力

（1）lazy：默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

（2）number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

（3）trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<input v-model.trim="msg">