最近有很多同学反馈说第四节 没跟住, 页面显示的并不是:
而是:
博主帮忙一个一个的解决排查问题后,发现这个问题的原因似乎好多人都不清楚。
首先说下引起上述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的动态数据绑定