分针网—IT教育：Vue.js事件处理器与表单控件绑定

事件处理主要通过v-on这个指令来执行。

事件监听及方法处理

1.简单的可以直接内嵌在页面。

2.可以通过将方法定义在methods中，然后再v-on中执行

3.可以通过绑定给函数传递参数，还可以传递通过变量$event给函数传递原生DOM事件。

  
  

   
   <div id="app-1">
  
  
  
  
	
   
   <button v-on:click="counter += 1">增加1
   
   </button>
  
  
  
  
	
   
   <p>这个按钮被点击了{{counter}}
   
   </p>
  
  
  
  
	
   
   <button v-on:click="great">great
   
   </button>
  
  
  
  
	
   
   <button @click="sya('hi')">say hi
   
   </button>
  
  
  
  
	
   
   <button @click="warn('form cannot be submit yet', $event)">submit
   
   </button>
  
  
  
  

   
   </div>
  
  
  
  

   
   <script type="text/javascript">
   
   
  
  
  
  
	
   
   var app1 
   
   = 
   
   new 
   
   Vue
   
   (
   
   {
  
  
  
  

   
   		el
   
   :
   
   '#app-1'
   
   ,
  
  
  
  

   
   		data
   
   :
   
   {
  
  
  
  

   
   			counter
   
   :
   
   0
  
  
  
  
		
   
   }
   
   ,
  
  
  
  

   
   		methods
   
   :
   
   {
  
  
  
  

   
   			great
   
   :
   
   function
   
   (event
   
   )
   
   {
  
  
  
  
				
   
   alert
   
   (
   
   '点击数目为'
   
   + 
   
   this
   
   .counter
   
   )
   
   ;
  
  
  
  
				
   
   alert
   
   (event
   
   .target
   
   .tagName
   
   )
   
   ;
  
  
  
  
			
   
   }
   
   ,
  
  
  
  

   
   			sya
   
   :
   
   function
   
   (message
   
   )
   
   {
  
  
  
  
				
   
   alert
   
   (message
   
   )
   
   ;
  
  
  
  
			
   
   }
   
   ,
  
  
  
  

   
   			warn
   
   :
   
   function
   
   (msg
   
   ,event
   
   )
   
   {
  
  
  
  
				
   
   if
   
   (event
   
   ) event
   
   .
   
   preventDefault
   
   (
   
   )
   
   ;
  
  
  
  
				
   
   alert
   
   (msg
   
   )
   
   ;
  
  
  
  
			
   
   }
  
  
  
  
		
   
   }
  
  
  
  
	
   
   }
   
   )
  
  
  
  

   
   </script>
  
  

事件修饰器

Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

  
  

   
   <div id="app2">
  
  
  
  

   
   <!-- 阻止单击事件冒泡 -->
  
  
  
  

   
   <a v-on:click.stop="doThis">
   
   </a>
  
  
  
  

   
   <!-- 提交事件不再重载页面 -->
  
  
  
  

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

   
   <!-- 修饰符可以串联  -->
  
  
  
  

   
   <a v-on:click.stop.prevent="doThat">
   
   </a>
  
  
  
  

   
   <!-- 只有修饰符 -->
  
  
  
  

   
   <form v-on:submit.prevent>
   
   </form>
  
  
  
  

   
   <!-- 添加事件侦听器时使用时间捕获模式 -->
  
  
  
  

   
   <div v-on:click.capture="doThis">...
   
   </div>
  
  
  
  

   
   <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  
  
  
  

   
   <div v-on:click.self="doThat">...
   
   </div>
  
  
  
  

   
   </div>
  
  

按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

  
  

   
   <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
  
  
  
  

   
   <input v-on:keyup.13="submit">
  
  

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

  
  

   
   <!-- 同上 -->
  
  
  
  

   
   <input v-on:keyup.enter="submit">
  
  
  
  

   
   <!-- 缩写语法 -->
  
  
  
  

   
   <input @keyup.enter="submit">
  
  

全部的按键别名：

enter

tab

delete (捕获 “删除” 和 “退格” 键)

esc

space

up

down

left

right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

  
  

   
   // 可以使用 v-on:keyup.f1
  
  
  
  

   
   Vue
   
   .config
   
   .keyCodes
   
   .f1 
   
   = 
   
   112
  
  

表单控件绑定

通过前面的一些学习，我们知道v-model在输入框中具有双向响应功能。但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

  
  

   
   文本
  
  
  
  

   
   <input type="text" v-model="message" placeholder="edit it">
  
  
  
  

   
   <p>this message is {{message}}
   
   </p>
  
  
  
  

   
   <hr>
  
  
  
  

   
   多行文本
  
  
  
  

   
   <span>Multiline message is:
   
   </span>
  
  
  
  

   
   <p style="white-space: pre">{{ message }}
   
   </p>
  
  
  
  

   
   <br>
  
  
  
  

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

   
   <hr>
  
  
  
  

   
   复选框
  
  
  
  

   
   <input type="checkbox" id="checkbox" v-model="checked">
  
  
  
  

   
   <label for="checkbox">{{ checked }}
   
   </label>
  
  
  
  

   
   <hr>
  
  
  
  

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

   
   <label for="jack">Jack
   
   </label>
  
  
  
  

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

   
   <label for="john">John
   
   </label>
  
  
  
  

   
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  
  
  
  

   
   <label for="mike">Mike
   
   </label>
  
  
  
  

   
   <br>
  
  
  
  

   
   <span>Checked names数组: {{ checkedNames }}
   
   </span>
  
  
  
  

   
   <hr>
  
  
  
  

   
   单选按钮
  
  
  
  

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

   
   <label for="one">One
   
   </label>
  
  
  
  

   
   <br>
  
  
  
  

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

   
   <label for="two">Two
   
   </label>
  
  
  
  

   
   <br>
  
  
  
  

   
   <span>Picked: {{ picked }}
   
   </span>
  
  
  
  

   
   <hr>
  
  
  
  

   
   选择列表
  
  
  
  

   
   <select v-model="selected">
  
  
  
  
  
   
   <option>A
   
   </option>
  
  
  
  
  
   
   <option>B
   
   </option>
  
  
  
  
  
   
   <option>C
   
   </option>
  
  
  
  

   
   </select>
  
  
  
  

   
   <span>Selected: {{ selected }}
   
   </span>
  
  
  
  

   
   <hr>
  
  
  
  

   
   <select v-model="mulselected" multiple>
  
  
  
  
  
   
   <option>A
   
   </option>
  
  
  
  
  
   
   <option>B
   
   </option>
  
  
  
  
  
   
   <option>C
   
   </option>
  
  
  
  

   
   </select>
  
  
  
  

   
   <br>
  
  
  
  

   
   <span>Selected数组: {{ mulselected }}
   
   </span>
  
  

动态属性

  
  

   
   <input
  
  
  
  
  
   
   type
   
   ="checkbox"
  
  
  
  
  
   
   v-model
   
   ="toggle"
  
  
  
  
  
   
   v-bind:true-value
   
   ="a"
  
  
  
  
  
   
   v-bind:false-value
   
   ="b"
   
   >
  
  
  
  

   
   <p>toggle的值为{{toggle}}
   
   </p>
  
  

  
  

   
   <input type="radio" v-model="pick" v-bind:value="a">
  
  

  
  

   
   <select v-model="selected">
  
  
  
  
    
   
   <!-- 内联对象字面量 -->
  
  
  
  
  
   
   <option v-bind:value="{ number: 123 }">123
   
   </option>
  
  
  
  

   
   </select>
  
  

修饰符

lay：在改变后才触发

  
  

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

number：将输出字符串转为Number类型

  
  

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

trim：自动过滤用户输入的首尾空格

  
  

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

链接：http://www.f-z.cn/id/171

学习更多IT知识 加群：272292492