vue和thymeleaf相结合的注意事项

冰冰-ying

已于 2023-03-22 10:59:52 修改

阅读量1.6k

点赞数

文章标签： javascript 前端 html

于 2023-03-13 15:46:10 首次发布

本文链接：https://blog.csdn.net/yingw1/article/details/129495624

版权

Thymeleaf是一个现代的服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本。

1.html模板页面中需要加入如下代码

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

2.script需要增加标签

<script th:inline="javascript">

3.html中获取数据

<input th:value="${order.channelId}" v-model="order.channelId"/>

4.在script中还需要使用注释标签将脚本代码包围起来，防止在js代码中存在&符号的时候报下面的异常：org.xml.sax.SAXParseException: The entity name must immediately follow the ‘&’ in the entity reference.

//<![CDATA[ var vue = new Vue({ el: '#product-list', data: { order: { channelId: '', actCode: '', channelUserId: '', insertUserId: '', sellerId: '', src: '' } }, methods: { created() { this.order = [[${order}]] } }) //]]>

但是在html中可以通过将&改为&的方式修改

5.在javascript中获取后端传过来的数据时

this.order = [[${order}]]

6.使用thymeleaf必须要有终止符（此问题在thymeleaf3中已经解决）

错误写法
<meta charset="UTF-8">
正确写法
<meta charset="UTF-8" />

7.html代码中，不能使用vue的@click，而应该使用v-on:click

8.th传值给vue

<script type="text/javascript" th:inline="javascript">
        var corpType = [[${ corpType }]];
        console.log(corpType);
    </script>

<el-table :data="tableData" key="tableData" max-height="500" border size="small" style="width: 100%"
            header-cell-class-name="table-header-row"  th:v-bind:header-row-style="|getCorpType(${corpType})|">

    getCorpType(corpType){
            console.log(corpType)
            this.corpType=corpType
        },

9.参考文献

<li th:each="grade : ${grades}" th:v-bind:class="|{current: gradeId==${grade.id}}|">
<a th:title="${grade.name}" href="javascript:void(0)"  th:id="${grade.id}"
  th:text="${grade.name}"  th:@click="|getCourses(${grade.id},subjectId,1)|"
  >二年级</a></li>

th:@click="|getCourses(${grade.id},subjectId,1)|"

@click为VUE里绑定的点击事件，此时事件存在于thymeleaf的循环th:each下的元素，getCourses() 为vue里的方法属于js，但是需要取到模板里产生的值<年级id>

此时可以用th:v-on:"| |" 或者th:@click="| | " 简单来说就是将前端的方法当作字符串拼接起来，前面加th：就能解析${grade.id} 的值

th:v-bind:class="|{current: gradeId==${grade.id}}|"

同理，绑定class用于样式也能如此