vue与thymeleaf结合使用注意事项

最新推荐文章于 2024-02-15 07:00:00 发布

l1h2l3

最新推荐文章于 2024-02-15 07:00:00 发布

阅读量2.4w

点赞数 10

分类专栏： js

本文链接：https://blog.csdn.net/l1h2l3/article/details/79539322

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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.在script中还需要使用注释标签将脚本代码包围起来，防止在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中获取后端传过来的数据时

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

6.使用thymeleaf必须要有终止符（此问题在thymeleaf3中已经解决）
错误写法

<meta charset="UTF-8">

正确写法

<meta charset="UTF-8" />

7.html代码中，不能使用vue的@click，而应该使用v-on:click

8.vue异常：
Invalid handler for event “click”: got undefined原因为，在methods中没有定义对应方法

l1h2l3

关注

10
点赞
踩
51

收藏

觉得还不错? 一键收藏
2
评论
vue与thymeleaf结合使用注意事项

1.html模板页面中需要加入如下代码 &lt;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"&gt;...
复制链接

扫一扫