快捷導(dǎo)航

vue和thymeleaf相結(jié)合的注意事項(xiàng)詳解

更新時(shí)間：2023年11月01日 09:58:01 作者：冰冰-ying

這篇文章主要介紹了vue和thymeleaf相結(jié)合的注意事項(xiàng)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)簽

將腳本代碼包圍起來(lái)，防止在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中可以通過(guò)將&改為&的方式修改

5.在javascript中獲取后端傳過(guò)來(lái)的數(shù)據(jù)時(shí)

this.order = [[${order}]]

6.使用thymeleaf必須要有終止符

（此問(wèn)題在thymeleaf3中已經(jīng)解決）

錯(cuò)誤寫(xiě)法

<meta charset="UTF-8">

正確寫(xiě)法

<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)單來(lái)說(shuō)就是將前端的方法當(dāng)作字符串拼接起來(lái)，前面加th：就能解析${grade.id} 的值

th:v-bind:class="|{current: gradeId==${grade.id}}|"

同理，綁定class用于樣式也能如此

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項(xiàng)目中使用vue來(lái)進(jìn)行前端項(xiàng)目的開(kāi)發(fā)，但我們都知道Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。也無(wú)法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來(lái)實(shí)現(xiàn)的
2022-11-11
vue3響應(yīng)式Proxy與Reflect的理解及基本使用實(shí)例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Proxy與Reflect的理解及基本使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue加載組件、動(dòng)態(tài)加載組件的幾種方式
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章通過(guò)實(shí)例代碼給大家介紹了Vue加載組件、動(dòng)態(tài)加載組件的幾種方式，需要的朋友參考下吧
2018-08-08
vue中this.$emit使用方法的實(shí)際案例
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決
這篇文章主要介紹了Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue中的watch是什么以及watch和computed的區(qū)別
這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue使用Axios庫(kù)請(qǐng)求數(shù)據(jù)時(shí)跨域問(wèn)題的解決方法詳解
在 VUE 項(xiàng)目開(kāi)發(fā)時(shí),遇到個(gè)問(wèn)題,正常設(shè)置使用 Axios 庫(kù)請(qǐng)求數(shù)據(jù)時(shí),報(bào)錯(cuò)提示跨域問(wèn)題,那在生產(chǎn)壞境下,該去怎么解決呢？下面小編就來(lái)和大家詳細(xì)講講
2024-01-01
Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項(xiàng)目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來(lái)實(shí)現(xiàn)的,需要的朋友可以參考下
2021-06-06
vue2.0+elementui實(shí)現(xiàn)一個(gè)上門(mén)取件時(shí)間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實(shí)現(xiàn)一個(gè)上門(mén)取件時(shí)間組件的相關(guān)資料,用于預(yù)約上門(mén)服務(wù)時(shí)間看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫(xiě)了一個(gè)簡(jiǎn)單的,需要的朋友可以參考下
2024-02-02