Introduction 🔥
Vue.JS:
An approachable, performant and versatile framework for building web user interfaces.
It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be the simple or complex.
The two core features of Vue:
-
In UI development, declarative rendering lets you focus on the end result - what the user sees - instead of the specific steps to get there (how to display it). You describe the desired UI layout and data, and the framework handles the behind-the-scenes work of making it appear on the screen. How to works:
Templates: Vue.JS provides a template syntax that allows developers to write HTML-based templates with added directives(prefixed with “v-”) to bind data and manipulate the DOM
Data binding: Vue.Js supports two-way data binding and reactive updates. This means that when the data changes, the UI automatically reflects those changes without manual intervention.
Directives: Vue.JS directives are used to declaratively bind data to the DOM. Example: ‘v-bind’ is used to bind an attribute or a prop to an expression,…etc.
Reactivity: Vue.JS automatically tracks changes to data properties and re-renders the affected parts of the UI accordingly. This reactive system enables efficient and automatic updates to the UI without the need for explicit DOM manipulation.
- You can reference it at here: [1]: https://en.wikipedia.org/wiki/Declarative_programming 👈 👈
-
The Progressive Framework
Vue is a framework and ecosystem that covers most of the common features needed in frontend development. but the web is extremely diverse - the things we build in the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:
Enhancing static HTML without a build step
Embedding as Web Components on any page
Single-Page Application (SPA)
Fullstack / Server-Side Rendering (SSR)
Jamstack / Static Site Generation (SSG)
Targeting desktop, mobile, WebGL, and even the terminal
You can reference document about the progressive framework at here: [2]: https://en.wikipedia.org/wiki/Progressive_web_app 👈 👈
Example
JS
import { createApp, ref } from 'vue' createApp({ setup() { return { count: ref(0) } } }).mount('#app')<div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div>
Single-File Components
In most build-tool-enabled Vue project, we author Vue components using an HTML-like file format called Single-File Component (also known as *.vue files, abbreviated as SFC). A Vue SFC, as the name suggest, encapsulates the component’s login (JavaScript), template (HTML), and styles (CSS) in a single file. Here’s the previous example, written in SFC format:
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
API Styles
Vue components can be authored in two different API styles: Options API and Composition API.
Options API
- With Options API, we define a component’s logic using an object of options such as data, methods and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event handlers in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
Composition API
- With composition API, we define a component’s logic using imported API functions. In SFCs, Composition API is typically used with ’<‘script setup’>’. the setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variable/ functions declared in ’<‘script setup ’>’ are directly useable in the template. This is example below:
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
Both the Options API and the Composition API are different approaches to structuring and organizing logic within Vue.js components. Let’s delve into each:
Options API:
Traditional Approach: The Options API has been the standard method for defining Vue.js components before Vue 3.
Object-based Structure: With the Options API, you define a Vue component by creating an options object that contains properties such as data, methods, computed, watch, props, and lifecycle hooks.
Clear Separation: Each option corresponds to a specific aspect of the component’s behavior or state. For example, data is used for defining reactive data properties, methods for defining component methods, computed for computing derived data, and so on.
Widespread Usage: The Options API is straightforward and widely adopted, making it a common choice for Vue.js developers, especially those familiar with Vue 2.x.
Composition API:
New Feature in Vue 3: The Composition API is a new feature introduced in Vue 3, offering an alternative way to structure Vue.js components.
Function-based Structure: Unlike the Options API, which relies on an options object, the Composition API uses composition functions.
Composable Logic: With the Composition API, you define reactive state, computed properties, methods, and lifecycle hooks using composition functions. These functions can be composed and reused across multiple components.
Flexibility and Reusability: The Composition API provides more flexibility and promotes better organization of code, especially for complex components or when logic needs to be shared across different components.
Scalability: It’s particularly useful for larger applications where managing complex logic becomes a challenge with the Options API.
Both the Options API and the Composition API have their strengths, and the choice between them depends on factors such as the complexity of your application, the familiarity of your team with each approach, and personal preference. Vue.js allows developers to choose the API style that best suits their needs, providing flexibility and versatility in component development.