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 #pnpm
Or you can also use the files on the cdn
https://cdn.jsdelivr.net/npm/tntjs@latest/dist/src/index.js
Now 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
data
in the first parameter to set the initial value of the responsive variable - The first parameter uses
mount
to 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!