1、组件
1.1、组件的含义
-
组件是视图层的基本组成单元。
-
组件是一个单独且可复用的功能模块的封装。
组件，包括：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
-
<component-name>是开始标签，</component-name>是结束标签 -
开始标签和结束标签之间，称为组件内容。如下面的content；
-
开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的
property1和property2 -
每个属性通过
=赋值。如下面的示例中，属性property1的值被设为字符串value
所有组件与属性名都是小写，单词之间以连字符-连接。
<component-name property1="value" property2="value">
content
</component-name>如下的例子：
<template>
<view>
<button size="mini">按钮</button>
</view>
</template>按照Vue单组件的要求，每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。
组件属性有多种类型：Boolean、Number、String、Array、Object、Any、EventHandler(事件处理，譬如：点击事件、焦点事件等)
<template>
<view>
<--! :disabled的值设置为布尔值，hover-start-time的值设置为Number -->
<button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
</view>
</template>公共属性
每个组件都拥有这些属性，仅限于uniapp
除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。
在组件中使用JavaScript变量，和Vue中定义的data数据相似。
<template>
<view>
<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
</view>
</template>
<script>
export default {
data() {
return {
"buttonText":"点我送神龙刀",
"buttondisble":false
}
}
}
</script>
组件的事件
每个组件都有事件，事件就是在进行某些操作时触发的某个方法。
比如button组件的点击事件，在点击按钮时，会触发。
事件作为组件的属性，用@开头。
<template>
<view>
<button size="mini" @click="clickbtn('按钮被点了一下')">按钮</button>
</view>
</template>
<script>
export default {
methods: {
clickbtn(msg) {
console.log("点击按钮得到的消息是：" + msg)
}
}
}
</script>
1.2、基础组件
基础组件指的是uniapp内置的组件，无须定义，可以直接加载。
uniapp的基础组件和HTML标签类似，但是却不相同，与微信小程序相同，可以更好的满足移动端的体验。
虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
基础组件规范，与小程序规范相近。但是要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"。
<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>1.3、基础组件分类
1.3.1、视图容器
1.3.2、基础内容容器
1.3.3、表单组件
1.3.4、路由与页面跳转
1.3.5、媒体组件
1.3.6、地图
1.3.7、画布
1.3.8、webview
1.3.9、广告
1.3.10、页面属性配置
1.3.11、uniCloud
1.4、扩展组件
虽然所有的业务需求都可以通过基础组件来实现，但是有时候使用基础组件来实现某个功能是比较低效的。所以会有开发者封装各种功能的组件，用于提高开发效率。这类组件被称为扩展组件。一般在插件市场我们可以找到很多开发者开发的插件，用于实现各类功能。
比如：我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：uni-rate 评分 - DCloud 插件市场
把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示出这个五角星组件。
<!-- 在index.vue页面引用 uni-rate 组件-->
<template>
<view>
<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
</view>
</template>封装组件的好处多多，
-
可以进行组件复用，就像我们定义了一个共用方法一样。
-
代码更方便管理，扩展性更好
-
提高开发效率，避免重复造轮子。方便测试。