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用于样式也能如此

总结

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

您可能感兴趣的文章:

Vue封装DateRangePicker组件流程详细介绍
在后端管理项目中使用vue来进行前端项目的开发，但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的
2022-11-11
vue3响应式Proxy与Reflect的理解及基本使用实例详解
这篇文章主要为大家介绍了vue3响应式Proxy与Reflect的理解及基本使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue恢复初始数据this.$data,this.$options.data()解析
这篇文章主要介绍了vue恢复初始数据this.$data，this.$options.data()解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue加载组件、动态加载组件的几种方式
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式，需要的朋友参考下吧
2018-08-08
vue中this.$emit使用方法的实际案例
this.$emit()的作用大家应该也都知道,主要用于子组件像父组件传值,这篇文章主要给大家介绍了关于vue中this.$emit使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue项目打包到服务器后请求接口报错404的解决
这篇文章主要介绍了Vue项目打包到服务器后请求接口报错404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue中的watch是什么以及watch和computed的区别
这篇文章主要介绍了Vue中的watch是什么以及watch和computed的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue使用Axios库请求数据时跨域问题的解决方法详解
在 VUE 项目开发时,遇到个问题,正常设置使用 Axios 库请求数据时,报错提示跨域问题,那在生产坏境下,该去怎么解决呢？下面小编就来和大家详细讲讲
2024-01-01
Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）
项目要求需要预览pdf文件,网上找了很久，发现pdf.js的效果,这篇文章主要给大家介绍了关于Vue实现在线预览pdf文件功能,主要利用pdf.js/iframe/embed来实现的,需要的朋友可以参考下
2021-06-06
vue2.0+elementui实现一个上门取件时间组件
这篇文章主要给大家介绍了关于vue2.0+elementui实现一个上门取件时间组件的相关资料,用于预约上门服务时间看到网上有很多乱七八糟的代码,看着头疼,于是自己写了一个简单的,需要的朋友可以参考下
2024-02-02