学习Vue之旅：Day7——事件绑定，表单数据绑定

目录

一、事件绑定 以及  修饰符

二、表单数据 的  双向绑定  v-model

复选框

单选框

选项框

一、事件绑定 以及  修饰符

//绑定事件，不需要参数   v-on:的缩写为  @
<button v-on:click="addEvent">点击增加</button>


//绑定事件，传递参数
<button @click="addEvent(传参)">点击增加</button>  //也可以传  $event（事件对象）


//绑定事件，直接写处理表达式
<button @click="num+=1">点击增加</button>

//绑定两个事件,单写名称不可以？一定要加上括号才行？？？
<button v-on:click="addEvent($event)，changeColor($event)">点击增加</button>

//事件修饰符  .once，则只有第一次点击会触发事件
<button v-on:click.once="addEvent">点击增加</button>

//事件修饰符  .stop，则阻止冒泡
<button v-on:click.stop="addEvent">点击增加</button>


//事件修饰符  .prevent，则阻止默认事件
<button v-on:click.prevent="addEvent">点击增加</button>


//键盘事件 修饰符 .enter  .tab   .esc   .delete   .space  .up  .down  .left  .right
<input type="text"  @keydown.enter="addEvent">


//系统 修饰符
.ctrl  .alt   .shift   .meta
//鼠标按键修饰符
.middle  .left(点击左键)  .right

二、表单数据 的  双向绑定  v-model

<input type="checkbox" name="like" v-model="checked">
checked=false(表示  一开始 没有选中，选中后，checked的值会变成true)

<input v-model.lazy="search" type="text"  @keydown.enter="searchEvent">
<h1>{{search}}</h1>
//加了.lazy，则 输入框失去焦点之后，才显示发生变化，即把输入事件变为 change事件


<input v-model.lazy.number="search" type="text"  @keydown.enter="searchEvent">
<h1>{{search}}</h1>
//加了.number之后，则 输入的字符串 会变成 number型的



<input v-model.trim="search" type="text"  @keydown.enter="searchEvent">
<h1>{{search}}</h1>
//加了.trim之后，则 输入的字符串 会去掉空格

复选框

 

 

 

 

单选框

 

选项框<select>