Une explication détaillée de la prise en main de Jade dans Node.js
Cet article présente principalement l'introduction détaillée du moteur de modèles Node.js Jade est un moteur de modèles de Node.js. Maintenant, je le partage avec vous et le donne comme référence.
Jade est un moteur de modèles pour Node.js. Il s'appuie sur de nombreux aspects de Haml, sa syntaxe est donc relativement similaire à Haml. De plus, Jade prend également en charge les espaces.
1. Balises
Dans Jade, tout texte en début de ligne est interprété par défaut comme une balise HTML. Et il vous suffit d'écrire la balise-note d'ouverture : pas besoin d'ajouter "<>". Parce que Jade rendra les balises de fermeture et d'ouverture pour nous. Par exemple :
body
p
h1 Jade是Node.js的一个模板引擎
p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
p
footer © PandoraLe code HTML final rendu par le modèle Jade ci-dessus est :
<body>
<p>
<h1> Jade是Node.js的一个模板引擎</h1>
<p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>
</p>
<p>
<footer>© Pandora</footer>
</p>
</body>Remarque : si aucun nom de balise n'est écrit, la valeur par défaut est la balise p.
2. Variables/données
Les données transmises au modèle Jade sont appelées locales. Utilisez le signe égal "=" pour afficher la valeur d'une variable.
(locales) :
{
title: "Express.js Guide",
body: "The Comprehensive Book on Express.js"
}Code Jade :
h1= title p= body
Sortie HTML rendue :
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
3. variables
La valeur de la lecture des variables dans Jade est obtenue via #{name}. Par exemple :
- var title = "Node"
p I love #{title}La valeur de la variable est traitée lors de la compilation du modèle, ne l'utilisez donc pas dans l'exécutable JavaScript(-).
4. Attributs
Les attributs suivent l'étiquette et sont entourés par "()", et plusieurs attributs sont séparés par ",". Par exemple : corps (nom1 = « valeur1 », nom2 = « valeur2 »).
p(id="content", class='main')
a(href='http://csdn.net', title='csdn主页'， target='_blank') CSDN:中国软件联盟
form(action="/login")
button(type="submit", value="提交")Sortie :
<p id="content" class='main'>
<a href='http://csdn.net' title='csdn主页' target='_blank'> CSDN:中国软件联盟</a>
<form action="/login">
<button type="submit" value="提交">
</form>
</p>Attribut dynamique :
L'attribut dynamique signifie que la valeur de l'attribut est dynamique, c'est-à-dire une variable est utilisée pour représenter la valeur de l'attribut. Le symbole "|" peut écrire le contenu du nœud HTML sur une nouvelle ligne. Par exemple :
a(href=url, data-active=isActive) label input(type="checkbox", checked=isChecked) | yes / no
Données fournies au modèle ci-dessus :
{
url: "/logout",
isActive: true,
isChecked: false
}La sortie HTML après le rendu final :
<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
Remarque : La valeur de l'attribut est false L'attribut sera ignoré lors de la sortie du code HTML ; lorsqu'aucune valeur d'attribut n'est transmise, il sera par défaut vrai.
5. Littéral
Pour éviter les problèmes, vous pouvez écrire directement le nom de la classe et le nom de l'ID après le nom de la balise. Par exemple :
p#content
p.lead.center
| Pandora_galen
#side-bar.pull-right // 没有标签名，默认为“p”
span.contact.span4
a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact meHTML de sortie rendu :
<p id="content">
<p class="lead center">
Pandora_galen
<p id="side-bar" class="pull-right"></p>
<span class="contact span4">
<a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a>
</span>
</p>6. Texte
Utilisez le symbole "|" texte.
p | 我两年前开始学习前端 | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。
7. Blocs de script et de style
Utilisez le symbole "." pour créer du
script.
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");Code généré en HTML :
<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>De même, le style génère .
8. Code JavaScript
Utilisez -, = ou ! =Ces trois symboles sont utilisés pour écrire du code JS exécutable dans Jade qui peut manipuler la sortie. Ceci est utile lors de la sortie d’éléments HTML et de l’injection de JavaScript. Cependant, vous devez faire attention à éviter les attaques de scripts intersites (XSS) lors de cette opération.
Par exemple, vous pouvez l'utiliser ! =Définir un tableau, afficher les données de balise :
- var arr = ['<a>', '<b>', '<c>']
ul
-for (var i = 0; i < arr.length; i++)
li
span= i
span!= "unescaped:" + arr[i] + "vs."
span= "escaped:" + arr[i]Le code généré est le suivant :
<ul> <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li> <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li> <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li> </ul>
Une différence majeure entre le moteur de modèle Jade et Guidon est la suivante : Jade permet d'écrire le code Presque entièrement JavaScript ; cependant, Handles limite les développeurs à un petit nombre d'assistants intégrés et personnalisés.
9. Commentaires
Jade a deux types de commentaires :
<1>. ><2>. Pas de sortie sur la page - "//-"
// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
instruction if
Ajoutez un préfixe - à l'instruction if, afin que vous puissiez écrire du code JavaScript standard ; vous pouvez également l'utiliser sans préfixes ni crochets, bien sûr, ce dernier est plus concis.- var user = {}
- user.admin = Math.random() > 0.5
if user.admin
button(class = "launch") Launch Spacecraft
else
button(class = "login") Log in11
L'itération dans Jade est très. simple. Utilisez simplement l'instruction each.- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + value<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
p
each value, key in languages
p= key + ":" + value<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
12. Filtre
La fonction du filtre est de : écrire un bloc de texte dans une autre langue ;p
:markdown
# practical Node.js
[This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.13. cas
- var coins = Math.round(Math.random() * 10)
case coins
when 0
p You have no money
when 1
p You have a coin
default
p You have #{coins} coins!14. Fonction mixin
Si vous avez utilisé sass ou compas mixin Vous le ferez je les connais certainement, et la méthode d'utilisation du mixin dans Jade est fondamentalement la même qu'eux. Syntaxe de la déclaration : mixin name(param, param2, …….)Appel : +name(data)mixin row(items)
tr
each item, index in items
td= item
mixin table(tableData)
table
each row, index in tableData
+row(row)
- var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
+table(node)
- var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}]
+table(js)<table>
<tr>
<td>express</td>
</tr>
<tr>
<td>Jade</td>
</tr>
<tr>
<td>Handlebars</td>
</tr>
</table>
<table>
<tr>
<td>backbone</td>
</tr>
<tr>
<td>angular</td>
</tr>
<tr>
<td>emberJS</td>
</tr>
</table>15. include
include est très similaire à l'introduction de fichiers externes JS et CSS. C'est une approche descendante : dans le fichier principal qui inclut d'autres fichiers, nous décidons quoi utiliser. Le fichier principal sera traité en premier (les données locales peuvent être définies dans le fichier principal), puis les sous-fichiers inclus dans le fichier principal seront traités (les sous-fichiers peuvent utiliser les données locales définies dans le fichier principal <) ; 🎜>Pour inclure un modèle Jade, utilisez include /path/filename.
Par exemple, dans le fichier A :
Remarque : il n'est pas nécessaire d'ajouter des guillemets doubles ou des guillemets doubles vers le nom et le chemin du modèle ici.include ./includes/header
Pour un autre exemple, lancez la recherche à partir du répertoire parent :
Remarque : vous ne pouvez pas utiliser de variables dans les noms de fichiers et les chemins de fichiers, car les inclusions/partiels sont traités au moment de la compilation, pas au moment de la compilation lors de son exécution.include ../includes/footer
对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。
16、extend
extend与include“唱对台戏”，正好相反，extend是一种自底向上的方法。它所包含的文件决定它要替换主文件中哪那一部分。
使用格式： extend filename 和 block blockname;
示例-1： 在文件file_a里：
block header p some default text block content p loading... block footer p copyright
示例-2： 在文件file_b里：
extend file_a block header p very specific text block content .main-content
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
La différence entre nodejs et tomcat
Apr 21, 2024 am 04:16 AM
Les principales différences entre Node.js et Tomcat sont : Runtime : Node.js est basé sur le runtime JavaScript, tandis que Tomcat est un conteneur de servlet Java. Modèle d'E/S : Node.js utilise un modèle asynchrone non bloquant, tandis que Tomcat est un modèle de blocage synchrone. Gestion de la concurrence : Node.js gère la concurrence via une boucle d'événements, tandis que Tomcat utilise un pool de threads. Scénarios d'application : Node.js convient aux applications en temps réel, gourmandes en données et à forte concurrence, et Tomcat convient aux applications Web Java traditionnelles.
La différence entre nodejs et vuejs
Apr 21, 2024 am 04:17 AM
Node.js est un environnement d'exécution JavaScript côté serveur, tandis que Vue.js est un framework JavaScript côté client permettant de créer des interfaces utilisateur interactives. Node.js est utilisé pour le développement côté serveur, comme le développement d'API de service back-end et le traitement des données, tandis que Vue.js est utilisé pour le développement côté client, comme les applications monopage et les interfaces utilisateur réactives.
Nodejs est-il un framework backend ?
Apr 21, 2024 am 05:09 AM
Node.js peut être utilisé comme framework backend car il offre des fonctionnalités telles que des performances élevées, l'évolutivité, la prise en charge multiplateforme, un écosystème riche et une facilité de développement.
Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ?
Apr 21, 2024 am 05:18 AM
Il existe deux fichiers liés à npm dans le répertoire d'installation de Node.js : npm et npm.cmd. Les différences sont les suivantes : différentes extensions : npm est un fichier exécutable et npm.cmd est un raccourci de fenêtre de commande. Utilisateurs Windows : npm.cmd peut être utilisé à partir de l'invite de commande, npm ne peut être exécuté qu'à partir de la ligne de commande. Compatibilité : npm.cmd est spécifique aux systèmes Windows, npm est disponible multiplateforme. Recommandations d'utilisation : les utilisateurs Windows utilisent npm.cmd, les autres systèmes d'exploitation utilisent npm.
Quelles sont les variables globales dans nodejs
Apr 21, 2024 am 04:54 AM
Les variables globales suivantes existent dans Node.js : Objet global : global Module principal : processus, console, nécessiter Variables d'environnement d'exécution : __dirname, __filename, __line, __column Constantes : undefined, null, NaN, Infinity, -Infinity
Nodejs est-il un langage de développement back-end ?
Apr 21, 2024 am 05:09 AM
Oui, Node.js est un langage de développement backend. Il est utilisé pour le développement back-end, notamment la gestion de la logique métier côté serveur, la gestion des connexions à la base de données et la fourniture d'API.
Y a-t-il une grande différence entre nodejs et java ?
Apr 21, 2024 am 06:12 AM
Les principales différences entre Node.js et Java résident dans la conception et les fonctionnalités : Piloté par les événements ou piloté par les threads : Node.js est piloté par les événements et Java est piloté par les threads. Monothread ou multithread : Node.js utilise une boucle d'événements monothread et Java utilise une architecture multithread. Environnement d'exécution : Node.js s'exécute sur le moteur JavaScript V8, tandis que Java s'exécute sur la JVM. Syntaxe : Node.js utilise la syntaxe JavaScript, tandis que Java utilise la syntaxe Java. Objectif : Node.js convient aux tâches gourmandes en E/S, tandis que Java convient aux applications de grande entreprise.
Lequel choisir entre nodejs et java ?
Apr 21, 2024 am 04:40 AM
Node.js et Java ont chacun leurs avantages et leurs inconvénients en matière de développement Web, et le choix dépend des exigences du projet. Node.js excelle dans les applications en temps réel, le développement rapide et l'architecture de microservices, tandis que Java excelle dans la prise en charge, les performances et la sécurité de niveau entreprise.
