代码拉取完成，页面将自动刷新
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")
<page-id> to set it in <head>, which is the page identifier for tntjs multi-page programming<page-id>page1</page-id>
data in the first parameter to set the initial value of the responsive variablemount 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!😉
: Community administrator |
 |
 |
 |
||
|---|---|---|---|---|---|
| 箱子Acbox :pen: :student: |
samzhangjy :pen: :student: |
mono :pen: |
27Onion :pen: :student: |
leonfyr :pen: :student: |
Rotten-LKZ :student: |
<v></v>标签功能实现Enjoy!
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型
马建仓 AI 助手
