Vue之组件详解

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

组件使Vue功能更加强大

好处是: 1, 拓展HTML元素;2,封装

语法

Vue.component(tagName, options)
tagName 组件名， options 选项
用法: 

全局组件

	


细节点:
Html 不区分大小写
Vue 声明组件的时候务必使用小写

局部组件

	



细节点:
templte 内容中的数据:  携标签名

Prop

动态Prop

Prop验证

Vue.component('example', {
	props: {
	 // 基础类型检测 （`null` 意思是任何类型都可以）
		propA: Number,
		// 多种类型
	 propB: [String, Number],
	 // 必传且是字符串
	 propC: {
 		 type: String,
		  required: true
	},
	// 数字，有默认值
 propD: {
 		 type: Number,
  		default: 100
  },
 // 数组／对象的默认值应当由一个工厂函数返回
	propE: {
 		 type: Object,
  		default: function () {
    	return { message: 'hello' }
 		 }
 },
	// 自定义验证函数
	 propF: {
			  validator: function (value) {
   			 return value > 10
 				 }
	 }
	 }
	})

自定义事件

  
{{ total }}
  
  

更多文章,请关注博客