首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uniapp教程之HBuilderX的template;script;基础常识

uniapp教程之HBuilderX的template;script;基础常识

原创
作者头像
视频号视频下载
发布2024-05-30 16:42:09
发布2024-05-30 16:42:09
30
举报
文章被收录于专栏:知识推荐知识推荐

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

这里说一下js

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

<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进行输出给前端

<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写自定义函数在这个结构中定义多个方法

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档