欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年11月01日 09:58:01   作者：冰冰-ying  
這篇文章主要介紹了vue和thymeleaf相結(jié)合的注意事項(xiàng)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)文章

最新評(píng)論