一遍关于vue基础语法下篇

目录

一.事件处理器

 演示效果：

二.表单

 演示效果：

三.组件通信父转子

演示效果：

四.组件通信子转父

 演示效果：

 好啦，今天的分享就到这了，希望能够帮到你呢！ 

---

一.事件处理器

事件修饰符

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

•   .stop
•   .prevent
•   .capture
•   .self
•   .once

按键修饰符

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

全部的按键别名：

•   .enter
•   .tab
•   .delete (捕获 "删除" 和 "退格" 键)
•   .esc
•   .space
•   .up
•   .down
•   .left
•   .right
•   .ctrl
•   .alt
•   .shift
•   .meta      

	
	
  
  


  

	  

	  		

	  			

	  				

						
	  				
				
		    
				点击
				
		
  

 演示效果：

二.表单

	
		
		
		
	
	
		

			

				

					姓名：

					密码：

					
					年龄：

					性别：
					男
					女

					爱好：
					

						{{h.name}}
					
					籍贯：
					
						===请选择===
						{{t.name}}
					

					备注：
					

					同意
					
				
			
		
	
	

 演示效果：

三.组件通信父转子

. vue组件

  组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素，封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  全局和局部组件

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

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

      注册后，我们可以使用以下方式来调用组件：

      

  props

      props是父组件用来传递数据的一个自定义属性。

      父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop" 

演示效果：

四.组件通信子转父

 自定义事件

   监听事件：$on(eventName)

   触发事件：$emit(eventName)

   注1：Vue自定义事件是为组件间通信设计   

        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

     

        父Vue实例->Vue实例，通过prop传递数据

        子Vue实例->父Vue实例，通过事件传递数据

   注2：事件名

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

        建议使用“短横线分隔命名”，例如：three-click

 演示效果：

 好啦，今天的分享就到这了，希望能够帮到你呢！