邮箱或企业邮箱,seo网站的锚文本怎么写,计算机毕业设计代做网站,建设小辣猫的网站目录 关于djangovue的结合使用一、在你的templates中引入vue.js二、关于vue与django模板变量的冲突问题三、示例结语 关于djangovue的结合使用
网上的相关教程基本上都是部署node.js,npm安装vue#xff0c;生成vue项目#xff0c;然后将vue项目部署至django#xff0c;这些… 目录 关于djangovue的结合使用一、在你的templates中引入vue.js二、关于vue与django模板变量的冲突问题三、示例结语 关于djangovue的结合使用
网上的相关教程基本上都是部署node.js,npm安装vue生成vue项目然后将vue项目部署至django这些教程基本都建立在一个前提下即前后端分离关于前后端分离相关知识请自行搜索了解简单来说就是对django服务器的请求django的视图函数只返回json格式的字符串数据这时候为了避免歧义可以新建一个api.py代替原本views.py的导入。
然而我们在学习django的时候通常都是viewstemplates的模式很遗憾这是典型的前后端不分离的模式当你想实现一些前端框架能够简单实现的炫酷效果时你不可避免的想在你的前端页面设计中引入vue框架。因此这篇教程将会告诉你如何方便快捷的直接在html中引用vue而不是重构为前后端分离的模式去部署。当然前后端分离是大势所趋。
一、在你的templates中引入vue.js
目前最新的vue版本是vue3在vue3中你是找不到vue.js的取而代之的是vue.global.min.js文件 在你的模板文件中一般是base_generic.html文件中进行cdn的外部引用这里建议将最新版本的jquery一起引用。
script srchttps://code.jquery.com/jquery-3.7.1.slim.min.js integritysha256-kmHvs0BOpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8 crossoriginanonymous/script
script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js/script二、关于vue与django模板变量的冲突问题
vue框架对于变量的读取默认是{{}}django模板变量同样是这个所以会产生冲突所以最简单的方法就是改变vue框架的模板变量引用方式在createApp函数中加入 compilerOptions: { delimiters: [${, }] }
三、示例
vue函数记得包含在文档加载完成的事件监听函数内。
div idapp
${ vuemessage }
/div
script srchttps://code.jquery.com/jquery-3.7.1.slim.min.js integritysha256-kmHvs0BOpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8 crossoriginanonymous/script
script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js/script
script
//veujs代码
document.addEventListener(DOMContentLoaded, function() {const { createApp, ref } Vue;if (typeof Vue ! undefined) {createApp({compilerOptions: {delimiters: [${, }]},data() {return vuemessage}}).mount(#app);}});
/script结语
这样djangovue的混用就搞定了但是还是建议去学习以下前后端分离的使用django是有专门的前后端分离的支持的。
