vue和thymeleaf相结合的注意事项详解

更新时间：2023年11月01日 09:58:01 作者：冰冰-ying

这篇文章主要介绍了vue和thymeleaf相结合的注意事项详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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)" rel="external nofollow"   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用于样式也能如此

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Element plus中el-input框回车触发页面刷新问题以及解决办法
在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下
2024-03-03
vue $set 给数据赋值的实例
今天小编就为大家分享一篇vue $set 给数据赋值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue中对象数组去重的实现
这篇文章主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
Vue中watch的多种使用方法小结
Vue的watch选项提供了多种方法来观测数据属性的变化,让我们能够编写更加优雅和维护性更高的代码,本文给大家介绍Vue中watch的多种使用方法小结,感兴趣的朋友一起看看吧
2023-10-10
如何解决vue项目打包后文件过大问题
这篇文章主要介绍了如何解决vue项目打包后文件过大问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue-Cli如何在index.html中进行环境判断
这篇文章主要介绍了Vue-Cli如何在index.html中进行环境判断问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vite代理如何解决跨域问题详解
跨域是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制,下面这篇文章主要给大家介绍了关于Vite代理如何解决跨域问题的相关资料,需要的朋友可以参考下
2023-03-03
Vue3使用element-plus组件不显示问题
这篇文章主要介绍了Vue3使用element-plus组件不显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue中实现动画效果的多种方法小结
平时我们能在网页上看到很多动画效果,这些效果看起来就很引人注目,我们是不是也可以在自己的项目中添加一些动画效果,让我们的页面看起来更加的高端大气上档次,博人眼球,所以本文给大家介绍了Vue中实现动画效果的多种方法,需要的朋友可以参考下
2024-07-07
Vue组件通信方式(父传子、子传父、兄弟通信)
这篇文章主要介绍了Vue组件通信方式(父传子、子传父、兄弟通信)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05