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