vue.js python django模板下，vue的使用（前后端不分离）

目录

关于django+vue的结合使用一、在你的templates中引入vue.js二、关于vue与django模板变量的冲突问题三、示例结语

关于django+vue的结合使用

网上的相关教程基本上都是部署node.js,npm安装vue，生成vue项目，然后将vue项目部署至django，这些教程基本都建立在一个前提下，即前后端分离，关于前后端分离相关知识请自行搜索了解，简单来说就是对django服务器的请求，django的视图函数只返回json格式的字符串数据，这时候为了避免歧义，可以新建一个api.py代替原本views.py的导入。

然而我们在学习django的时候，通常都是views+templates的模式，很遗憾这是典型的前后端不分离的模式，当你想实现一些前端框架能够简单实现的炫酷效果时，你不可避免的想在你的前端页面设计中引入vue框架。因此，这篇教程将会告诉你如何方便快捷的直接在html中引用vue，而不是重构为前后端分离的模式去部署。当然前后端分离是大势所趋。

一、在你的templates中引入vue.js

目前最新的vue版本是vue3，在vue3中你是找不到vue.js的，取而代之的是vue.global.min.js文件 在你的模板文件中，一般是base_generic.html文件中进行cdn的外部引用，这里建议将最新版本的jquery一起引用。

二、关于vue与django模板变量的冲突问题

vue框架对于变量的读取默认是{{}}，django模板变量同样是这个，所以会产生冲突，所以最简单的方法就是改变vue框架的模板变量引用方式，在createApp函数中加入 compilerOptions: { delimiters: ['${', '}'] }

三、示例

vue函数记得包含在文档加载完成的事件监听函数内。

结语

这样django+vue的混用就搞定了，但是还是建议去学习以下前后端分离的使用，django是有专门的前后端分离的支持的。

相关阅读

 您阅读本篇文章共花了：