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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值