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-extras-springsecurity3">2.script需要增加
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中没有定义对应方法
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)