Vue.js踩坑之语法冲突

事情是这样的。

今天打算练一练通过vue用ajax请求json文件。拿到数据后在前台渲染到页面上。

说干就干。

本地建一个文件夹，建好目录，引入文件，准备就绪之后，发现没办法成功请求到json文件，原因是ajax请求不支持file协议，只支持http或者https或者其他的一两个协议。那自己在本地起一个服务器吧。

说干就干。

新建一个项目，npm install --save express    安装express

npm install --save swig    安装模板引擎

由于只是简单的练一练用ajax请求json文件，安装这两个模块就已经能满足需求了。于是安装完成并且配置好后，开始正式撸起袖子开干。

然后，我就踩到了一个大坑上。一个让我从12点45一直踩到17点15的坑。

这个大坑就是：vue默认的前台渲染语法是{{}}，而我用的swig模板引擎的渲染语法也是{{}}，

所以我在前台页面是无法通过{{}}语法渲染数据的。

中间有好几次我都怀疑是语法冲突问题。但是不太确定自己的逻辑写的是不是百分之百正确，于是就一直在排查逻辑写的有没有问题。一直到百分之二百确定逻辑没问题了，才决定把vue的默认前台渲染语法给改成别的试试。

于是用delimiters: ['${','}']这句代码把语法从{{}}改成了${}。

ctrl+s保存，画面切到浏览器，刷新，bingo，数据渲染出来了。问题解决。

这就是我今天踩的坑，原来困扰了我一下午的是这样一个小问题。

貌似编程就是这样，不停的踩坑，踩了坑，把坑填上，才能进步。踩大坑，进大步，踩小坑，进小步。等你把大大小小的坑踩的差不多了，你的技术也就完善的差不多了。

就这样。

加油！