vue事件处理器

梦里梦外; 2022-11-21 09:53 188阅读 0赞

# vue事件处理器 #

事件处理的时候，v-on,监听DOM事件，在运行的时候运行js的代码。

## 事件监听：v-on ##

<body>
    		<div id="app">
    			<button v-on:click="counter+=1">点我</button>
    			<p>这个按钮被点击了{
       {counter}}次</p>
    		</div>
    		<script>
    			var vm = new Vue({
    				el:'#app',
    				data:{
    					counter:0
    				}
    			})
    		</script>
    	</body>

通常，我们使用一个方法，调用js的方法，我们还可以使用v-on接受一个定义的方法：

<body>
    		<div id="app">
    			
    			<button v-on:click="greet">点我</button>
    			
    		</div>
    		<script>
    			var vm = new Vue({
    				el:'#app',
    				data:{
    					name:'vue.js'
    				},
    				//method对象中定义方法
    				methods:{
    					greet:function(){
    						alert('hello'+this.name)
    					}
    				}
    			})
    		</script>
    	</body>

## 事件的修饰符： ##

v-on指令缩写@ （v-on:click == @click）

处理DOM事件细节，vue通过（.）表示的指令后缀来调用修饰符

.stop <a @click.stop=“doThis”> 阻止单击事件冒泡

.prevent <a @submit.prevent=“onsubmit”> 提交事件不再重载页面

.capture 添加事件侦听器的时候使用事件捕获模式

.self 在该元素本身触发时（不是子元素）触发回调

.once click事件只能点击一次 （2.14版本新增）

## 按键修饰符 ##

vue允许v-on在监听键盘事件的时候，添加按键修饰符

v-on:keyCode @keyUP

.enter

.tab

.up

.left

.alt

.mate

## vue.js表单 ##

我们早介绍表单的时候，首先回顾一下双向绑定

v-model指令在表单元素上创建双向数据绑定

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgBMtgXf-1604129049371)(C:\\Users\\DELL\\AppData\\Local\\Temp\\1564625799276.png)\]

v-model会根据控件类型自动的选取正确的方法更新元素

### 输入框 ###

<body>
    		<div id="app">
    			<p>input元素</p>
    			<input v-model="message">
    			<p>消息{
       {message}}</p>
    			
    			<p>textarea 元素</p>
    			<textarea v-model="message2"></textarea>
    			<p style="white-space: pre">{
       {message2}}</p>
    		</div>
    		
    		<script>
    			var vm = new Vue({
    				el:'#app',
    				data:{
    					message:'亲爱的，热爱的',
    					message2:'古诗词'
    				}
    			})
    		</script>
    	</body>

### 单选按钮 ###

<body>
    		<div id="app">
    			  <input type="radio" id="runoob" value="林志玲" v-model="picked">
    			  	
    			  <label for="runoob">林志玲</label>
    			  <br>
    			  <input type="radio" id="google" value="迪丽热巴" v-model="picked">
    			  <label for="google">迪丽热巴</label>
    			  <br>
    			  <span>选中值为: {
       { picked }}</span>
    			</div>
    			
    			<script>
    			new Vue({
    			  el: '#app',
    			  data: {
    				picked : '空'
    			  }
    			})
    			</script>
    
    	</body>

### 复选框 ###

<body>
    		<div id="app">
    			<p>单个复选框</p>
    			<input type="checkbox" id="checkbox" v-model="checked" />
    			<label for="checkbox">{
       {checked}}</label>
    			
    			<p>多个复选框</p>
    			<input type="checkbox" id="a" v-model="checkedName"  value="方天画戟"/>
    			<label for="a">方天画戟</label>
    			<input type="checkbox" id="b" v-model="checkedName"  value="青龙偃月"/>
    			<label for="b">青龙偃月</label>
    			<input type="checkbox" id="c" v-model="checkedName"  value="丈八蛇矛"/>
    			<label for="c">丈八蛇矛</label>
    			<span>最终选定的而武器：{
       {checkedName}}</span>
    		</div>
    		
    		<script>
    			new Vue({
    				el:'#app',
    				data:{
    					checked:true,
    					checkedName:[]
    				}
    			})
    		</script>
    	</body>

### select列表 ###

<body>
    		<div id="app">
    			  <select v-model="selected" name="fruit">
    			    <option value="">选择人物</option>
    			    <option value="亚瑟">战士</option>
    			    <option value="靳柯">刺客</option>
    			  </select>
    			 
    			  <div id="output">
    			      选择的人物是: {
       {selected}}
    			  </div>
    			</div>
    			
    			<script>
    			new Vue({
    			  el: '#app',
    			  data: {
    				selected: '' 
    			  }
    			})
    			</script>
    	</body>

## 修饰符： ##

.lazy

在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步

.number

将用户输入的值，自动转换为number类型

.trim

自动过滤输入两端的空格

## 回顾： ##

监听事件：v-on （两种方法）

表单的使用 v-model

修饰符

## 作业： ##

1、事件监听两种方法熟练掌握

## 修饰符：
    
    .lazy
    
    在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步
    
    .number
    
    将用户输入的值，自动转换为number类型
    
    .trim
    
    自动过滤输入两端的空格
    
    ## 回顾：
    
    监听事件：v-on （两种方法）
    
    表单的使用  v-model
    
    修饰符
    
    ## 作业：
    
    1、事件监听两种方法熟练掌握
    
    2、输入框的使用