零基础入门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>