数据工厂平台-番外：vue和django的冲突问题

最近有很多同学反馈说第四节 没跟住， 页面显示的并不是：

而是：

博主帮忙一个一个的解决排查问题后，发现这个问题的原因似乎好多人都不清楚。

首先说下引起上述bug的原因：

• script里的delimiters没写对，写成了delimters等 错误版本。
• script里delimiters的值没写对，把 ["[[","]]"] 写成了 [" [[","]] "] 注意这里被误加了空格，或者标点错误。
• 没有通过127.0.0.1:8000/home进入页面，而是通过

直接打开了html在浏览器。

好，原因基本就上述的三种，这里我说下 为什么要这么写：

在我学习vue的文档的时候，都是用一个页面单独去学习，没有在django项目中，所有文档都成功跟下来了，很顺利。但是后来我放入到django中的时候，发现了一个问题：

就是这样的写法

会导致，标签元素的text 不能显示。对于这个超链接来说，

就是{{ i.link_name }}是一片空白，显示不出来，而href也不正常。

后来我搜索一番得知:

django和vue 在这个上面有个小冲突， 就是在标签中级夹着的{{ }} 会冲突，会被django误以为是要从后台直接获取数据，而不是从下面的vue的bom中拿数据，所以搜索得知，需要加入delimiters ，来给这种被夹的{{ }}变量 换个形式，我选择的就是 [[ ]] 来代替。

所以之后

这样就可以在django 的url路径下 正常显示了。但是此时 无法通过直接在浏览器打开网页方法显示了。

但是没关系，反正我们正常就是通过url: home路由进入的。用户也不会直接在浏览器打开该网页，只能通过 正常的 /home/ 然后关联到home()函数，然后靠返回的render的方法的 home.html 参数 来打开网页。

从这里我们也可以发现 其实大部分测试对vue 也只是听说过好用，也知道它比较流行，但是确实没有特别实战的经验，所以我们放缓节奏，一步一个脚印的走，不要想着一开始就搞太大的架构。

就连官网文档 的开头都说：

所以大家还是安心一点一点随着博主一起学习vue吧，毕竟以后用起来越爽的东西，一开始越觉得难理解， 就像mac一样。

现在我们写成这样：

然后页面是如下：

但是你以为这就正常了么？

先打开console看看效果：

vue给你报了个错，意思是说用 :属性 来代替属性，注意冒号。

这是什么意思呢？然后你点击一下超链接 看看：

发现并没有成功跳转

这又要怎么解决呢？

欢迎 观看下节 第五章：vue的动态数据绑定