Слияние кода завершено, страница обновится автоматически
Фреймворк JavaScript для современного веба. Это фронтенд-фреймворк, который может управлять несколькими страницами. Написание JavaScript похоже на написание бэкенд-кода, что действительно реализует эффективную нативную разработку. Кроме того, в будущих версиях мы добавим нативное написание компонентов и отладку.
Пожалуйста, обратитесь к дорожной карте TNT.js.
Хотя tntjs — это более нативный фронтенд-фреймворк, вы всё равно можете установить его с помощью менеджера пакетов, как и любой другой фреймворк.
Сначала нам нужен каталог проекта. Предположим, вы разрабатываете в среде Linux, давайте создадим новый MyFirstTNTJsProject:
$ mkdir MFTJP #здесь аббревиатура
$ cd MFTJP
$ code ./
Затем установим его:
$ npm install tntjs #npm
$ yarn add tntjs #yarn
$ pnpm install tntjs #pnpm
Или вы также можете использовать файлы на CDN:
https://cdn.jsdelivr.net/npm/tntjs@latest/dist/src/index.js
Теперь вы можете с радостью управлять несколькими страницами с помощью tntjs!
Далее давайте напишем простейший «Hello world». tntjs использует <v>, чтобы реализовать двустороннюю привязку реагирующих переменных и страниц, то есть значение, связанное со страницей, будет меняться по мере изменения переменной.
<v data="variableName"/>
Заполните выражение в атрибуте data.
Часть js должна создать экземпляр TNTApp:
export const app = new TNTApp();
Затем используйте page, чтобы задать страницу:
// App.js
export const app = new TNTApp();
app.page({
data: {
x: "Hello world!"
},
mount: document.getElementById("app")
}, "id1")
<page-id>, чтобы установить его в <head>, который является идентификатором страницы для многостраничного программирования tntjs.<page-id>page1</page-id>
data в первом параметре, чтобы установить начальное значение реагирующей переменной.mount, чтобы указать объект Element области действия приложения tntjs (указанный узел может иметь только один дочерний узел).<!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>
Откройте его в браузере, и вы увидите:
Hello world!
Для получения дополнительной информации обратитесь к https://tnt.js.org.
Мы все ученики средней школы, и у нас не так много денег. Поэтому спонсирование TNTjs даст нам дополнительную награду, которая позволит нам продолжать обновлять проект!😉
: Администратор сообщества<v></v>.Enjoy!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )