vue和thymeleaf相結(jié)合的注意事項(xiàng)詳解
Thymeleaf是一個(gè)現(xiàn)代的服務(wù)器端Java模板引擎，適用于Web和獨(dú)立環(huán)境
能夠處理HTML，XML，JavaScript，CSS甚至純文本。
1.html模板頁(yè)面中
需要加入如下代碼
<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需要增加標(biāo)簽
<script th:inline="javascript">
3.html中獲取數(shù)據(jù)
<input th:value="${order.channelId}" v-model="order.channelId"/>4.在script中還需要使用注釋標(biāo)簽
將腳本代碼包圍起來，防止在js代碼中存在&符號(hào)的時(shí)候報(bào)下面的異常：
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中獲取后端傳過來的數(shù)據(jù)時(shí)
this.order = [[${order}]]6.使用thymeleaf必須要有終止符
（此問題在thymeleaf3中已經(jīng)解決）
- 錯(cuò)誤寫法
<meta charset="UTF-8">
- 正確寫法
<meta charset="UTF-8" />
7.html代碼中
不能使用vue的@click，而應(yīng)該使用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.參考文獻(xiàn)
<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)|"
>二年級(jí)</a></li>th:@click="|getCourses(${grade.id},subjectId,1)|"@click為VUE里綁定的點(diǎn)擊事件，此時(shí)事件存在于thymeleaf的循環(huán)th:each下的元素，getCourses() 為vue里的方法屬于js，但是需要取到模板里產(chǎn)生的值<年級(jí)id>
此時(shí)可以用th:v-on:"| |" 或者th:@click="| | " 簡(jiǎn)單來說就是將前端的方法當(dāng)作字符串拼接起來，前面加th：就能解析${grade.id} 的值
th:v-bind:class="|{current: gradeId==${grade.id}}|"同理，綁定class用于樣式也能如此
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element?plus中el-input框回車觸發(fā)頁(yè)面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁(yè)面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03
vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)
這篇文章主要介紹了vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue的watch選項(xiàng)提供了多種方法來觀測(cè)數(shù)據(jù)屬性的變化,讓我們能夠編寫更加優(yōu)雅和維護(hù)性更高的代碼,本文給大家介紹Vue中watch的多種使用方法小結(jié),感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)JavaScript實(shí)施的安全限制,下面這篇文章主要給大家介紹了關(guān)于Vite代理如何解決跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3使用element-plus組件不顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中實(shí)現(xiàn)動(dòng)畫效果的多種方法小結(jié)
平時(shí)我們能在網(wǎng)頁(yè)上看到很多動(dòng)畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動(dòng)畫效果,讓我們的頁(yè)面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動(dòng)畫效果的多種方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue組件通信方式(父?jìng)髯?、子傳父、兄弟通?，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05