Thymeself 基本学习和使用

目录

一、thymyself中 data-th-*和th:*两种写法

二、thymsself 中 ${}、#{}、* {}的使用

1.$符号取上下文中的变量：

2.#符号取thymeleaf工具中的方法、文字消息表达式：

3.　*{...}选择表达式一般跟在th:object后，直接选择object中的属性

4.作用域

三、thymsself 中[[${}]]与[(${})]的区别

四、引入外部js

编写时所引用和借鉴的url

---

一、thymyself中 data-th-*和th:*两种写法

这是它本身的两种写法，不过html5支持data-th-*这种写法，th:*会报警告，但是不影响功能

它们作用在html标签上，

<p data-th-text="">msg</p>

<p th:text="">msg</p>

二、thymsself 中 ${}、#{}、* {}的使用

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>

4.作用域

它们作用在html标签上的data-th-*和th:*属性 以及 thymsself的[[${}]]和[(${})] 表达式上，

<p data-th-text="${msg}">msg</p>

<p th:text="${msg}">msg</p>

var msg1 = [[${msg}]];
var msg2 = [(${msg})];

三、thymsself 中[[${}]]与[(${})]的区别

[[…]]会被转义，[(…)]不会

后台设置Model中msg值为"<strong>hello</strong>"

html标签在[(…)]中展示结果为：hello

html标签在[(…)]中可以直接当html元素展示；

html标签在[[…]]中展示结果为：<strong>hello</strong>

html标签在[[…]]中会被当成字符串。

他们都作用于html页面的任何位置(包括在<script ></script>中)

四、引入外部js <script></script>

<script data-th-src="@{js/app/login.js}"></script>

编写时所引用和借鉴的url

https://blog.csdn.net/jisuanjiguoba/article/details/100552963  Thymeleaf中data-th-*和th:*两种写法说明

https://blog.csdn.net/zhangdongnihao/article/details/103510203 thymeleaf #、* 和$的区别

https://blog.csdn.net/nayi_224/article/details/102794152  thymeleaf中[[${}]]与[(${})]的区别