Explication détaillée du moteur de modèles Node.js Jade-js tutoriel-php.cn

Cet article présente principalement une introduction détaillée au moteur de modèles Node.js. Jade est un moteur de modèles pour Node.js. L'éditeur le trouve plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. . Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 © Pandora

Copier après la connexion

Le 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>

Copier après la connexion

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.

(locaux) :

{
  title: "Express.js Guide",
  body: "The Comprehensive Book on Express.js"
}

Copier après la connexion

Code Jade :

h1= title
p= body

Copier après la connexion

rendu Sortie HTML :

<h1>Express.js Guide</h1>
<p>The Comprehensive Book on Express.js</p>

Copier après la connexion

3. Lecture des variables

La valeur de la variable dans Jade est lue via #{ name } à réaliser. Par exemple :

- var title = "Node"

p I love #{title}

Copier après la connexion

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=&#39;main&#39;)
  a(href=&#39;http://csdn.net&#39;, title=&#39;csdn主页&#39;， target=&#39;_blank&#39;) CSDN:中国软件联盟
  form(action="/login")
    button(type="submit", value="提交")

Copier après la connexion

Sortie :

<p id="content" class=&#39;main&#39;>
  <a href=&#39;http://csdn.net&#39; title=&#39;csdn主页&#39; target=&#39;_blank&#39;> CSDN:中国软件联盟</a>
  <form action="/login">
    <button type="submit" value="提交">
  </form>
</p>

Copier après la connexion

Propriétés dynamiques :

Les attributs dynamiques signifient que la valeur de l'attribut est dynamique, c'est-à-dire qu'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

Copier après la connexion

Données fournies au modèle ci-dessus :

{
  url: "/logout",
  isActive: true,
  isChecked: false
}

Copier après la connexion

Sortie après rendu final HTML :

<a href="" data-active=" rel="external nofollow" data-active"></a>
<label>
  <input type="checkbox" />yes / no
</label>

Copier après la connexion

Remarque : les attributs avec une valeur false seront ignorés lors de la sortie du code HTML ; lorsqu'aucune valeur d'attribut n'est transmise, la valeur par défaut est true.

5. Littéral

Pour éviter les ennuis, vous pouvez écrire le nom de la classe et le nom de l'ID directement 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 me

Copier après la connexion

HTML 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>

Copier après la connexion

6. 🎜>

Utilisez le symbole "|" pour afficher le texte original.

p 
  | 我两年前开始学习前端
  | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。

Copier après la connexion

7. Blocs de script et de style

Utilisez le symbole "." HTML >

Code généré :

script.
  console.log("Hello world!");
  setTiemout(function() {
    window.location.href = "http://csdn.net"
  }, 1000);

  console.log("Good bye!");

Copier après la connexion

De même, le style génère