vue.js组件学习1

一.组件介绍

1.什么是组件

在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。

2.在页面中有什么组件

1.实现基本功能的基础的组件（最小的元素，HTML元素）

2.可复用的逻辑组件（业务组件）

页面上所有的东西全都是组件：形成了组件树

---

二.组件的使用

1.全局组件的使用

1.先创建一个vue实例

var vm = new Vue({

//选项

})

2.vm.components("mycompunent",选项})；

3.在页面中使用标签

1.局部组件

child={

  template:""

}

var vm=new Vue({

components:{

   child

}

})

三.组件选项解释

首先，一个组件的写法

var mycompo={

template:"",

props://多种写法

data(){},

compunents:{}

methods:{},

watch:{},

computed:{}

directives:{}

}

1.template：组件包含的内容

template:"

"

组件内容要写模板里面，最外面要是一个也只能是一个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

}

}

}

})

cn.vuejs.org/v2/guide/components.html#Prop-验证