新手php网站建设,网站注册后能不能注销,电子商务网站建设与管理pdf下载,网页设计代码成品1、组件
1.1、组件的含义 组件是视图层的基本组成单元。 组件是一个单独且可复用的功能模块的封装。
组件#xff0c;包括#xff1a;以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。 component-name是开始标签#xff0c;/compon…1、组件
1.1、组件的含义 组件是视图层的基本组成单元。 组件是一个单独且可复用的功能模块的封装。
组件包括以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。 component-name是开始标签/component-name是结束标签 开始标签和结束标签之间称为组件内容。如下面的content 开始标签上可以写属性属性可以有多个多个属性之间用空格分割。如下面示例的property1和property2 每个属性通过赋值。如下面的示例中属性property1的值被设为字符串value
所有组件与属性名都是小写单词之间以连字符-连接。
component-name property1value property2valuecontent
/component-name
如下的例子
templateviewbutton sizemini按钮/button/view
/template
按照Vue单组件的要求每个vue文件的根节点必须为 template且这个 template 下只能且必须有一个根 view 组件。
组件属性有多种类型Boolean、Number、String、Array、Object、Any、EventHandler(事件处理譬如点击事件、焦点事件等)
templateview--! :disabled的值设置为布尔值hover-start-time的值设置为Number --button sizemini :disabledfalse hover-start-time20 按钮/button/view
/template
公共属性
每个组件都拥有这些属性仅限于uniapp
属性名类型描述解释idString组件的唯一标识一般用于获取组件的上下文对象需要保持整个页面的唯一refStringVue组件中的唯一标识用来给子组件注册引用信息classString组件的类名通常用于设置样式styleString内联样式动态设置内联样式hiddenbool组件是否隐藏默认为显示设为false为隐藏data-*Any自定义属性组件上触发事件时会发送给事件处理函数*EventHandler组件的事件
除了上述公共属性还有一类特殊属性以v-开头称之为vue指令如v-if、v-else、v-for、v-model。
在组件中使用JavaScript变量和Vue中定义的data数据相似。
templateviewbutton sizemini :disabledbuttondisble hover-start-time20 {{buttonText}}/button/view
/template
scriptexport default {data() {return {buttonText:点我送神龙刀,buttondisble:false}}}
/script
组件的事件
每个组件都有事件事件就是在进行某些操作时触发的某个方法。
比如button组件的点击事件在点击按钮时会触发。
事件作为组件的属性用开头。
templateviewbutton sizemini clickclickbtn(按钮被点了一下)按钮/button/view
/template
scriptexport default {methods: {clickbtn(msg) {console.log(点击按钮得到的消息是 msg)}}}
/script
1.2、基础组件
基础组件指的是uniapp内置的组件无须定义可以直接加载。
uniapp的基础组件和HTML标签类似但是却不相同与微信小程序相同可以更好的满足移动端的体验。
虽然不推荐使用HTML标签但实际上如果开发者写了div等标签在编译到非H5平台时也会被编译器转换为view标签类似的还有span转text、a转navigator等包括css里的元素选择器也会转。但为了管理方便、策略统一新写代码时仍然建议使用view等组件。
可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
基础组件规范与小程序规范相近。但是要注意组件上的事件绑定需要以 vue 的事件绑定语法来绑定如 bindchangeeventName 事件需要写成 changeeventName。
picker modedate :valuedate start2015-09-01 end2020-09-01 changebindDateChangeview classpicker当前选择: {{date}}/view
/picker
1.3、基础组件分类
1.3.1、视图容器
组件名说明view视图容器类似于HTML中的divscroll-view可滚动视图容器swiper滑块视图容器比如用于轮播bannermatch-media屏幕动态适配组件比如窄屏上不显示某些内容movable-area可拖动区域movable-view可移动的视图容器在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中cover-view可覆盖在原生组件的上的文本组件cover-image可覆盖在原生组件的上的图片组件
1.3.2、基础内容容器
组件名说明icon图标text文字rich-text富文本显示组件progress进度条
1.3.3、表单组件
标签名说明button按钮checkbox多选框editor富文本输入框form表单input文本输入框label标签picker弹出式列表选择器picker-view窗体内嵌式列表选择器radio单选框slider滑动选择器switch开关textarea多行文本输入框
1.3.4、路由与页面跳转
组件名说明navigator页面链接。类似于HTML中的a标签
1.3.5、媒体组件
组件名说明audio声音camera相机image图片video视频live-player直播播放live-pusher实时音视频录制也称直播推流
1.3.6、地图
组件名说明map地图
1.3.7、画布
组件名说明canvas画布
1.3.8、webview
组件名说明web-viewweb浏览器组件
1.3.9、广告
组件名说明ad广告组件ad-draw沉浸视频流广告组件
1.3.10、页面属性配置
组件名说明custom-tab-bar底部tabbar自定义组件navigation-bar页面顶部导航page-meta页面属性配置节点
1.3.11、uniCloud
组件名说明unicloud-db组件uniCloud数据库访问和操作组件
1.4、扩展组件
虽然所有的业务需求都可以通过基础组件来实现但是有时候使用基础组件来实现某个功能是比较低效的。所以会有开发者封装各种功能的组件用于提高开发效率。这类组件被称为扩展组件。一般在插件市场我们可以找到很多开发者开发的插件用于实现各类功能。
比如我们需要一个五角星点击评分的组件在DCloud的插件市场里可以获取到uni-rate 评分 - DCloud 插件市场
把这个uni-rate组件导入到你的uni-app项目下在需要的vue页面里引用它就可以在指定的地方显示出这个五角星组件。
!-- 在index.vue页面引用 uni-rate 组件--
templateviewuni-rate/uni-rate!-- 这里会显示一个五角星并且点击后会自动亮星 --/view
/template 封装组件的好处多多 可以进行组件复用就像我们定义了一个共用方法一样。 代码更方便管理扩展性更好 提高开发效率避免重复造轮子。方便测试。
