vue和thymeleaf相結(jié)合的注意事項詳解
Thymeleaf是一個現(xiàn)代的服務(wù)器端Java模板引擎，適用于Web和獨立環(huán)境
能夠處理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需要增加標(biāo)簽
<script th:inline="javascript">
3.html中獲取數(shù)據(jù)
<input th:value="${order.channelId}" v-model="order.channelId"/>4.在script中還需要使用注釋標(biāo)簽
將腳本代碼包圍起來，防止在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中獲取后端傳過來的數(shù)據(jù)時
this.order = [[${order}]]6.使用thymeleaf必須要有終止符
（此問題在thymeleaf3中已經(jīng)解決）
- 錯誤寫法
<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)|"
>二年級</a></li>th:@click="|getCourses(${grade.id},subjectId,1)|"@click為VUE里綁定的點擊事件，此時事件存在于thymeleaf的循環(huán)th:each下的元素，getCourses() 為vue里的方法屬于js，但是需要取到模板里產(chǎn)生的值<年級id>
此時可以用th:v-on:"| |" 或者th:@click="| | " 簡單來說就是將前端的方法當(dāng)作字符串拼接起來，前面加th：就能解析${grade.id} 的值
th:v-bind:class="|{current: gradeId==${grade.id}}|"同理，綁定class用于樣式也能如此
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項目中使用vue來進(jìn)行前端項目的開發(fā)，但我們都知道Vue實際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。也無法獲得JQuery這樣的js框架對元素值的修改的。而日期控件daterangepicker又基于JQuery來實現(xiàn)的2022-11-11
vue3響應(yīng)式Proxy與Reflect的理解及基本使用實例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Proxy與Reflect的理解及基本使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
組件是Vue.js最強大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章通過實例代碼給大家介紹了Vue加載組件、動態(tài)加載組件的幾種方式，需要的朋友參考下吧2018-08-08
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue項目打包到服務(wù)器后請求接口報錯404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中的watch是什么以及watch和computed的區(qū)別
這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue使用Axios庫請求數(shù)據(jù)時跨域問題的解決方法詳解
在 VUE 項目開發(fā)時,遇到個問題,正常設(shè)置使用 Axios 庫請求數(shù)據(jù)時,報錯提示跨域問題,那在生產(chǎn)壞境下,該去怎么解決呢？下面小編就來和大家詳細(xì)講講2024-01-01
Vue實現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來實現(xiàn)的,需要的朋友可以參考下2021-06-06
vue2.0+elementui實現(xiàn)一個上門取件時間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實現(xiàn)一個上門取件時間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下2024-02-02