uni-app学习（一）

最近在做uni-app小程序，之前做过vue的项目，当拿到uni-app的项目的时候，还傻白甜的尝试尝试着小程语法，譬如，setData，bind类型的事件，哈哈哈。
想想我都，开发前还是多看看官方文档吧，不要似懂非懂老是被前辈笑话。

这里插一个，我面试这家公司，面试官问我的一个问题，组件包括哪几部分。
我：由html标签，js，和css组成。啊哈哈哈哈哈

此篇记录一下：（对比vue学习）
一、组件

组件包括了以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

1.都是用template 来包裹内容的跟vue的无异。
2.template下只能且必须有一个根view组件。（跟vue里面的规则相同，template下只有一个跟元素）
3.变量在组件内容区使用{{bianlaing}}，（跟vue的一模一样）
4.变量在组件属性中使用，在指定的属性前面加上“：”

//官网实例
<template>
    <view>
        <button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                "buttonText":"按钮",
                "buttondisble":false
            }
        }
    }
</script>

5.组件的事件，（@事件也是组件的属性）
与vue的事件类型相同。
6.基础组件，是uni-app框架内置的组件，无需引入，也无需注册。
如果偷偷使用了div\span\a\navigator…等等的在编译的时候依旧会编译成uni-app的内置组件。
基础组件列表:
视图容器

view视图容器，类似于HTML中的div
scroll-view可滚动视图容器
swiper滑块视图容器，比如用于轮播banner
match-media屏幕动态适配器
movable-area可拖动区域
movable-view可拖动的视图容器 ，在页面中拖拽滑动或双指缩放movable-view必须在movable-area组件中
cover-view可覆盖在原生组件的上的文本组件
cover-image可覆盖在原生组件上的图片组件
基础内容
icon图标
text文本
rich-text多行文本
进度条
表单组件
button
checkbox
editor
form
input
label
picker弹出式列表选择器
picker-view窗体内嵌式列表选择器
看到这我感觉小程序真香，内置的组件太得劲，哈哈哈
radio单项选择器
slider滑动选择器
switch开关选择器
textarea多行文本输入框
总结：小程序将一些常用的模块都组件化了。在vue的基础上发展出自己的风格，我感觉很有吸引力。但是依然感谢我们的尤大神，哈哈哈哈。
2012/04/23下午记