前端,HBuilder第七天

最新推荐文章于 2025-05-02 16:45:26 发布
最新推荐文章于 2025-05-02 16:45:26 发布
阅读量990 收藏
点赞数
文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jcskson/article/details/122726866
版权
本文介绍了使用HBuilder进行前端开发的经验，重点是结合Vue.js和ElementUI搭建用户界面的过程。通过HBuilder的强大编辑功能，提高了开发效率，Vue.js提供了灵活的数据绑定和组件化，而ElementUI作为流行的UI框架，使得界面设计更为简洁高效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="qw">
			<dog title="汪汪汪"></dog>
			<dog title="嗷呜~"></dog>
			<dog title="嗷嗷嗷嗷"></dog>
		</div>
		<script src="vue.js" type="text/javascript"></script>
		<script>
			var tem = Vue.extend({
				props:["title"],
				template:"<button style='border-radius:10px;'>{{title}}</button>",
			})
			Vue.component("dog",tem);
			new Vue({
				el:"#qw",
			})
		</script>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="qw">
			<dog></dog>
		</div>
		<script src="vue.js" type="text/javascript"></script>
		<script>
			var tem = Vue.extend({
				data:function(){
					return{count:1,}
				},
				template:"<button style='border-radius:10px;'>{{count}}</button>",
			})
			Vue.component("dog",tem);
			new Vue({
				el:"#qw",
			})
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="op">
			<cat></cat>
		</div>
		<script src="vue.js"></script>
		<script>
			var tem = Vue.extend({
				data:function(){
					return{count:1};
				},
				template:"<button style='border-radius:10px;' @click='count++'>{{count}}</button>",
			})
			Vue.component("cat",tem);
			new Vue({
				el:"#op"
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<font color="red">字体</font>
		<font color="rgb(0,75,0)">字体</font>
		<font color="#00FF00"></font>
		<hr />
		<button onclick="document.write('天冷了,赶紧出来裸奔!')">嘻嘻</button>
		<button onclick="t1()">嘿嘿嘿</button>
		<script type="text/javascript">
			function t1(){
				document.write("裸奔记得带上面具!")
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="EDG">
			<wuhu></wuhu>
			<wuhu></wuhu>
			<wuhu></wuhu>
			<wuhu></wuhu>
		</div>
		<script src="vue.js"></script>
		<script>
			// var tem = Vue.extend({
			// 	props:["tt"],
			// 	data:function(){
			// 		return{count:1};
			// 	},
			// 	template:"<button style='border-radius: 10px;' @click='test1()'>呵呵{{count}}</button>",
			// 	methods:{
			// 		test1(){
			// 			this.count++;
			// 		}
			// 	}
			// });
			Vue.component("wuhu",Vue.extend({
				props:["tt"],
				data:function(){
					return{count:1};
				},
				template:"<button style='border-radius: 10px;' @click='test1()'>呵呵{{count}}</button>",
				methods:{
					test1(){
						this.count++;
					}
				}
			}));
			new Vue({
				el:"#EDG",
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图标按钮</title>
		<link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css"/>
	</head>
	<body>
		<div id="EDG">
			<el-row>
				  <i class="el-icon-search"></i>
				  <i class="el-icon-delete"></i>
				  <i class="el-icon-edit"></i>
			</el-row>
		</div>
		<script src="vue.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el:"#EDG",
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css"/>
	</head>
	<body>
		<div id="EDG">
			<el-row>
				  <el-button type="info">信息按钮</el-button>
				  <el-button type="warning">警告按钮</el-button>
				  <el-button type="danger">危险按钮</el-button>
			</el-row>
		</div>
		<script src="vue.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el:"#EDG",
				data:{}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>表格组件</title>
		<link rel="stylesheet" href="../vueday03/element-ui/lib/theme-chalk/index.css"/>
		<script src="../vueday03/vue.js"></script>
		<script src="../vueday03/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="EDG">
			<template>
			<el-table :data = "users" style="width: 100%;">
				<el-table-column prop="data" label="日期" width="180"></el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
				<el-table-column label="操作" width="180">
					<el-button type="warning">编辑</el-button>
					<el-button type="danger">删除</el-button>
				</el-table-column>
			</el-table>
			</template>
		</div>
		<script>
			new Vue({
				el:"#EDG",
				data:{
					users:[{
						data:'2016-05-02',
						name:'王小虎',
						address:'上海市普陀区金沙江路 1518 弄'
					},{
						data:'2016-05-04',
						name:'李逍遥',
						address:'上海市普陀区金沙江路 1517 弄'
					},{
						data:'2016-05-01',
						name:'赵灵儿',
						address:'上海市普陀区金沙江路 1519 弄'
					},{
						data:'2016-05-03',
						name:'林忆如',
						address:'上海市普陀区金沙江路 1516 弄'
					}]
				}
			})
		</script>
	</body>
	
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>容器布局</title>
		<link rel="stylesheet" href="../vueday03/element-ui/lib/theme-chalk/index.css"/>
		<script src="../vueday03/vue.js"></script>
		<script src="../vueday03/element-ui/lib/index.js"></script>
		<style>
			.el-header,.el-footer{
				background-color: #d18e66;
				color: #333;
				text-align: center;
				height: 100px;
			}
			.el-aside{
				background-color: #55e658;
				color: #333;
				text-align: center;
				height: 580px;
			}
			.el-main{
				background-color: #5fb1f3;
				color: #333;
				text-align: center;
				height: 520px;
			}
		</style>
	</head>
	<body>
		<div id="EDG">
			<el-container>
				<el-header>头部区域</el-header>
				<el-container>
					<el-aside width="200px">侧边栏区域</el-aside>
					<el-container>
						<el-main>主区域</el-main>
						<el-footer>底部区域</el-footer>
					</el-container>
				</el-container>
			</el-container>
		</div>
		<script>
			new Vue({
				el:"#EDG",
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本布局</title>
		<link rel="stylesheet" href="../vueday03/element-ui/lib/theme-chalk/index.css"/>
		<script src="../vueday03/vue.js"></script>
		<script src="../vueday03/element-ui/lib/index.js"></script>
		<style>
			.el-row{
				margin-bottom: 20px;
			}
			.bg-purple-dark{
				background: red;
			}
			.bg-purple{
				background: #00FFFF;
			}
			.bg-purple-light{
				background: #F0C78A;
			}
			.grid-content{
				border-radius: 4px;
				min-height: 36px;
			}
		</style>
	</head>
	<body>
		<div id="EDG">
			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
		</div>
	</body>
	<script>
		new Vue({
			el:"#EDG"
		})
	</script>
</html>

HBuilder
weixin_34388207的博客
05-26 401
/*注：本教程针对HBuilder5.0.0，制作日期2014-12-31*/创建HTML结构： h 8 （敲h激活代码块列表，按8选择第8个项目，即HTML代码块，或者敲h t Enter）中途换行： 'Ctrl+Enter'设置charset： m e 6 Enter引用外部js： s 2 Enter 'Ctrl+Enter'创建js区块： s Enter创建函数： f ...
前端,HBuilder第五天
Jcskson的博客
01-27 854
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> /* 在html网页里面引入javascript * 方式一: * html网页里面,是写script标签,里面定义js代码 * 缺点: * 1..
前端开发_开发软件Hbuilder简介
热门推荐
u013185175的博客
12-11 1万+
一、Hbuilder简介 (1):软件简介 HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写， 它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势， 通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。 (2):软件...
HBuilderX前端html功能拓展应用
m0_58239511的博客
09-07 2586
1.无序列表: ul标签、li标签 ul标签 - 代表整个列表(容器) li标签 - 列表中的元素2.有序列表：ol标签、li标签 ol标签 - 代表整个列表(容器) li标签 - 列表中的元素 input标签 ：input标签的功能和type属性值有关。不同的type对应的功能： 1）text(默认) - 普通文本输入框 value - 表示输入框内容 placeholder - 输入框占位符(输入提示信息) maxlength - 最大输入长度3)radio - 单选按钮 name
Hbuilder创建项目，制作html网页第一天
m0_65230676的博客
06-16 2242
/90度 0.1745329 = 10度。//宽500，高600。var text=new PIXI.Text("得分：0000");feiji.style.fontFamily="黑体";
WEB前端属性标签（Hbuilder X）
2301_80318713的博客
06-26 1457
12.图像标签：img 单标记，没有自动分段的功能，src写图像的存放路径， alt：替换文本，图像不能正常显示时才会出现，title鼠标移动到图片上才出现，width 宽，height 高，一般情况两个值只给一个，另一个会按照原图长宽比例自动等比缩放，border设置边框。2.字符颜色：color：（颜色表示方法1.单词 2.#fff 3.rgba(red, green, blue, alpha)）colspan跨列合并 rowspan跨行合并。24.超链接标签 ：25
前端入职第一天,你需要怎么做?
weixin_58459702的博客
05-05 1276
前端入职第一天,我该怎么做呢?
第4章 初识HbuilderX之移动前端App开发
zhoujian_911的专栏
09-24 5199
本人学习vue的根本目标是为了让手机移动端的(前端)App通过跨域(Cors)操作和与后端的已经部署在IIS中的.Net(Core)6程序进行数据交互操作，并通过交互操作获取数据后在让手机移动端的(前端)App中渲染显示出来；而不是把vue视图页面做为PC端或移动端浏览器的渲染显示页面，因为“*.cshtml” 这种对强类型支持的视图页面，更加符合后台开发者，对程序的快速、调质量的构建。 2 HbuilderX之跨域(Cors)交互操作定义实现 本人在HbuilderX中以多种形式测试了当前网上已有的Hb
Hbuilder创建项目，制作html网页第六天
m0_65230676的博客
06-22 1281
2、创建纹理 var shang=new PIXI.Texture.fromImage("img/tiaoqi.png");1、创建纹理1 var t1 = new PIXI.Texture.fromImage("img/plane1.png");1、添加图片 var tiaoyue=new PIXI.Sprite.fromImage("img/tiao.png");textures 播放器中所有的纹理图像，可以用其他纹理数组为其赋值，改变原有播放器中播放的纹理。
利用HBuilder打包前端开发webapp为apk的方法
11-30
第七步，配置应用的启动图标、名称和元数据。在HBuilder中，可以编辑JSON配置文件，设置应用的展示信息。这包括启动图标、应用名称、版本号等。完成设置后，选择发行原生应用，并进行相应的设置。 最后，执行打包...
前端开发工具HBuilder下载
04-29
### 前端开发工具HBuilder下载 #### HBuilder简介 HBuilder是一款专为前端开发者设计的高度集成化的开发工具，由DCloud（数字天堂）公司研发。它支持HTML5、CSS3、JavaScript等前端开发语言，并且具备智能提示、...
HBuilderX.3.1.7.20210330.zip
04-06
HBuilderX是一款专为前端开发者设计的强大代码编辑器，它的版本号3.1.7.20210330代表着该软件在2021年3月30日的一个更新迭代。作为一个专业的IT工具，HBuilderX以其强大的功能和易用性在前端开发领域占据了重要的...
HBuilderX安装.7z
07-16
- **插件扩展**：HBuilderX支持安装第三方插件，可以增强其功能，例如代码美化、代码检查等。 - **MD编写**：内置Markdown编辑器，方便编写技术文档或博客。 - **版本控制**：集成Git，方便进行版本控制和团队...
watch 数组 Vue 3
qq_30049249的博客
05-01 291
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
改善WebStorm性能
四荒八极的博客
04-29 1566
默认情况下，WebStorm会在你输入代码时进行分析，并高亮显示当前文件中发现的所有问题。它的主要目标是减少IDE的总体索引时间和CPU使用率，因此请确保在“Settings | Plugins”的“Installed”选项卡上启用了Shared Project Indexes插件。可以转到“Settings | Editor | Inspections”，找到“未使用的全局符号检查（Unused global symbol）”，取消选中。这些插件支持我们大多数用户的应用场景，但你不需要的插件可以禁用。
ruoyi-plus Spring Boot + MyBatis 中 BaseEntity 的设计与动态查询实践
字节叔叔
05-01 298
通过在BaseEntity中引入和params，我们实现了灵活的动态查询能力，在开发中极大简化了接口参数结构与查询逻辑。同时，也提升了系统的可维护性与扩展性，是开发大型后台系统中常用的技巧之一。如果你正在构建一个基于 Spring Boot + MyBatis 的后台管理系统，不妨考虑将这两个字段纳入你的BaseEntity设计中。
ruoyi-plus登录菜单默认折叠
tiantiantbtb的博客
04-30 180
└── AppMain.vue ← 中间内容区（显示实际页面内容）layout/index.vue ← 页面整体布局（顶层）├── Navbar.vue ← 顶部导航栏。├── Sidebar/index.vue ← 左侧菜单栏。
WebRtc11:SDP详解
最新发布
upset_poor的博客
05-02 311
对rtpmap进一步说明用fmtp。
DevExpress&WinForms-XtraMessageBox-使用教程
Amon的专栏
04-29 61
XtraMessageBox.Show("文件已成功保存", "操作提示");在这个示例中，消息框的内容为 “文件已成功保存”，标题显示为 “操作提示”，能够更清晰地告知用户消息的类别和重要程度。XtraMessageBox 支持丰富的自定义功能，通过设置不同的参数，我们可以让消息框更贴合具体的业务场景和用户需求。通过参数，可以为消息框添加不同的图标，以直观地向用户传达消息的类型。：显示一个蓝色的信息图标，用于表示常规的提示信息，例如 “操作成功”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值