vue.js组件学习1
一.组件介绍
1.什么是组件
在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。
2.在页面中有什么组件
1.实现基本功能的基础的组件（最小的元素，HTML元素）
2.可复用的逻辑组件（业务组件）
页面上所有的东西全都是组件：形成了组件树
二.组件的使用
1.全局组件的使用
1.先创建一个vue实例
var vm = new Vue({
//选项
})
2.vm.components("mycompunent",选项})；
3.在页面中使用标签
<mycomponent></mycomponent>
1.局部组件
child={
template:""
}
var vm=new Vue({
components:{
child
}
})
三.组件选项解释
首先，一个组件的写法
var mycompo={
template:"",
props://多种写法
data(){},
compunents:{}
methods:{},
watch:{},
computed:{}
directives:{}
}
1.template：组件包含的内容
template:"<div></div>"
组件内容要写模板里面，最外面要是一个也只能是一个html标签，替他内容写在该标签里面
2.compnents：组件里面的组件
compnents:{
AllCi
}
注意1：因为html表现里面是不分大小写，若果这里写成驼峰形式，那么用的时候写成烤肉串形式，
注意2：除了vue实例上注册是组件在页面上写标签调用，其他组件的组件内容都要写在template模板里
3.data(){}：组件中的数据项
data(){
return {
name:"strugglexiang"
}
}
这里写成一个方法的形式，调用直接使用函数返回的对象中 的属性，如{{name}}，这样写的话组件就能复用，每个组件
操作自己的data项，不然组件复用的话就操作的是同一个对象。
4.props：使用props传递数据
1.数组形式
props:["ownmsg","parentmsg"]
接收标签的中的属性做为本组件的属性，可以直接作为数据项被使用，但是props里面接收的数据不能更改
例：
{{ownmsg}}{{parentmsg}}
如果要操作props里面的属性，可以先放在data里，如下
data() { return { childCounter: this.initCounter } }
也可以放在计算属性里面,然后就可以操作计算属性，一般来说是获取
computed:{
normalSize() {return this.size.trim().toLowerCase();}
}
2.对象形式，可以用来验证接收的数据类型，不符合句报错
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){
returnvalue >10
}
}
}
})
