Jade テンプレート エンジンの使用に関する詳細

亚连
リリース: 2018-06-21 11:27:14
オリジナル
1519 人が閲覧しました

以下のエディターは、テンプレート エンジン Jade に基づくアプリケーションの詳細な説明を共有します。これは優れた参考価値があり、皆様のお役に立てれば幸いです。エディターをフォローして見てみましょう

便利な記号:

| 縦棒の後の文字はそのまま出力されます · ドットは、次のレベルのすべての文字がそのまま出力されることを意味します。もう認識されなくなります。 (| のアップグレード版で、バッチ処理が可能です) include は、外部ファイルを参照することを意味します

ダッシュは、その後の文字がコードの一部であることを示します (| との違いは、| の後の内容が表示されるのに対し、ダッシュ以降の内容は直接表示されません!)

例:

js:

const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))
ログイン後にコピー

jade:

'|'アプリケーション

'。

変数を呼び出して操作を行う

pクラス

'-'アプリケーション

変数への直接参照

span#{ a} とスパン=a も同じ効果があります。

jade

jadeのforループ:

-for(var i=0;i<arr.length;i++)
 p=arr[i]
ログイン後にコピー

jsファイル:

console.log(jade.renderFile(&#39;./views/11.jade&#39;,{pretty:true,name:&#39;singsingasong&#39;,
 arr:[&#39;aaa&#39;,&#39;bbb&#39;,&#39;ccc&#39;,&#39;ddd&#39;]
}));
ログイン後にコピー
実行結果:

'!' アプリケーション

html
 head
 body
 p(class=&#39;1&#39;)!=content
 p(class=&#39;2&#39;)
ログイン後にコピー

実行結果:

翡翠の場合...else...

html
 head
 body
 -var a=19;
 if(a%2==0)
  p(style={background:&#39;red&#39;}) 偶数
 else
  p(style={background:&#39;green&#39;}) 奇数
ログイン後にコピー

caseステートメント

html
 head
 body
 -var a=1;
 case a
  when 0
  p aaa
  when 1
  p bbb
  when 2
  p ccc
  default
  |不靠谱
ログイン後にコピー

結合したもの

ヒント:

以前のjadeファイルにはDOCTYPEを記述しませんでした。

実行結果は、ファイルの読み取りと書き込みが成功した場合は「success」が出力され、エラーが発生した場合は「error」が返されます。

上記は私があなたのためにまとめたものです。

関連記事: vuejsでモジュラーアプローチを使用して開発

VUEで配列更新関数を実装する方法

vue-cliを使用してマルチページアプリケーションを実装する方法

をHTML5で+JS +JQuery+ECharts で非同期読み込みを実装する方法

以上がJade テンプレート エンジンの使用に関する詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!