Меры предосторожности при комбинировании vue и тимелеафа

Thymeleaf — это современный механизм шаблонов Java на стороне сервера для веб-сайтов и автономных сред, способный обрабатывать 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. В скрипте также необходимо использовать теги комментариев, чтобы окружить код скрипта, чтобы предотвратить сообщение о следующем исключении, когда в коде js есть символ &: org.xml.sax.SAXParseException: имя объекта должно следовать сразу за '&' в ссылке на объект.

//<![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. При использовании тимелеафа должен быть терминатор (эта проблема решена в тимелеафе3)

错误写法
<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)"  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. В настоящее время событие существует в элементе под циклом th:each of thymeleaf.getCourses() — это метод в Vue, который принадлежит js, но ему необходимо получить значение, сгенерированное в шаблоне <grade id>

В настоящее время вы можете использовать th:v-on:"| |" или th:@click="| | ". Проще говоря, это означает объединение внешнего метода в виде строки и добавление th: впереди для анализа значения ${grade.id}

th:v-bind:class="|{текущий:gradeId==${grade.id}}|"

Точно так же можно сделать и привязку классов к стилям

Меры предосторожности при комбинировании vue и тимелеафа

Guess you like