uniapp基础-教程之HBuilderX基础常识篇02

微丽宝2023-11-28 12:22

uniapp创建项目时属性多为vue后缀；其中每个文件中都包含了三段式结构分别是template；script；style形势，分别是前端显示的画面以及js和css样式。

template：说大白话就是给别人看的，我们打开页面就可以看到的内容

例如：template就是装修的房子给其他人看的，而script就是你的仓库，可以通过仓库拿出一个东西。style就是你摆放的位置，让他摆放的位置不那么突兀。

这里说一下js

如：这段代码就是我们前端显示的画面

html 复制代码

<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
<template>

由js进行输出给前端

javascript 复制代码

<script>
export default
data() {
return {
title:'Hello 微丽宝'
}
},
onLoad() {
},
methods: {
}
</script>

其中在data函数中输出的内容才可以在<template>进行使用或者显示，return 中我们看到他输出的是title，需要在template中显示则需要一个大阔号{{title}}包裹title；这个是我们常说的数据绑定。

onLoad就是生命周期函数，主要监听页面的加载；onshow就是监听页面显示时；详情可查看具体生命周期函数的解释https://uniapp.dcloud.net.cn/tutorial/page.html#pagefaq

methods写自定义函数在这个结构中定义多个方法

多个方法之间用逗号分割开，最后一个方法逗号省略

javascript 复制代码

{
	data(){
		return{}
	},
	methods：{
		方法名1（形参列表）{
		},
		方法名2（形参列表）{
		},
		...
	}
}

原文地址：

uniapp教程之HBuilderX基础常识篇02 - 信息技术 - 微丽宝uniapp创建项目时属性多为vue后缀；其中每个文件中都包含了三段式结构分别是template；script；style形势，分别是前端显示的画面以及js和css样式这里说一下js如：这段代码就是我们前端显示的画面https://www.dcyzq.cn/post/2412.html=<>