零基础入门uniapp Vue3组合式API版本

前言：小程序学习笔记，课程来源up主咸虾米_。仅记录笔记，大家想学习可以去关注他。

1.已安装HBuider X（目前是4.36版本），微信开发者工具（但还没注册小程序码），相关配置OK了。

1.16 相关架构学习

1.pages-index-index.vue

<template> <!--模板区 不使用div,在组件的内置组件用那些标签--><view class="layout"><view class="box1">box1</view><view class="box2">box2</view></view>
</template> <!--这个必须放，view 可以放多个节点,vue2的话要包一个  布局是一样的class--><script setup></script>
<!-- 这是逻辑部分，vue2是选项式api，vue3是组合式api--><style lang="scss">.layout{border:1px solid red;.box1{border:1px solid green;}.box2{border:1px solid blue;}}
</style>
<!--这里写一些css的样式。border 像素 solid 实线，layout是最外层，有两个子元素-->

2.建立新页面

路由配置

{"pages": [ {"path": "pages/index/index","style": { ... }}, {"path": "pages/login/login","style": { ... }}]
}<!--JSON对象，包含多个页面对象数组，每个页面对象定义了页面路径和样式设置 -->

组件-内置组件- 视图容器-view

所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。

#view

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

案例：冒泡and冒泡拦截

<template> <!--模板区 不使用div,在组件的内置组件用那些标签--><view class="box" hover-class="boxHover" hover-start-time="120"><view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view></view><!-- 可以view.box回车快捷键，view回车以及.box回车都有一些自动补全效果 -->
</template> <!--这个必须放，view 可以放多个节点,vue2的话要包一个  布局是一样的class--><script setup></script>
<!-- 这是逻辑部分，vue2是选项式api，vue3是组合式api--><!--这里写一些css的样式。border 像素 solid 实线，layout是最外层，有两个子元素-->
<style lang="scss">
.box{width: 200px;height:200px;background: #ccc; 
}
.boxHover{background: orange;width: 300px;
}
.inner{width: 100px;height: 100px;background: green;
}
.innerHover{background: greenyellow;
}
</style>

组件-内置组件-视图容器 -scroll-view

       可滚动视图区域。用于区域滚动。

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动

 案例：横向滑动

条件1：scroll-x，条件2：子元素设置行级块样式，条件3：父级设置不换行

<template> <view>----</view><scroll-view scroll-x class="scrollView"><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view></scroll-view>
</template><script setup></script><style lang="scss">
.scrollView{width: 80%;height: 220px;border: 1px solid red;white-space: nowrap;.box{width: 100px;height: 100px;background: green;display: inline-block;margin: 5px;}
}</style>

贴个链接：scroll-view | uni-app官网

组件-内置组件-基础内容- text

text组件

文本组件。用于包裹文本内容。

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。

虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式

字的可选

空格

<template> <!--模板区 不使用div,在组件的内置组件用那些标签--><view>----</view><text selectable>text文本标签</text>   <!--支持拷贝  微信开发工具要长按--><text space="emsp">可以加不同    字符空格</text>
</template> <!--这个必须放，view 可以放多个节点,vue2的话要包一个  布局是一样的class--><script setup></script>
<!-- 这是逻辑部分，vue2是选项式api，vue3是组合式api--><!--这里写一些css的样式。border 像素 solid 实线，layout是最外层，有两个子元素-->
<style lang="scss"></style>