vue基础教学（4）

一、 v-on的基本使用

1. v-on 的作用

用来给元素注册点击事件的

2.v-on 的语法

  (1).v_on:事件名 ="事件函数"

 (2).v-on:click 可以简写 @click

 (3).v-on:mouseenter 可以简写 @mouseenter

3.v-on的注意点

  (1).注册事件需要一个事件的函数

  (2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法

		
			{{count}}
			-
			+
		
		
		
	

二、 v-on的参数传递

1.如需要传参 在页面中传的是实参 在methods中写的是形参.
2.如果在页面中没有写实参但是留有括号 在在methods中写了形参 会打印undefined
3.如果在页面中没有写实参也没有留有括号 在在methods中写了形参 会打印event 
4.如果你想同时传事件和参数 在页面中那就要第一参数写$event,第二个是参数
5.如果你只传事件 那么在页面中可以完全不写括号 或者btn2($event)

	
		
			按钮
			按钮
			按钮
			按钮
			按钮
		
		
		
	

三、v-on的事件修饰词

1、v-on是Vue提供的事件绑定机制，缩写是@，其中修饰符使用是在指令后通过点(.)来调用修饰符。

2、更多的修饰符：

.stop 是阻止冒泡行为，不让当前元素的事件继续往外触发。

.prevent 是阻止事件本身的行为，如阻止超链接点击跳转，form表单的点击提交，同理于调用event.preventDefault()方法。

.self 只当事件触发在该元素本身时触发回调（触发在子元素的冒泡事件会被忽略）。

.capture 是改变js默认的事件机制，默认是冒泡，capture功能是将冒泡改为倾听模式。

.once 是将事件设置为只执行一次，如.click.prevent.once代表只阻止事件的默认行为一次，当第二次触发的时候事件本身的行为会执行。

.passive 滚动事件的默认行为（即滚动行为）将会立即触发，而不会等待onScroll完成，.passive修饰符尤其能够提升移动端的性能。

注意：修饰符可以串联，.passive 和 .prevent 不能一起使用，否则.prevent将会被忽略。

	
		
			

			
			


			


			
			
			
			+++
		
		
		
	

四、 v-on的按键修饰符

在使用v-on监听键盘事件v-on:keyup时，我们可以在后面添加按键修饰符。

//只有在 keyCode 是 enter 时调用 vm.submit()

//可以缩写为@keyup.enter

1
2
3
4
5
全部的按键别名：记住所有的keyCode比较困难，所以Vue为最常用的按键提供了别名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

五、失去登录焦点是使用enter

最近做一个简单的todo应用时，有这样一个场景：某个输入框中点击回车（@keyup.enter）和失去焦点（@blue）这两个 *** 作均可以触发修改数据的接口。然而每次按回车后又会触发@blur，接口会调用两次。但是又的确得加入这两个 *** 作，仅适用一个 *** 作会显得不友好。
因此考虑对@keyup.enter处理，回车触发失去焦点事件即可

六、 v-if

v-if使用一般有两个场景：

1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换

	
		
			小于18岁未成年
			大于18岁小于60岁正值青壮年
			大于60岁,暮年
		
		
		
	

七、 v-ifdemo

这里没有绑定key值所以会导致输入框未清空其内容

为什么input输入框值被复用了？

这里就需要了解一下vue底层 *** 作

vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。

在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。

如果不希望出现类似复用问题，可以给对应的dom元素加上key值，并保证key不同。
 

  
    
		用户
		
	
	
	
		邮箱
		
	
	切换类型
  
  
  

八、 v-show

1.v-show指令的作用是：根据切换元素的显示状态
2.原理是修改元素 的display，实现显示隐藏
3.指令后面的内容，最终都会解析为布尔值
4.值为true元素显示，值为false元素隐藏

	
		
           这个男人来自地球
		   谁从火星来
		
		
		
	

v-show和v-if的区别：

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。

实现本质方法区别

v-show本质就是标签display设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别

v-show其实就是在控制css

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件

v-show都会编译，初始值为false，只是将display设为none，但它也编译了

v-if初始值为false，就不会编译了

性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

用法

v-if更灵活