整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | 單雨
責編 | 胡巍巍
出品 | CSDN（ID：CSDNnews）
前言
為了實現模板封裝和復用，提高HTML界面調試便捷性以及前后端解耦等目標，Django定義了自己的網絡模板語言。
當前介紹模板語言的官方文檔已經非常完備，幾乎涵蓋了開發中需要用到的知識點和需要注意的問題，但同時官方文檔也存在一些問題：
翻譯不夠完善，帶來閱讀的困難；
一些知識點的介紹過于簡短，存在大量的頁內鏈接，閱讀時需要跳轉到不同的頁面，閱讀不連貫。
本文基于官方文檔系統介紹了Django模板語言的基礎知識點，方便快速了解Django模板語言。
模板系統設計哲學
Django的模板系統不是簡單的把Python嵌入到HTML中。
它的設計宗旨是：模板系統旨在展示內容, 而不是程序邏輯，因此不在HTML頁面中嵌入Python。
簡單的說，模板只負責渲染數據，大多數邏輯應該交給視圖（view）進行處理。
模板簡介
模板是一個簡單的文本文件。它可以生成任何基于文本的格式（如 HTML,XML,CSV等）。除了基本的HTML標簽外，模板還包含兩種額外的元素——變量和標簽。
模板中包含的變量可以被替換為變量的值，標簽則被替換為相應的模板控制邏輯。示例：
django
{% extends "base_generic.html" %}
{% block title %}{{ section.title }}{% endblock %}
{% block content %}
<h1>{{ section.title }}</h1>
{% for story in story_list %}
<h2>
<a href="{{ story.get_absolute_url }}">
{{ story.headline|upper }}
</a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}
`{{ section.title }}`在模板渲染時將會被變量的值替換，for標簽可以實現模板的循環渲染。
基礎語法
變量
變量實現從模板上下文字典（返回HTTP響應時傳遞過來的字典）中輸出一個值，這是一個類似于dict的對象，包含鍵值對。當模板引擎遇到一個變量時，它會計算該變量，并用結果替換它。
變量名由字母、數字字符和下劃線("_")組成，但不能以下劃線開頭。點(".")也出現在變量中，代表屬性調用，變量名中不能有空格或標點符號。
示例：
django
My first name is {{ first_name }}. My last name is {{ last_name }}.
當傳入一個上下文字典`{'first_name': 'John', 'last_name': 'Doe'}`時，將會渲染得到：
django
My first name is John. My last name is Doe.
模板中的變量被字典中的值替換了。
變量還可以使用點表示法實現字典查找、屬性查找和列表索引查找等操作：
django
{{ my_dict.key }}
{{ my_object.attribute }}
{{ my_list.0 }}
點表示法底層原理
當模板系統遇到一個點,它會按順序嘗試下面的動作：
1. 字典查詢
2. 屬性或方法查找
3. 數字索引查詢
如果結果值是可調用的，則調用該值時將不帶參數，調用的結果成為新的模板值。
當進行能覆蓋字典查找的操作時，這種查找順序可能會造成一些意想不到的行為。例如：如果試圖循環一個collection .defaultdict字典對象：
django
{% for k, v in defaultdict.items %}
{其他操作}
{% endfor %}
因為字典查找是首先發生的，所以這個行為會先提供一個默認值，而不是使用預期的.items方法。在這種情況下，應該首先考慮使用字典查找，而不是使用字典的屬性調用。
注意
屬性通常被解釋為一個文本字符串，防止和同名的變量沖突。例如{{foo.bar}}中的屬性“bar”將被解釋為一個文本字符串，如果模板上下文中存在變量“bar”，則不會使用該變量的值。
以下劃線開頭的變量屬性可能不能訪問，因為它們通常被認為是私有的。
如果引用不存在的變量，模板系統將插入string_if_invalid選項的值，該選項默認設置為“”(空字符串)。
標簽
標簽在模板渲染過程中提供任意邏輯。標簽可以輸出內容，作為控制結構，例如“if”語句或“for”循環，從數據庫獲取內容，甚至允許訪問其他模板標簽。
（1）標簽聲明
標簽的一般形式為：
django
{% tag %}
示例：
django
{% csrf_token %}
（2）傳入參數
django
{% cycle 'odd' 'even' %}
（3）成對使用的標簽
有些標簽需要開始和結束標簽：
django
{% if user.is_authenticated %}Hello, {{ user.username }}.{% endif %}
（4）常用標簽
for：循環數組中的每個元素. 比如, 顯示列表 `athlete_list` 中每個元素的 `name` 屬性。
django
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% endfor %}
</ul>
if 、elif和else：在上面，如果athlete_list不為空，則{{athlete_list|length}}變量將顯示運動員的數量。
否則，如果athlete_in_locker_room_list不為空，則會顯示“Athletes should be out…”消息。如果兩個列表都為空，則顯示“No athletes”。
也可以在if標簽里使用過濾器和各種操作符：
django
{% if athlete_list|length > 1 %}
Team: {% for athlete in athlete_list %} ... {% endfor %}
{% else %}
Athlete: {{ athlete_list.0.name }}
{% endif %}
注意
雖然上面的示例可以工作，但是要注意，大多數模板過濾器都返回字符串，因此使用過濾器進行數學比較通常不會正常工作，而長度是個例外。
（5）更多
Django有很多內置標簽，更多關于內置標簽的信息請參考官方文檔：
https://docs.djangoproject.com/zh-hans/2.2/ref/templates/builtins/ref-templates-builtins-tags
如果需要編寫自定義標簽，請參考官方文檔
https://docs.djangoproject.com/zh-hans/2.2/howto/custom-template-tags/howto-writing-custom-template-tags
如果需要對使用的標簽和自定義的標簽做一份說明文檔，可以使用Django提供的文檔工具，詳情請參考：
https://docs.djangoproject.com/zh-hans/2.2/ref/contrib/admin/admindocs/
過濾器
簡介
過濾器可以對變量做一些操作，例如給變量賦值，改變變量的值等。
修改變量顯示
過濾器可以修改變量的顯示。例如：
django
{{ name|lower }}
通過過濾器lower變量{{ name }}變為了小寫字符，通過管道符(|)間隔變量和過濾器來使用過濾器。
鏈式調用過濾器
一個過濾器的輸出可以作為下一個過濾器的輸入。
{{ text|escape|linebreaks }}是一種常用的轉換方式, 在這之后換行符被替換為了 <p> 標簽。
轉換變量和標簽參數
過濾器轉換變量和標簽參數的值。示例：
django
{{ django|title }}
傳入`{'django': 'the web framework for perfecalist With deadline '}`上下文字典時，該模板呈現為：
django
The Web Framework For Perfectionists With Deadlines
傳入參數給過濾器
示例1：
django
{{ my_date|date:"Y-m-d" }}
my_date將會被替換為當前日期。
示例2：
django
{{ bio|truncatewords:30 }}
將會會顯示 `bio` 變量的前30個字符
注意
過濾器參數中如果包含空格和標點符號，必須使用引號“”括起來，例如，要用逗號和空格連接列表，可以使用{{list|join:"， "}}。
Django提供了大約60個內置模板過濾器，請參考官方文檔：
https://docs.djangoproject.com/zh-hans/2.2/ref/templates/builtins/ref-templates-builtins-filters，
下面列舉一些常用的過濾器：
default
如果變量為false或空，則使用給定的默認值。否則，使用變量的值。例如：
django
{{ value|default:"nothing" }}
如果 `value` 沒有提供或者為空，那么將它顯示為 "`nothing`" 。
length
返回值的長度。這對字符串和列表都適用。例如：
django
{{ value|length }}
如果 `value` 為 `['a', 'b', 'c', 'd']`, 那么他將被顯示為 `4`。
filesizeformat
將值格式化為“人類可讀的”文件大小(即“13kb”、“4.1 MB”、“102字節”等)。例如：
django
{{ value|filesizeformat }}
如果值為123456789，則輸出為117.7 MB。
如果需要自定義過濾器，請參考請官方文檔：
https://docs.djangoproject.com/zh-hans/2.2/howto/custom-template-tags/
注釋
示例：
單行注釋
django
{ this won't be rendered }
多行注釋：{% comment %} 和{% endcomment %}
django
<p>Rendered text with {{ pub_date|date:"c" }}</p>
{% comment "Optional note" %}
<p>Commented out text with {{ create_date|date:"c" }}</p>
{% endcomment %}
注意：Comment標簽不能嵌套使用。
作者簡介：單雨，90后工科男，偽文藝青年。目前就讀于北京理工大學宇航系，喜歡研究AI，網絡爬蟲，微信小程序以及機器人，癡迷于Coding，睡前必擼碼。
【END】
直接寫在template屬性里面，這種寫法比較直觀，適用于html代碼不多的場景，但如果html代碼很多，就不方便維護了，所以如果代碼多就不建議這么寫：
在template屬性里寫模版id，這種和上面的寫法很像，只不過單獨把html的內容移到template標簽里面，寫起來就像正常的html一樣，還有代碼提示
在一個 <script> 元素中，并為其帶上 text/x-template 的類型，然后通過一個 id 將模板引用過去
以上就是介紹的幾種模版寫法。
//別忘了引包
<body>
<div id="app-1">
{{msg}}
</div>
================
<div id="app-2">
{{msg}}
</div>
=================
<div id="app-3">
{{msg}}
</div>
<script>
//在vue.js中，可以使用template給元素添加模板，但是元素中只能有一個根元素，不能出現兩個或兩個以上的根同級元素。還可以在模板中綁定數據、表達式等。下面利用實例說明如何添加模板
// 創建 Vue 實例，得到 ViewModel
new Vue({
el: '#app-1',
data: {
msg:'這是通過el屬性獲取掛載元素的outerHTML方式渲染'
}
});
//結論:如果vue實例中有template屬性，會將該屬性值進行編譯，將編譯后的虛擬dom直接替換掉vue實例綁定的元素（即el綁定的那個元素);
//注意:template屬性中的dom結構只能有一個根元素，如果有多個根元素需要使用v-if、v-else、v-else-if設置成只顯示其中一個根元素；
new Vue({
el: '#app-2',
data: {
msg:'這是通過el屬性獲取掛載元素的outerHTML方式渲染'
},
template:'<div>這是template屬性模板渲染</div>'
});
//render
new Vue({
el: '#app-3',
data: {
msg:'這是通過el屬性獲取掛載元素的outerHTML方式渲染'
},
template:'<div>這是template屬性模板渲染</div>',
render: function(createElement){
return createElement('div',
// 參數2、這里相當于給標簽加屬性 例如：<div style='color:red,font-size: 14px'></div>
{
//給div綁定樣式
style:{
width:'300px',
height:'400px',
color:'pink'
},
//給div綁定點擊事件
on: {
click: () => {
console.log('點擊事件')
}
}
},
// 參數3、參數中渲染的標簽的子元素數組（可選）
// [
// // 文本節點直接寫就可以
// 'text'
// ]
'這是render屬性方式渲染。'
);
}
});
</script>
</body>終極結論
el，template，render屬性優先性
當Vue選項對象中有render渲染函數時，Vue構造函數將直接使用渲染函數渲染DOM樹，當選項對象中沒有render渲染函數時，Vue構造函數首先通過將template模板編譯生成渲染函數，然后再渲染DOM樹，而當Vue選項對象中既沒有render渲染函數，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板，并編譯生成渲染函數。
換言之，在進行DOM樹的渲染時，render渲染函數的優先級最高，template次之且需編譯成渲染函數，而掛載點el屬性對應的元素若存在，則在前兩者均不存在時，其outerHTML才會用于編譯與渲染。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
