Scribd
Upload
17 views29 pages

Learn Vue JS at A Glance

Vue.js is a popular front-end JavaScript framework that simplifies UI development with reusable components and efficient data binding. It features a small learning curve, can be easily integrated with other libraries, and has a large community. The document covers various aspects of Vue.js, including component creation, template syntax, reactivity, and integration with Laravel.

Uploaded by

ohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views29 pages

Learn Vue JS at A Glance

Vue.js is a popular front-end JavaScript framework that simplifies UI development with reusable components and efficient data binding. It features a small learning curve, can be easily integrated with other libraries, and has a large community. The document covers various aspects of Vue.js, including component creation, template syntax, reactivity, and integration with Laravel.

Uploaded by

ohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

MEET VUE JS

Popular JavaScript front-end framework.

Simplifies UI development with reusable components

Efficient data binding for fast and responsive updates.

Small learning curve and can be easily integrated with other libraries.

Large and active community of users and contributors.


CREATE NEW PROJECT

npm init vue@latest

npm create vite@latest


Vue Component
Script Setup
When using variables, function declarations, and imports
When working with reactive state
For importing component, dynamic component
And many more, we will discover through our learning

Style Scoped
When a <style> tag has the scoped attribute, its CSS will
apply to elements of the current component only.

Template
The <template> tag is used as a placeholder when we want
to use a built-in directive without rendering an element in
the DOM
WAYS TO COMPOSE COMPONENTS

Option API Composition API Script Setup


Component Tree Concept
MAKE ONE PAGE TEMPLATE
Using bootstrap
TEMPLATE SYNTAX

Text Interpolation
The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces)
TEMPLATE SYNTAX
Raw HTML
The double mustaches interpret the data as plain text, not HTML. In order to output real HTML, you will
need to use the v-html directive
TEMPLATE SYNTAX
Attribute Bindings
Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive
TEMPLATE SYNTAX
Binding Multiple Attributes
TEMPLATE SYNTAX
Using JavaScript Expressions
Inside text interpolations (mustaches)
In the attribute value of any Vue directives (special attributes that start with v-)
V-TEXT DIRECTIVES
Update the element's text content.
V-HTML DIRECTIVES
Update the element's innerHTML
V-SHOW DIRECTIVES
Toggle the element's visibility based on the truthy-ness of the expression value.
V-IF DIRECTIVES
Conditionally render an element or
a template fragment based on the
truthy-ness of the expression
value.
V-FOR DIRECTIVES
Render the element or template block multiple times based on the source data.
V-ON SHORTHAND @ DIRECTIVES
Attach an event listener to the element.
V-ON SHORTHAND @ DIRECTIVES
Attach an event listener to the element.
V-ON SHORTHAND @ DIRECTIVES
Attach an event listener to the element.
PROPS PASSING
Passing properties from component to
component
REACTIVE( ) TO
DECLARE STATE
Reactivity refers to the application’s ability to update its
user interface automatically when it's underlying data
changed.
The reactive() function is a powerful tool for creating
reactive components.
Reactive() function can only work with objects. Can’t use
it with primitives like strings or numbers
To handle this limitation, Vue provides a second function
for declaring reactive state in applications, ref()
REF( ) TO DECLARE
STATE
The ref() function can hold any value type,
including primitives and objects. Therefore, we
use it in a similar way to the reactive() function
REF() VS REACTIVE() WHICH SHOULD YOU USE
The significant difference between ref() and reactive() is that the ref() function allows us to declare reactive state for
primitives and objects, while reactive() only declares reactive state for objects.
Therefore, in real-world scenarios, you’ll find more Vue code that uses ref() than reactive()

THE DOWNSIDES OF REF():


It can be inconvenient to always have to use .value to access your state.
You might not know if it has been initialized, and calling .value on null could throw a runtime error.

THE DOWNSIDES OF REACTIVE():


Using reactive is that it cannot be used on primitives.
You can only use reactive() on objects and object-based types like Map and Set

MIXING REF() AND REACTIVE()


There’s no rule or convention against mixing ref() and reactive()
they can be used together without any technical drawbacks
CLASS AND STYLE BINDINGS
use v-bind
CLASS AND STYLE BINDINGS
use v-bind
CLASS AND STYLE BINDINGS
use v-bind
WHY LARAVEL WITH VUE
Easy integration
Vue.js seamlessly integrates with Laravel, allowing developers to easily build dynamic
user interfaces.

Reactive components
Vue.js uses reactive components, which means that the UI is automatically updated
when the data changes.

Lightweight
Vue.js is a lightweight framework, which means that it doesn't add a lot of overhead
to your application.
INTIGRATION
Integration Via Laravel Intertia
Vue.js seamlessly integrates with Laravel, allowing developers to easily build dynamic user interfaces.

You might also like