Merge pull request #1920 from sivaprasath2004/sivaprasath-closes-issue-1892

[Feature]: Add New Tutorials Vue.js Added

Author: ajay-dhangar

docs/Vue.js/ComponentBased.md

@@ -0,0 +1,70 @@
+---
+id: vue.js-Component-Based
+title: Component-Based in Vue.Js
+sidebar_label: Component-Based in Vue.Js
+sidebar_position: 3
+tags: [Vue.js,JavaScript,Vue.js Introduction,Component-Based,Framework,Vue.Js Concepts]
+description:  Vue.Js Component-Based.
+---
+ 
+
+Component-based architecture is a fundamental concept in Vue.js (and many other modern JavaScript frameworks) that promotes building applications by breaking them down into reusable, self-contained components. Each component encapsulates a piece of UI, including its HTML structure, CSS styles, and JavaScript logic, making it easier to manage and maintain complex applications.
+
+### Key Aspects of Component-Based Architecture in Vue.js:
+
+1. **Reusability**: Components can be reused throughout your application. For example, a button component or a user profile component can be used multiple times across different parts of your application.
+
+2. **Encapsulation**: Each Vue component is encapsulated, meaning its internal implementation is hidden from other components. This reduces the complexity of your application by allowing you to focus on the specific functionality of each component.
+
+3. **Composition**: Components can be composed together to build larger components or pages. This enables a hierarchical structure where smaller, simpler components can be combined to create more complex components.
+
+4. **Separation of Concerns**: Components encourage separation of concerns by separating the UI (HTML template) from the business logic (JavaScript) and styling (CSS). This separation improves maintainability and allows different team members (designers, developers) to work more independently.
+
+5. **Communication Between Components**: Vue.js provides mechanisms for components to communicate with each other, such as props (for parent-to-child communication) and events (for child-to-parent communication). This ensures that components remain loosely coupled while still being able to interact with each other.
+
+### Example of Vue.js Component:
+
+Here's a simple example of a Vue component that displays a user profile:
+
+```html
+<!-- UserProfile.vue -->
+<template>
+  <div class="user-profile">
+    <img :src="user.avatar" alt="User Avatar">
+    <h2>{{ user.name }}</h2>
+    <p>{{ user.bio }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserProfile',
+  props: {
+    user: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.user-profile {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px;
+}
+.user-profile img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+</style>
+```
+
+In this example:
+- The `UserProfile` component encapsulates the structure of a user profile, including an image, name, and bio.
+- It receives a `user` object as a prop, which allows it to display dynamic data based on the parent component's data.
+- The component's template (`<template>`), JavaScript logic (`<script>`), and styles (`<style>`) are all encapsulated within the component file.
+
+By using components in Vue.js, you can modularize your application's UI, improve code reusability, and enhance maintainability. This approach is particularly beneficial for large-scale applications where managing complexity and scaling development efforts are crucial.

docs/Vue.js/ComputedPropertiesAndWatchers.md

@@ -0,0 +1,107 @@
+---
+id: vue.js-computed-properties-and-watchers
+title: Computed Properties and Watchers in Vue.Js
+sidebar_label: Computed Properties and Watchers in Vue.Js
+sidebar_position: 6
+tags: [Vue.js,JavaScript,Vue.js Introduction,Computed Properties and Watchers,Framework,Vue.Js Concepts]
+description:  Vue.Js Computed Properties and Watchers.
+--- 
+
+Computed properties and watchers are advanced features in Vue.js that allow you to perform reactive computations and respond to changes in data. They are crucial for handling complex logic and maintaining the reactivity of your application.
+
+### Computed Properties:
+
+Computed properties are functions defined in Vue components that compute a value based on other data properties. They are cached based on their dependencies and only re-evaluate when one of those dependencies changes. Computed properties are especially useful when you need to derive one value from another or perform complex calculations.
+
+#### Syntax and Usage:
+
+```html
+<template>
+  <div>
+    <p>{{ fullName }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      firstName: 'John',
+      lastName: 'Doe'
+    };
+  },
+  computed: {
+    fullName() {
+      return `${this.firstName} ${this.lastName}`;
+    }
+  }
+};
+</script>
+```
+
+In this example:
+- The `fullName` computed property concatenates `firstName` and `lastName`.
+- It is accessed in the template as `{{ fullName }}`.
+- Vue.js automatically handles updating `fullName` whenever `firstName` or `lastName` changes.
+
+**Key Features of Computed Properties:**
+- **Caching**: Computed properties are cached based on their reactive dependencies. They only recompute when necessary, optimizing performance.
+- **Dependency Tracking**: Vue.js automatically tracks dependencies (like `this.firstName` and `this.lastName` in the example) and updates the computed property when these dependencies change.
+
+### Watchers:
+
+Watchers are functions that Vue.js provides to watch for changes in data properties and perform asynchronous or expensive operations in response. Unlike computed properties, watchers do not return a value but allow you to perform side effects, such as making Ajax requests or performing animations.
+
+#### Syntax and Usage:
+
+```html
+<template>
+  <div>
+    <input type="text" v-model="searchQuery">
+    <p v-if="searchResults.length">Results: {{ searchResults }}</p>
+    <p v-else>No results found.</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchQuery: '',
+      searchResults: []
+    };
+  },
+  watch: {
+    searchQuery(newQuery, oldQuery) {
+      // Perform search operation or API call
+      this.fetchSearchResults(newQuery);
+    }
+  },
+  methods: {
+    fetchSearchResults(query) {
+      // Simulated API call
+      setTimeout(() => {
+        this.searchResults = ['Result 1', 'Result 2']; // Update search results
+      }, 500);
+    }
+  }
+};
+</script>
+```
+
+In this example:
+- The `watch` option is used to define a watcher for `searchQuery`.
+- When `searchQuery` changes, the `searchQuery` watcher function is triggered.
+- Inside the watcher function, we call `fetchSearchResults(newQuery)` to update `searchResults` based on the new query.
+
+**Key Features of Watchers:**
+- **Imperative Logic**: Watchers allow you to perform asynchronous operations, such as API calls or data manipulation, in response to data changes.
+- **Access to Previous Value**: Watchers provide access to both the new and old values of the watched property (`newQuery` and `oldQuery` in the example).
+
+### When to Use Computed Properties vs Watchers:
+
+- **Computed Properties**: Use computed properties when you need to derive a new value based on existing data properties or when you want to perform calculations that should be cached and reactive.
+  
+- **Watchers**: Use watchers when you need to perform more complex or asynchronous operations in response to changes in data properties. Watchers are also useful for responding to changes that cannot be expressed declaratively with computed properties.
+
+By leveraging computed properties and watchers effectively, you can build more reactive and performant Vue.js applications that handle complex state management and dynamic behavior seamlessly.

docs/Vue.js/DeclarativeRendering.md

@@ -0,0 +1,64 @@
+---
+id: vue.js-declarative-rendering
+title: Declarative Rendering in Vue.Js
+sidebar_label: Declarative Rendering in Vue.Js
+sidebar_position: 2
+tags: [Vue.js,JavaScript,Vue.js Introduction,Declarative Rendering,Framework,Vue.Js Concepts]
+description:  Vue.Js Declarative Rendering.
+---
+
+## Declarative Rendering
+Declarative rendering is a core concept in Vue.js that simplifies how you specify what you want to display in your web application's user interface (UI). Instead of manually manipulating the DOM (Document Object Model) to update the UI based on changes in data, Vue.js allows you to declare what should be rendered based on the current state of your data.
+
+### Example 1: Basic Data Binding
+
+Consider a simple Vue.js component that displays a user's name:
+
+```html
+<div id="app">
+  <p>{{ message }}</p>
+</div>
+
+<script>
+  var app = new Vue({
+    el: '#app',
+    data: {
+      message: 'Hello, Vue.js!'
+    }
+  });
+</script>
+```
+
+In this example:
+- The `{{ message }}` syntax in the `<p>` tag is a template syntax in Vue.js.
+- Vue.js automatically binds the `message` data property to the text content of the `<p>` tag.
+- When `message` changes (for example, through user interaction or data updates), Vue.js will automatically update the DOM to reflect the new value.
+
+This approach is declarative because you declare what content should be displayed (`{{ message }}`), and Vue.js handles updating the DOM for you based on changes in the `message` data property.
+
+### Example 2: Conditional Rendering
+
+You can also use declarative rendering to conditionally display elements based on the state of your data:
+
+```html
+<div id="app">
+  <p v-if="seen">Now you see me</p>
+</div>
+
+<script>
+  var app = new Vue({
+    el: '#app',
+    data: {
+      seen: true
+    }
+  });
+</script>
+```
+
+Here:
+- The `v-if` directive in Vue.js conditionally renders the `<p>` element based on the `seen` data property.
+- When `seen` is `true`, Vue.js will include the `<p>` element in the DOM. If `seen` changes to `false`, Vue.js will remove the element from the DOM.
+
+This declarative approach makes it easier to manage UI state and logic in your Vue.js components. Instead of manually adding or removing elements from the DOM based on conditions, you declare the conditions directly in your template with directives like `v-if`, `v-show`, or `v-for`, and Vue.js takes care of the rest.
+
+In summary, declarative rendering in Vue.js simplifies UI development by allowing you to focus on describing the desired UI state based on your data, rather than writing imperative DOM manipulation code. This approach enhances code readability, maintainability, and reduces the likelihood of bugs related to UI updates.

docs/Vue.js/Directives.md

@@ -0,0 +1,90 @@
+---
+id: vue.js-Directives
+title: Directives in Vue.Js
+sidebar_label: Directives in Vue.Js
+sidebar_position: 5
+tags: [Vue.js,JavaScript,Vue.js Introduction,Directives,Framework,Vue.Js Concepts]
+description:  Vue.Js Directives.
+---
+
+## Directives
+
+Directives in Vue.js are special attributes prefixed with `v-`, which are used to add dynamic behavior to HTML elements or components. They are fundamental building blocks of Vue.js applications and provide declarative syntax to manipulate the DOM, handle events, conditionally render elements, and more.
+
+### Commonly Used Vue.js Directives:
+
+1. **`v-bind` (Shorthand: `:`)**:
+   - Used to bind one or more attributes or props to an element.
+   - Example:
+
+     ```html
+     <div v-bind:class="{ active: isActive }"></div>
+     ```
+
+     This binds the `class` attribute of the `<div>` dynamically based on the `isActive` data property.
+
+2. **`v-if`, `v-else-if`, `v-else`**:
+   - Conditional rendering directive. The element will only render if the expression evaluates to true.
+   - Example:
+
+     ```html
+     <p v-if="loggedIn">Welcome, {{ username }}</p>
+     <p v-else>Please log in to continue.</p>
+     ```
+
+3. **`v-for`**:
+   - Used for rendering a list of items based on an array.
+   - Example:
+
+     ```html
+     <ul>
+       <li v-for="item in items" :key="item.id">{{ item.name }}</li>
+     </ul>
+     ```
+
+     This renders an `<li>` element for each item in the `items` array.
+
+4. **`v-on` (Shorthand: `@`)**:
+   - Used to listen to DOM events and execute JavaScript when they occur.
+   - Example:
+
+     ```html
+     <button v-on:click="incrementCounter">Increment</button>
+     ```
+
+     This executes the `incrementCounter` method in Vue instance when the button is clicked.
+
+5. **`v-model`**:
+   - Creates two-way data bindings on form input elements or components.
+   - Example:
+
+     ```html
+     <input v-model="message" type="text">
+     ```
+
+     This binds the `message` data property to the value of the `<input>` element, allowing changes in the input field to automatically update `message` and vice versa.
+
+6. **`v-show`**:
+   - Similar to `v-if`, but toggles the display of the element with CSS `display` property (visibility toggle) instead of removing it from the DOM.
+   - Example:
+
+     ```html
+     <p v-show="isVisible">This paragraph will be shown or hidden based on the isVisible data property.</p>
+     ```
+
+### Custom Directives:
+
+In addition to the built-in directives, Vue.js also allows you to create custom directives when you need to encapsulate some low-level DOM manipulation or behavior. Custom directives are registered using `Vue.directive()` global method or locally in components.
+
+### Directive Modifiers:
+
+Directives can also have modifiers that provide additional functionality or behavior to the directive. For example:
+
+- `.prevent`: Prevents the default behavior of an event.
+- `.stop`: Stops event propagation.
+- `.capture`: Adds an event listener in capture mode.
+- `.once`: Trigger the event listener at most once.
+
+### Summary:
+
+Vue.js directives provide a powerful way to add dynamic behavior to your HTML templates. They simplify the interaction between the DOM and Vue instance data, making it easier to build interactive and reactive applications. Understanding and utilizing directives effectively is key to mastering Vue.js development.