uni-app学习笔记(二)--vue页面代码的构成和新建页面

vue页面的构成

一.template

模板区,主要放html布局,注意,如果是开发uni-app,模板区不要放div,h1等标签了,用了在小程序和app端起不到作用。具体应该使用哪些组件,可在uni-app官网上查看:组件-->内置组件组件使用的入门教程 | uni-app官网

来看下template区域的代码,最外层的template是必不可少的

html 复制代码
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>aaa</view>
		<view>bbb</view>
		<view>ccc</view>
	</view>
</template>

二.script 是逻辑部分

要实现的功能,主要在这部分进行控制。基于vue3

javascript 复制代码
<script setup>

</script>

三.css样式

用于控制页面元素的样式,一般位于最下面

javascript 复制代码
<style lang="scss">
	.layout {
		border: 5px solid red;
		.box1{
		  border:2px solid blue;
		}
		.box2{
			border:1px solid green;
		}
	}
</style>

新建页面

如果勾选创建同名目录,那么会创建一个跟页面名同名的目录,同时要勾选在pages.json中注册以便能路由跳转找到相应的页面。勾选以后HBuilder X会自动在pages.json添加对应的路由

复制代码
"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/demo1/demo1",
			"style" : 
			{
				"navigationBarTitleText" : "demo"
			}
		},
		{
			"path" : "pages/demo2/demo2",
			"style" : 
			{
				"navigationBarTitleText" : "demo"
			}
		}

然后使用浏览器访问http://localhost:5173/#/pages/demo1/demo1 即可访问新页面了

如果没有出现,可尝试把HBuilder X内置浏览器关闭后刷新,或把HBuilder X关闭后重新运行。

相关推荐
一切顺势而行4 分钟前
vue总结2
学习
今天背单词了吗98019 分钟前
算法学习笔记:11.冒泡排序——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·学习·算法·排序算法·冒泡排序
Brookty27 分钟前
【操作系统】进程(二)内存管理、通信
java·linux·服务器·网络·学习·java-ee·操作系统
java攻城狮k33 分钟前
【跟着PMP学习项目管理】项目管理 之 成本管理知识点
经验分享·笔记·学习·产品经理
Dann Hiroaki9 小时前
笔记分享: 哈尔滨工业大学CS31002编译原理——02. 语法分析
笔记·算法
KhalilRuan9 小时前
Unity-MMORPG内容笔记-其三
笔记
九年义务漏网鲨鱼9 小时前
【大模型学习 | MINIGPT-4原理】
人工智能·深度学习·学习·语言模型·多模态
jz_ddk10 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
米粒宝的爸爸10 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
kfepiza10 小时前
Debian的`/etc/network/interfaces`的`allow-hotplug`和`auto`对比讲解 笔记250704
linux·服务器·网络·笔记·debian