vue+freemarker中遇到的坑及解决_vue.js_

vue+freemarker遇到的坑

java后端开发者做后台管理系统，用模版技术还是挺方便的，但是如果在页面上对数据进行修改，怎么办呢？

可以用jQuery选中各个dom节点的值，然后组装成后台接口中需要的Form，再用ajax请求后台，这种方式的缺点在于，如果数据字段比较多，需要手动选择很多个dom节点，再取值，想想都可怕。

由于笔者之前做过AngularJS的项目，知道了数据的双向绑定，现在很火的Vue.js也是跟AngularJS差不多，支持双向绑定。但是不想用前后端分离，搞两套部署，主要是对前端部署那些也不熟悉。

那笔者就想在模版页面中引入Vue.js的双向绑定功能，这样就不用再用jQuery去选择dom节点了。

大概思路浏览器请求Controller，返回一个视图，这个视图就是freemarker模版，在模版中引入Vue.js，将页面上需要提交的数据绑定到Vue的对象中的数据上，然后在创建或更新的时候直接用ajax请求把这个Vue对象中的数据传给后端。

在这个过程中遇到了几个坑

1.通过jquery修改vue绑定的model值(v-model)，vue取不到这个值。

如freemarker模版中有，在用户上传图片后，通过jquery更改img的src属性为图片地址之后，通过vue的对象中的data中的pic_url是取不到这个值的。

查了网上说，vue一般都只监听用户在页面上的操作事件，jquery修改的事件不能够被vue监听到，可以在jquery修改后dispatch一个event给vue监听，笔者为了省事，在vue对象中methods中的方法中，把需要用jquery改变的地方，还是用jquery取到之后再赋值给vue对象中的数据属性上。

2.freemarker模版片段中引用了，在script中有new Vue的操作，结果到浏览器页面报错：

templates should only be responsible for mapping the state to the ui. avoid placing tags with side-effects in your templates, such as