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