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

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

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

微信图片_20220706100609.png

而是:

微信图片_20220706100617.png

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

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

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

直接打开了html在浏览器。好,原因基本就上述的三种,这里我说下 为什么要这么写:



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


就是这样的写法

微信图片_20220706100651.png

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

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

后来我搜索一番得知:


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


所以之后

微信图片_20220706100643.png

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

微信图片_20220706100706.png微信图片_20220706100714.png

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


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


就连官网文档 的开头都说:微信图片_20220706100720.png

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

现在我们写成这样:

微信图片_20220706100728.png

然后页面是如下:

微信图片_20220706100734.png

但是你以为这就正常了么?先打开console看看效果:

微信图片_20220706100741.png

vue给你报了个错,意思是说用 :属性 来代替属性,注意冒号。这是什么意思呢?然后你点击一下超链接 看看:

微信图片_20220706100748.png

发现并没有成功跳转这又要怎么解决呢?欢迎 观看下节 第五章:vue的动态数据绑定

相关文章
|
3月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
180 64
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
3月前
|
SQL 监控 数据库
深入探索Django ORM:高效数据操作的秘诀与实践####
在当今的Web开发领域,提升数据访问层的效率是优化应用性能的关键。本文旨在通过剖析Django框架中的ORM(对象关系映射)机制,揭示其如何简化数据库交互,并探讨一系列高级技巧与策略,帮助开发者构建更高效、可维护的数据访问代码。我们不涉及安装步骤或基础概念,而是聚焦于实战经验分享,旨在为中高级开发者提供深度洞见。 ####
|
3月前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
81 1
|
3月前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
88 1
|
4月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
84 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
4月前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
39 3
|
4月前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
61 2
|
4月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
107 4

热门文章

最新文章