一遍关于vue基础语法下篇

 演示效果：

二.表单

	
		"utf-8">
		
		
	
	
		
"app">
			
				
					姓名："uname" />
					密码："upwd" type="password" />
					
					年龄："age" />
					性别：
					"radio" v-model="sex" name="sex" value="1" />男
					"radio" v-model="sex" name="sex" value="0" />女
					爱好：
					
for="h in hobby">
						"checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					
					籍贯：
					"type">
						"-1">===请选择===
						for="t in types" v-bind:value="t.id">{{t.name}}
					
					备注：
					"mark"</span>>
					同意"checkbox" v-model="flag" />
					"submit" v-bind:disabled="show" v-on:click="doSubmit" />
				
			
		
	
	

 演示效果：

三.组件通信父转子

. 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

 演示效果：

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