This Django Vue Tutorial uses as an example a very simple TODO app, that we'll build with Django and Vue.js on front-end, where AJAX requests are performed with Axios.js library. Also I'm using Bootstrap to keep the UI clean.
This video is mostly Vue.js tutorial than Django.
Follow me @:
Telegram: https://t.me/red_eyed_coder_club
Twitter: https://twitter.com/CoderEyed
Facebook: https://fb.me/redeyedcoderclub
============================
📎️ The source code is available via Patreon:
https://www.patreon.com/posts/django-3-todo-js-36737726
=============================
Timecodes:
00:00 - Demo of the project.
00:49 - Creating a new Django project, attaching Vue.js, Axios.js
04:48 - Creating a basic HTML layout of the base template
09:40 - Creating a main HTML layout of the project with Bootstrap
14:23 - Creating a Vue.js object, and using of the VERBATIM Django tag
17:21 - Using of data reactivity in Vue.js, v-model directive
20:36 - Explanation of the main logic of interaction between Vue and Django
21:10 - Creating a Django model (Task), and using of Django forms for data validation
23:56 - Getting all tasks from a database and returning to Vue (backend). JsonResponse()
26:34 - Creating a new task (backend)
29:20 - Getting all tasks from Django, and displaying to a user. Creating a new task (Vue, frontend). Sending requests from Vue to Django with Axios.js
44:51 - Changing the state of task (updating in CRUD) to completed (Vue frontend side)
49:48 - Updating the state of task (Django, backend side)
51:55 - Adding a css styles to task objects with :class attribute (Vue)
55:57 - Deleting tasks (Vue, frontend side)
58:34 - Deleting tasks (Django, backend side)
➥ Please ➥ Like ➥ Comment ➥ Subscribe
✴️✴️✴️ Web Scraping course ✴️✴️✴️
is available via Patreon here:
https://www.patreon.com/red_eyed_coder_club
or its landing:
https://red-eyed-coder-club.github.io/courses/practical-python-web-scraping
The Django explanations are available in the Django 3 Blog Engine Tutorial
/watch/wtjZYvwIzgro9z6YSDgqbbqIbfXUIm4eLP=tsil&E_D91o8LaeWLZ
In this video:
- How to use Vue.js with Django.
- Vue.js directives (v-model, v-for etc.)
- Event listeners and handlers
- How to manipulate with a tag's CSS classes with Vue.js (:class directive)
- How to serialize Django Models to JSON-serializable object
- How to get CSRF_TOKEN from cookies with Axios.js
- How to pass CSRF_TOKEN into the Django view via a request's header.
etc.
Links:
https://getbootstrap.com/https://cdnjs.com/libraries/vuehttps://cdnjs.com/libraries/axios
➥➥➥ SUBSCRIBE FOR MORE VIDEOS ➥➥➥
Never miss a new video.
Subscribe ⇢ /channel/UCh_LSaTv2GeZ3woJNTGihew