03-Vue事件

1、v-on

 

<!-- 
	v-on用来绑定事件，格式=> v-on:事件名称（如click）="函数"
    函数名指这个函数，函数名+()是指函数执行后的返回值
	v-on简写@
 -->
	<input type="button" value="按钮" v-on:click="show">
	<input type="button" value="按钮@" @click="show">

    <input type="button" value="事件委托" @click="handleClick">
    <!-- 
	    带括号意味着传递参数，因为你没有传递所以打印的事件委托失效了
	    怎么解决？触发事件的时候传递$event
    -->
	<input type="button" value="事件委托()" @click="handleClick($event)">
	<input type="button" value="事件传递参数()" @click="handleRow('你好,')">

上述运行结果：

<script type="text/javascript">
	// vue实例
	var app = new Vue({
		el: "#app",
		// 存放数据变量
		data: {
			arr: ["html", "css", "js"],
			str: "vue"
		},
		// 存放函数的地方
		methods: {
			show() {
				console.log("我是show函数")
			},
			handleClick(e) {
				console.log(e)
				// 每次点击都会将str的内容添加到arr里面去
				this.arr.push(this.str)

				console.log(this.arr)
			},
			handleRow(str) {
				console.log(str + "打工人")
				// 函数嵌套
				this.show()
			}
		}
	})
</script>

 上述运行结果：

 2、点击事件的应用

<div id="app">
    <!-- 点击事件传参 -->
	<input type="submit" value="提交" @click="handleClick('函数传参数')">

	<ul>
		<!-- 当前点击的对象，当前点击对象的索引，事件对象 -->
        <!-- $event指事件本身，这里指点击事件的原型对象 -->
		<li v-for="(item,index) in stu" :key="index" 
            @click="handleRow(item,index,$event)">
			{{item.name}}
		</li>
	</ul>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		// 存放变量的地方
		data: {
			arr: ["html", "css", "js"],
			stu: [{
					name: "小红",
					age: 18,
					sex: "女",
					sch: "北京大学"
				},
				{
					name: "小亮",
					age: 19,
					sex: "男",
					sch: "南京大学"
				},
				{
					name: "小明",
					age: 20,
					sex: "男",
					sch: "东京大学"
				},
			],
		},
		// 存放函数的地方
		methods: {
			handleClick(val) {
				console.log(val)
			},
			handleRow(row, i, e) {
				console.log(row, i, e)
			}
		}
	})
</script>

上述运行结果：

 3、事件例子

<div id="app">
	书名：<input type="text" v-model="str">
	作者：<input type="text" v-model="user">
	<input type="submit" value="新增" @click="add">

	<table border="1" width="500" cellspacing="0" cellpadding="0">
		<tr>
			<th>序号</th>
			<th>书名</th>
			<th>作者</th>
			<th>操作</th>
		</tr>
		<tr v-for="(item,index) in arr" :key="index">
			<td>{{index+1}}</td>
			<td>{{item.name}}</td>
			<td>{{item.user}}</td>
			<td>
				<a href="javascript:;" @click="del(index)">删除</a>
			</td>
		</tr>
	</table>
</div>

<script>
	var app=new Vue({
		el:"#app",
		data:{
			arr:[
				{
					name:"红楼梦",
					user:"曹雪芹"
				},
				{
					name:"三国演义",
					user:"罗贯中"
				},
			],

			str:"",
			user:""
		},
		methods:{
			del(index){
				console.log(index)
				// splice(要删除的下标，删除的长度)
				this.arr.splice(index,1)
			},
			add(){
				// 判断inupt框里面的内容不能为空
				if(this.str!=''&&this.user!=''){
					// 首先定义一个对象,然后把这个对象push到arr中
					let obj={
						// 将当前输入的内容赋值给对象中的属性
						name:this.str,
						user:this.user
					}
					// 将这个对象push到arr数组中
					this.arr.push(obj)
					// 添加完成之后清空内容
					this.str=''
					this.user=''
				}
				else{
					alert("内容不能为空")
				}
			}
		}
	})
</script>

上述运行结果：

  4、其他事件

<div id="app">
	<!-- focus、blur、mouseout、mousemove....... -->
	<input type="submit" value="鼠标移入" v-on:mouseover="handleDown($event)">
	<!-- @keyup.enter:当键盘抬起并且按得是回车键的时候触发 -->
	<input type="text" value="回车抬起" @keyup.enter="show">
</div>

<script>
	var app=new Vue({
		el:"#app",
		data:{

		},
		methods:{
			handleDown(e){
				console.log(e)
			},
			show(){
				console.log("登录成功")
			}
		}
	})
</script>

上述运行结果：

  5、篮球记分板

<div id="app">
	本场得分：{{score}} 分
	<p>
		<button @click="add">加分</button>
		<button @click="reduce">减分</button>
		<button @click="score+=3">三分球</button>
		<input type="text" v-model="num" @keyup.enter="handleE">
	</p>
</div>

<script>
	var app=new Vue({
		el:"#app",
		data:{
			// 分数，默认是0
			score:0,
			num:2
		},
		methods:{
			// 加分每次加1
			add(){
				this.score++
			},
			// 减分每次减1
			reduce(){
				if(this.score>0){
					this.score--
				}else{
					alert("不能再减了")
				}
			},
			handleE(){
				// 总分=当前输入的值加上原来的数值
				// this.score=Number(this.num)+Number(this.score)
				this.score+=Number(this.num)
			}
		}
	})
</script>

上述运行结果：

  6、阻止事件冒泡

事件冒泡：假如两个div都添加点击事件，当我点击里面的div的时候，外面div事件也会触发

<div id="app">
	<!-- 
		第一种方法：事件委托，e.stopPropagation()
	-->
	<div @click="fn">
		<input type="submit" value="点击" @click="handleClick">
	</div>
	<!-- 第二种方法：.stop -->
	<!-- 事件只触发一次 .once -->
	<div @click="fn">
		<input type="submit" value="点击" @click.stop="handleClick1">
	</div>
</div>

<script type="text/javascript">
	/*
		事件冒泡：两个div都添加点击事件，当我点击里面的div的时候，外面div事件也会触发
	*/ 
	var app=new Vue({
		el:"#app",
		data:{

		},
		methods:{
			fn(){
				console.log("我是爸爸")
			},
			handleClick(e){
				// js的原生方法
				// e.stopPropagation()
				console.log("我是后代")
				e.stopPropagation()
			},
			handleClick1(){
				console.log("我是后代")
			}
		}
	})
</script>

  7、阻止事件默认行为

<div id="app">
	<!-- 第一种阻止事件默认行为的方法: 
    js中的原生方法:e.preventDefault -->
	<a href="http://www.baidu.com" 
    target="_blank" @click="handleClick($event)">百度一下</a>
	<!-- 第二种阻止事件默认行为的方法: 修饰符.prevent -->
	<a href="http://www.baidu.com" target="_blank" 
    @click.prevent="handleClick1">百度一下</a>
</div>

<script>
	var app=new Vue({
		el:"#app",
		data:{

		},
		methods:{
			handleClick(e){
				e.preventDefault()
				console.log(e)
			},
			handleClick1(){
			}
		}
	})
</script>