Vue.js Introduction to Practical Tutorial

---

This series of tutorials covers Vue's basic syntax, component development, code testing, and how to build a single page application based on Vue+backend API interface. I hope this series of learning can help you quickly start Vue.js development.

Basic Grammar

• Basic Implementation and Code Analysis of Data Binding
• Use Vue.js Devtools as a debugging tool
• Basic use and dynamic adjustment of list rendering
• Example of event listening and asynchronous processing
• Example of using property and class name binding
• Dynamically set attribute values by calculating attributes

Introduction to Components

• Quick Start: Basic Usage and Component Nesting
• Component communication: data transmission and event listening between parent and child components
• Component slots: content distribution and slot scope between parent and child components
• Vue Loader Part I: Initializing Prototype Projects Based on Vue CLI
• Vue Loader (Part 2): Writing a Single File Vue Component
• Write single file Vue component in Laravel project
• Send Ajax request through Axios to obtain interface data rendering component

Component Practice

• Quick start of Laravel component development (I): Writing form components based on Inertia+Vue technology stack
• Quick Start of Laravel Component Development (Part 2): Write form components based on Livewire+Blade technology stack

Here's how to write form components based on the pure Vue framework in Larravel 8:

• Prelude (I): New Features of ES2015
• Prelude (II): Difference between Tailwind and Bootstrap and Introduction
• Quickly develop form components based on Vue+Bootstrap in Larravel
• Object oriented reconstruction of Vue form components through ES6 new syntax
• Share data status between different components through props and Vue prototype instances
• Application of SOLID principle in Vue component development: split a single form component into reusable sub component combinations
• Build list components based on subcomponents and realize view mode switching function
• Formatting model attribute values through Vue filters
• Fast generation of back-end interface test data based on Laravel 8 model factory
• Implementation of article publishing, editing and browsing functions based on Larravel+Vue components
• Write modal box components based on Bootstrap+Vue framework and complete the article deletion function
• Add transition/animation effects for the opening and closing of Vue modal box components
• Realize file asynchronous upload component and article cover image function based on Larravel+Vue
• Implement image drag and drop upload component in Vue framework
• Implement the carousel graph component and set a simple blog layout in Vue based on Flickity

Test driven development

Note: Since TDD mode will be used for development in SPA, the Vue component unit test will be introduced first.

• Introduce Vue test suite+Mocha+jsdom+Expect to test Vue components
• Develop comment component based on TDD mode (I): data binding and list rendering
• Develop backend comment interface in Laravel project based on TDD mode
• Develop comment component based on TDD mode (middle): communication test between parent and child components
• Develop comment component based on TDD mode (Part 2): Axios request backend interface test

Build single page application (SPA)

• Initialize the single page application project skeleton through Vue Router
• Page layout (I): dynamic route navigation based on Vue Router named route
• Page layout (bottom): introduce Tailwind CSS framework to build blog application UI interface
• Laravel backend blog post data related API interface provides
• Return data to render Vue page components and realize paging function through back-end API interface
• Introducing Vuex Store to manage the update and acquisition of Vue component data status
• Implement blog application article publishing function based on Larravel+Vue+Vuex
• Realize user authentication based on Laravel Sanctum+Vuex+Vue route navigation guard

Project assignment: Self implemented user feedback form submission&back-end processing code. The front-end is implemented based on Vue form page components. In addition to basic form verification and database storage, the back-end also implements event monitoring and asynchronous queue processing email sending functions.

More practical projects

• Full stack engineer series practical project

Subscription Service

If you think this series of tutorials is helpful for your study, you can choose to upgrade to Xueyuan subscriber to support Xueyuan:

Upgrade to Xuejun subscriber now