米坛社区 2024 下半年社区版主招募中🔥
本帖提供一下新手入门开发vela的开发语言文档
js_从入门到入坟
json_从入门到入坟
HTML_从入门到入坟
CSS_从入门到入坟
下列为json，js去米7
JSON - 入门篇
提示:本帖仅供参考，请勿复制此帖的任何内容！
1 - 认识JSON
文件名+后缀为.json（常识）
json与js的区别
json,编码UTF-8,与javascript(js)是有区别的
json大多数的格式为
"xxx": {
"xxx": "xxx"
}
而javascript(js)的格式则与这个不一样
xxxxx ( );
xxxxxx
2 - JSON的格式
如上所说，控件的开头，结尾都有大括号或中括号，
---而它们是对称的---
举个例子,
"xxx": {
"xxx": "xxx",
"controls": [
{
"xxx": {
"xxx": "xxx"
}
}
]
}
可以发现，开头是大括号，最后一个符号也是大括号
就这样对称着
----------------------------------
}
//------位置------//
top_left
top_middle
top_right
left_middle
center
right_middle
bottom_left
bottom_middle
bottom_right
——————————字体———————
vela暂时只支持MiSans
json实例
-----------------------------------------
JSON 字符串转换为 JavaScript 对象
JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
完整实例
JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。
------------------------------------------
HTML
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
实例
-------------------------------------------
CSS-弹性盒（CSS3内容）
为什么会有CSS，请看开发文档
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
当然我们可以修改排列方式。
如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
js_从入门到入坟
json_从入门到入坟
HTML_从入门到入坟
CSS_从入门到入坟
下列为json，js去米7
JSON - 入门篇
提示:本帖仅供参考，请勿复制此帖的任何内容！
1 - 认识JSON
文件名+后缀为.json（常识）
json与js的区别
json,编码UTF-8,与javascript(js)是有区别的
json大多数的格式为
"xxx": {
"xxx": "xxx"
}
而javascript(js)的格式则与这个不一样
xxxxx ( );
xxxxxx
2 - JSON的格式
如上所说，控件的开头，结尾都有大括号或中括号，
---而它们是对称的---
举个例子,
"xxx": {
"xxx": "xxx",
"controls": [
{
"xxx": {
"xxx": "xxx"
}
}
]
}
可以发现，开头是大括号，最后一个符号也是大括号
就这样对称着
----------------------------------
}
//------位置------//
top_left
top_middle
top_right
left_middle
center
right_middle
bottom_left
bottom_middle
bottom_right
——————————字体———————
vela暂时只支持MiSans
json实例
JSON:
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}JSON 字符串转换为 JavaScript 对象
JavaScript:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
JavaScript:
var obj = JSON.parse(text);完整实例
JavaScript:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。
------------------------------------------
HTML
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
实例
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>米坛社区(bandbbs.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>CSS-弹性盒（CSS3内容）
为什么会有CSS，请看开发文档
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
CSS:
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
最后编辑:
