vue和thymeleaf相结合的注意事项详解
作者:冰冰-ying
这篇文章主要介绍了vue和thymeleaf相结合的注意事项详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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)" 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用于样式也能如此
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。