vue与thymeleaf结合使用注意事项

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-

l1h2l3

25018人浏览 · 2018-03-13 13:35:06

l1h2l3 · 2018-03-13 13:35:06 发布

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中没有定义对应方法

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^