Vue模板语法下集（03）

今日份分享内容

一、事件处理器 

1、阻止单击事件冒泡 

 2、只点击一次

 3、按键修饰符

 二、Vue自定义组件

1、组件简介 

2、自定义组件

 ①父传子（父组件 传参 给 子组件）

②子传父（子组件 传参 给 父组件）

三、表单综合案例

---

首先让我们来把页面搭建完毕，页面效果如图：

 页面代码块展示：

那么现在就正式进入今日的分享内容吧！ 

---

一、事件处理器 

1、阻止单击事件冒泡 

 页面解析图：四个div嵌套而成 

如上图、代码所示，是由四个div标签嵌套而成的，四个div标签对应了四个颜色也分别对应了四个点击事件，点击不同的颜色会出现不同的弹出内容，由于使用div一个套着一个的，也就是由四个正方形叠加起来了，如果我点击最上面的绿色那么也就会从上到下依次弹出绿色>蓝色>黄色>红色四个点击事件所对应的内容，那么问题来了，如果只想让所点击的绿色弹出内容应该怎么办呢？

答案：Vue通过由点(.)表示的指令后缀来调用修饰符。

 

  .stop="doThis">

什么是冒泡事件？ 如图所示：

  

这样就只会触发绿色部分的点击事件了。 

 2、只点击一次

在客户使用某个查询功能的时候，当网络缓慢的时候，下意识的可能会多次点击那个查询的按钮，对于客户而言觉得并没什么，但是对于服务端来说，就有点类似于刻意攻击，因为当每点击一次按钮，就会向后台数据发送一次请求，就会抢占服务器的资源，那么我们作为开发者应该可以怎样做呢？

答案：Vue通过由点(.)表示的指令后缀来调用修饰符。

 

  .once="doThis">

效果图展示：        点击确定之后就不会再弹出内容了

 3、按键修饰符

按键修饰符顾名思义也就是跟你的键盘绑定的事件。

例如回车键： 

效果展示：        光标移入文本框内点击回车键就可以弹出窗口。 

事件处理器的知识汇总 ：

事件修饰符

 .stop

  .prevent

  .capture

  .self

  .once

  

  

  

  

  

  

  

  

  

  

...

  

  

...

  

  

按键修饰符

Vue允许为v-on在监听键盘事件时添加按键修饰符：

  

  

  Vue为最常用的按键提供了别名

  

  

  全部的按键别名：

  .enter

  .tab

  .delete (捕获 "删除" 和 "退格" 键)

  .esc

  .space

  .up

  .down

  .left

  .right

  .ctrl

  .alt

  .shift

  .meta      

好啦，事件处理器这一节的分享内容就介绍到这里，进入第二节~

---

 二、Vue自定义组件

1、组件简介 

      组件(Component)是Vue最强大的功能之一
      组件可以扩展HTML元素，封装可重用的代码
      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2、自定义组件

自定义组件是什么？

自定义组件就是自己设置标签，然后实现它。后面我将会给大家分享如何使用别人的组件，比如之后的ElementUI里就封装了很多的组件，如果有学前端的朋友们，在自定义组件这一块是需要更加深入了解的喔！

本次的案例：实现自定义按钮组件        Vue.component

 所以接下来有两种传参方式，给我们的自定义组件进行传值。

 ①父传子（父组件 传参 给 子组件）

 

      props是父组件用来传递数据的一个自定义属性。
      父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop" 

②子传父（子组件 传参 给 父组件）

 $emit是子组件用来传递数据的

自定义组件知识总结：

 父传子：props
   子传父（触发事件）：$emit(eventName) 

全局和局部组件

      全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

      局部组件: new Vue({el:'#d1',components:{...}})

   注1：Vue自定义事件是为组件间通信设计   
        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
     
        父Vue实例->Vue实例，通过prop传递数据
        子Vue实例->父Vue实例，通过事件$emit传递数据 

   注2：事件名
        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
        建议使用“短横线分隔命名”，例如：three-click

---

三、表单综合案例

在Vue中创建 表单提交

	
		
		
		
		
	
	
		

			
			姓名：

			密码：

			年龄：

			性别：男
				女

			爱好：
			

				{{l.name}}
			

			英语等级：
			
				{{e.name}}
			

			
			
			

		
	
	

运行结果： 

 今日分享内容到此结束，希望对您有所帮助喔~

预告下期内容：【Vue路由】

我们下期再见！ ！！