#、* 和$的區別
1.$符號取上下文中的變量：<input type="text" name="userName" th:value="${user.name}">
2.#符號取thymeleaf工具中的方法、文字消息表達式：<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
3.*{...}選擇表達式一般跟在th:object後，直接選擇object中的屬性
<div th:object="${session.user}"><p th:text="*{name}"/><div>
內聯表達式
定義
[[…]]之間的表達式在Thymeleaf被認爲是內聯表達式,
在其中可以使用任何類型的表達式,爲了讓內聯工作,我們必須激活它使用th:inline 屬性，此屬性有三種值（text , javascript and none）。
內聯文本
雖然通過 Thymeleaf 標準中的標籤屬性已經幾乎滿了開發中的所有需求，但是有些情況下更喜歡將表達式直接寫到 HTML 本中：
例如有時候這樣更合適：<p>Hello, [[${session.user.name}]]</p>
不喜歡這樣寫代碼：<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
[[...]] 或 [(...)] 中的表達式就是 Thymeleaf 中內聯表達式，任何在 th:text 或 th:utext 屬性中使⽤的表達式都可以出現在 [[]] 或 [()] 中使用，
[[...]] 等價於 th:text（結果將被 HTML 轉義），[(...)] 等價於 th:utext（結果不會執⾏HTML轉義）。
例如：
<body>
<!--後臺傳出：model.addAttribute("info", "Love you <b>中國</b>");-->
<!--/*前者會轉義，後者不會轉義*/-->
<p>[[${info}]]</p> 輸出：Love you <b>中國</b>
<p>[(${info})]</p> 輸出：Love you 中國
<!--/*可以是任意的數據類型，如普通的文本，與 th:text、th:utext完全等價*/-->
<p>[[Love]]</p> 輸出：Love
<p>[['I Love You Baby']]</p> 輸出：I Love You Baby
<p>[(9527)]</p> 輸出：9527
</body>
內聯 JavaScript
1.基本使用
作用：在js中給變量賦值。
th:inline="javascript"表示能在js中使用[ [] ]取值。只有加入th:inline="javascript"在js代碼中才能使用[ [...] ]
<head lang="en">
<meta charset="UTF-8">
<title>用戶首頁</title>
<script type="text/javascript" th:inline="javascript">
/**
* 後臺輸出：
* model.addAttribute("info", "Love you <b>中國</b>");
* model.addAttribute("age", 35);//注意：使用 [(${info})] 時編譯報錯，瀏覽器運行也會報錯
* model.addAttribute("id", null);
* model.addAttribute("name", "");
* @type {*[]}
*/
var info = [[${info}]];
var age = [[${age}]];
var id = [[${id}]];
var name = [[${name}]];
console.log(id, name, age, info);
</script>
</head>
特別提示：th:inline ="javascript" 顯式啓用JavaScript 模板模式只能是在 Html 文件內部的 JavaScript 代碼，如上所示。不能在引入的外部 JavaScript 文件中進行操作。
2.前後端分離
Thymeleaf 的目標就是希望前後端分離，即同一個 Html 文件前端人員以靜態原型的方式打開時，看到的是它們的內容，而後端人員通過服務器打開時，看到的是動態的數據。內聯的 JavaScript 同樣可以實現這一點。在 JavaScript 註釋中包含（轉義）內聯表達式即可滿足此需求。
<script type="text/javascript" th:inline="javascript">
/**
* 後臺輸出：model.addAttribute("info", "Love you <b>中國</b>");
* Thymeleaf 將自動忽略掉註釋之後 和 分號之前的所有內容,如下爲 "前端測試"
*/
var info = /*[[${info}]]*/ "前端測試";
console.log(info);
</script>
3.內聯表達式JS序列化
關於 JavaScript 內聯表達式的計算結果不限於字符串，它能將以下對象序列化爲 javascript 對象。 Thymeleaf 支持以下幾種序列化對象：
1）Strings
2）Numbers
3）Booleans
4）Arrays
5）Collections
6）Maps
7）Beans (有getter _and _setter⽅法)
<script type="text/javascript" th:inline="javascript">
/**
* 後臺輸出：model.addAttribute("userList", userList);
* userList 是一個 List<User> 的結構，其中有5個元素
*/
var userList = [[${userList}]];
/**已經被 Thymeleaf 序列化爲 JS 對象，是一個數組加Object 的個數，即數組中有5個Object*/
console.log("userList", userList);
for (let i = 0; i < userList.length; i++) {
/**取值打印*/
console.log(i, userList[i], userList[i].uName);
}
</script>
內聯 CSS
Thymeleaf 還允許在 CSS <style> 標籤中內聯，如：
<head lang="en">
<meta charset="UTF-8">
<title>用戶首頁</title>
<link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}">
<!--/*爲了測試簡單，直接使用 th:with 定義兩個局部變量；也可以後臺傳輸來的*/-->
<style type="text/css" th:inline="css" th:with="h4Color='yellow',fontSize='25px'">
p {
color:/*[[${h4Color}]]*/ red;
font-size: [(${fontSize}) ];
}
</style>
</head>