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需要增加标签 
<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中可以通过将&改为&amp;的方式修改

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

猜你喜欢

转载自blog.csdn.net/caijunfen/article/details/81948303