Vue事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80278139/article/details/144439008

1、使用v-on指令

这里的v-on的指令有原版的一种写法是v-on：click，简写之后的是@click

这里的是v-on事件的变化的过程，这里的

在这里要说一下与事件绑定的方法支持参数event，及原生DOM事件对象的传入，这里的是点击之后返回标签名。这里的方法中可以直接使用随便的一个名因为这里的事件的触发是自动传入函数的。

<div id="example">
	<img id="pic" v-bind:src="url" v-on:mouseover="visible(1)" v-on:mouseout="visible(0)" v-on:click="show">
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		url : 'images/flower.jpg'//图片URL
	},
	methods : {
		visible : function(i){
			var pic = document.getElementById('pic');
			if(i == 1){
				pic.style.opacity = 0.5;
			}else{
				pic.style.opacity = 1;
			}
		},
		show : function (event){
			if (event){
				alert("触发事件："+ event.target.tagName);
			}
		}
	}
})
</script>

//第二个
<div id="example">
	<img v-bind:src="url" v-on:mouseover="addBorder" v-on:mouseout="removeBorder">
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		url : 'images/mr.gif'//图片URL
	},
	methods : {
		addBorder : function(e){
			e.target.style.border = '1px solid green';//设置触发事件元素边框
		},
		removeBorder : function(e){
			e.target.style.border = 0;//移除边框
		}
	}
})
</script>

2、内联JavaScript语句

这里引用了$event这个标签，这里的作用就是可以直接的调用当前的原生DOM事件对象

<div id="example">
    <button v-bind:src="url" @click="show('明日科技欢迎你！',$event)">你好</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#example',
        data:{
            url : 'images/mr.gif'//图片URL
        },
        methods : {
            show: function(message,e){
                e.target.style.backgroundColor = 'green';//设置触发事件元素边框
                e.preventDefault();
                alert(message);
            }
        }
    })
</script>

3、事件修饰符

这里的代码中v-on如果有stop则会只显示有stop的那一句，父级的标签中的点击的事件情况会不显示出来。

<div id="example">
  <div @click="show('div事件',$event)">
    <button @click.stop="show('button事件触发！',$event)">显示</button>
  </div>

</div>
<script type="text/javascript">
  var vm = new Vue({
    el:'#example',
    data:{

    },
    methods : {
      show: function(message,e){
        e.target.style.backgroundColor = 'green';//设置触发事件元素边框
        // e.preventDefault();
        alert(message);
      }
    }
  })
</script>

4、按键修饰符

这里的v-on还有按键的触发事件
这里的使用的方法是<input v-on:keyup.enter="show1">这里的别名的方式，

<input v-on:keyup.13="show1">这里这个的方式也是可以的，使用自己定义的按键的数字的别名。

<div id="example">
  <div @click="show('div事件',$event)">
    <button @click.stop="show('button事件触发！',$event)">显示</button>
    <button @click="show('button事件触发！',$event)">显示</button>
  </div>
  <!-- 使用自定义的按键修饰符 -->
  <input v-on:keyup.enter="show1">
  <input v-on:keyup.13="show1">
</div>
<script type="text/javascript">
  // 定义按键别名
  Vue.config.keyCodes = {
    ...Vue.config.keyCodes, // 保留现有的按键别名
    enter: 13 // 定义 'enter' 别名对应 keyCode 13
  };

  var vm = new Vue({
    el: '#example',
    data: {},
    methods: {
      show: function(message, e) {
        e.target.style.backgroundColor = 'green'; // 设置触发事件元素背景色
        alert(message);
      },
      show1() {
        console.log('回车键被按下');
      }
    }
  });
</script>

上机实验：

这里是做了一个类似于表单。
<div class="one">
       <label for="number">商品数量：</label>
       <input type="text" id="number" name="number"/>
       </div>
这里的label中的for属性是要与id绑定的，才会有：
当用户点击“商品名称：”这个标签时，光标会自动定位到输入框中，方便用户输入商品名称。
这种关联使得表单更加友好和易于使用。

<style type="text/css">
*{
 	margin:0; 
 	padding:0
}
body{ 
	font-size:12px; 
}
.title{
font-size:18px;
line-height:50px;
margin-left:100px;}
.one{ 
	margin:10px 0;
}
.one label{ 
	width:100px; 
	float:left; 
	text-align:right;
 	height:20px; 
 	line-height:20px;
}
.one input{
 	border:1px solid #999;
  	height:20px;
}
.two{
 	padding-left:150px;
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<form name="form">
  		<div class="title">添加商品信息</div>
  		<div class="one">
    		<label for="type">所属类别：</label>
    		<select v-on:change="getPtext">
        		<option v-for="pmenu in menulist" v-bind:value="pmenu.text">
		  			{{pmenu.text}}
				</option>
			</select>
			<select>
				<option v-for="submenu in getSubmenu" v-bind:value="submenu.text">
					{{submenu.text}}
				</option>
			</select>
  		</div>
  		<div class="one">
    		<label for="goodsname">商品名称：</label>
    		<input type="text" id="goodsname" name="goodsname"/>
  		</div>
  		<div class="one">
    		<label for="price">会员价：</label>
    		<input type="text" id="price" name="price"/>
  		</div>
		<div class="one">
    		<label for="number">商品数量：</label>
    		<input type="text" id="number" name="number"/>
  		</div>
  		<div class="two">
    		<input type="submit" value="添加" />
    		<input type="reset" value="重置" />
  		</div>
	</form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
		data:{
            ptext : '数码设备',
			menulist:[{
                text:'数码设备',
                submenu:[
                    {text:'数码相机'},
                    {text:'打印机'},
                    {text:"复印机"},
                ]
            },{
                text:'家用电器',
                submenu:[
                    {text:'电视机'},
                    {text:'电冰箱'},
                    {text:"洗衣机"},
                ]
            },{
                text:'礼品工艺',
                submenu:[
                    {text:'鲜花'},
                    {text:'彩带'},
                    {text:"音乐盒"},
                ]
            }]
    	},
    	methods : {
			getPtext : function(event){//获取主菜单项
            	this.ptext = event.target.value;
     		}
		},
		computed : {
        	getSubmenu : function(){//获取子菜单
            	for(var i = 0; i < this.menulist.length; i++){
                	if(this.menulist[i].text == this.ptext){
                    	return this.menulist[i].submenu;
                	}
            	}
        	}
   		}
    });
</script>