Using vue under django template (the front and back ends are not separated)
Catalog
- About the combination of Django and vue
-
- Introduce vue. JS in your templates.
- Conflict between vue and Django template variables
- III. Examples
- Conclusion
About the combination of Django and vue
Online tutorials are basically the deployment of node. JS, NPM install vue, generate the vue project, and then deploy the vue project to Django. These tutorials are basically based on a premise, that is, the separation of front and back ends. Please search for the relevant knowledge of the separation of front and back ends. Simply speaking, it is the request to the Django server. The view function of Django only returns string data in JSON format. At this time, in order to avoid ambiguity, you can create a new API. Py instead of importing the original views. Py.
However, when we learn Django, we usually use the pattern of views + templates. Unfortunately, this is a typical pattern that does not separate the front and back ends. When you want to achieve some cool effects that the front-end framework can simply achieve, you inevitably want to introduce the vue framework into your front-end page design. Therefore, this tutorial will show you how to easily and quickly reference vue directly in HTML, rather than refactoring to deploy it in a separate front-end and back-end mode. Of course, the separation of front and back ends is the trend of the times.
Introduce vue. JS in your templates.
At present, the latest vue version is vue3. In vue3, you cannot find the vue. JS. Instead, the vue. Global. Min. JS file is in your template file. Generally, it is the external reference of CDN in the base \ _ generic. HTML file. It is recommended to reference the latest version of jquery together.
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
Conflict between vue and Django template variables
The vue framework reads variables by default {{}}, and the Django template variable is the same, so there will be conflicts. Therefore, the simplest way is to change the template variable reference method of the vue framework and add it to the createApp function.
III. Examples
Remember that the vue function is included in the event listener function for document load completion.
<div id="app">
{ vuemessage }
</div>
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
<script> //veujscode
document.addEventListener('DOMContentLoaded', function() {
const { createApp, ref } = Vue;
if (typeof Vue !== 'undefined') {
createApp({
compilerOptions: {
delimiters: ['{', '}']
},
data() {
return vuemessage
}
}).mount('#app');
}
}); </script>
Conclusion
In this way, the mixing of Django + vue is done, but it is recommended to learn the use of the following front-end and back-end separation, Django has special support for front-end and back-end separation.
