The JavaScript framework for modern web.This is a front-end framework that can control multiple pages. Writing JavaScript is like writing back-end code, which truly realizes efficient native development. In addition, we will add native component writing and debugging in future versions.
Please refer to TNT.js Roadmap.
Although tntjs is a more native front-end framework, you can still install them using a package manager just like any other framework
First we need a project directory, assuming you are developing in a Linux environment, let's create a new MyFirstTNTJsProject
$ mkdir MFTJP #here is the abbreviation
$ cd MFTJP
$ code ./Then let's install it
$ npm install tntjs #npm
$ yarn add tntjs #yarn
$ pnpm install tntjs #pnpmOr you can also use the files on the cdn
https://cdn.jsdelivr.net/npm/tntjs@latest/dist/src/index.jsNow you can happily control multiple pages with tntjs!
Next, let's write the simplest Hello world. tntjs uses <v> to realize the two-way binding of responsive variables and pages, that is to say, the value bound on the page will change as the variable changes.
<v data="variableName"/>Fill in the expression in the data attribute
The js part needs to instantiate a TNTApp
export const app = new TNTApp();Then use page to preset the page:
// App.js
export const app = new TNTApp();
app.page({
data: {
x: "Hello world!"
},
mount: document.getElementById("app")
}, "id1")- Each html file has a separate pageid, you can use
<page-id>to set it in<head>, which is the page identifier for tntjs multi-page programming
<page-id>page1</page-id>- Use
datain the first parameter to set the initial value of the responsive variable - The first parameter uses
mountto specify the Element object of the scope of the tntjs application (the specified node can only have one child node)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./App.js" type="module"></script>
<title>tntjs demo</title>
<page-id>id1</page-id>
</head>
<body>
<div id="root">
<div>
<v data="x"></v>
</div>
</div>
</body>
</html>Open it in browser, You can see:
Hello world!
Please refer to https://tnt.js.org for more information.
We're all middle school students and we don't have that much money. So sponsoring TNTjs will give us an extra reward to let us keep updating!😉
- Emoji guidelines:
- ⭐ : Community administrator
- 🖊️ : Major contributor
- 🧑🎓 : Student
 |
 |
 |
 |
||
|---|---|---|---|---|---|
| 箱子Acbox ⭐ 🖊️ 🧑🎓 |
samzhangjy ⭐ 🖊️ 🧑🎓 |
mono ⭐ 🖊️ |
27Onion 🖊️ 🧑🎓 |
leonfyr 🖊️ 🧑🎓 |
Rotten-LKZ 🧑🎓 |
- 2022.4.1 开始在学校构思
- 2022.4.5 项目启动
- 2022.4.9
<v></v>标签功能实现 - 2022.4.10 变量赋值功能实现(TNTScript已废弃)
- 2022.4.17 函数调用功能实现
- 2022.4.24 TypeScript 重构项目
- 2022.5.22 项目重构完成
- 2022.5.29 发布 0.1.0 版本
- 2022.5.29 取消发布 0.1.0 版本
- 2022.6.9 ES6重构完成
- 2022.7.1 开发者们都放暑假啦!恢复开发
- 2022.7.20 vdom(虚拟dom)实现
- 2022.8.3 重写完成
Enjoy!