VueJs Notes

VueJs Notes

VueJs
=====

What is Vue?

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, 
and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of 
any complexity.

    - Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output 
    based on JavaScript state.

    - Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
    
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 on 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
    
API Styles
Vue components can be authored in two different API styles: Options API and Composition API.
- Two Api Style for writing VueJs

	- Options Api
	<script>
		export default {
			// for variable declaration called data properties
  			data() {
    				return {
      					count: 0
    				}
  			},
			// for writing functions called method properties
  			methods: {
   				increment() {
      					this.count++
    				}
  			}
			// Created properties are auto start 
			computed, onMounted
		}
	</script>

	- Composition Api
	<script setup>
		import { ref } from 'vue'

		// reactive variable
		const count = ref(0)

		const increment = () => {
  			count.value++
		}
	</script>
	
- Mustache Syntax or Mustache Interpolation - {{ }} 
	- use for writing JavaScript Codes
		eg. <p> {{ author.name }} </p>

- using ref => use for decleration reactive value

- Attribute Bindings 
	In Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the v-bind directive:
	eg. <div v-bind:id="dynamicId"></div>

- Event Listeners 
	<button v-on:click="increment">{{ count }}</button>
	
- Form Bindings 
	Using v-bind and v-on together, we can create two-way bindings on form input elements:
		eg. <input :value="text" @input="onInput">
		function onInput(e) {
  			// a v-on handler receives the native DOM event
  			// as the argument.
  			text.value = e.target.value
		}
		
	To simplify two-way bindings, Vue provides a directive, v-model, which is essentially syntactic sugar for the above:
		eg. <input v-model="text">

- Conditional Rendering 
	- We can use the v-if directive to conditionally render an element:
	eg. <h1 v-if="awesome">Vue is awesome!</h1>

- List Rendering 
	- use for looping array and List<> - v-for ( like js - for in loop )
		eg. <ul v-for=(author in authors)> <li> {{ author.name }} </li> </ul>

- Computed Property 
	- The next improvement we can add is to be able to hide already completed todos. We already have a button that toggles the hideCompleted state. But how do we render different list items based on that state?
	Introducing computed(). We can create a computed ref that computes its .value based on other reactive data sources:
	
	const filterTodos = computed(() => {
  		return hideCompleted.value
  			? todos.value.filter((x) => !x.done)
  			: todos.value
	})
	
- Lifecycle and Template Refs 
	<p ref="pElementRef">hello</p>
	To run code after mount, we can use the onMounted() function:
	import { onMounted } from 'vue'

	onMounted(() => {
  		// component is now mounted.
	})
	This is called a lifecycle hook - it allows us to register a callback to be called at certain times of the component's lifecycle. 
	There are other hooks such as onUpdated and onUnmounted. 

- Watchers 
	Sometimes we may need to perform "side effects" reactively - for example, logging a number to the console when it changes. 
	We can achieve this with watchers:
	import { ref, watch } from 'vue'

	const count = ref(0)

	watch(count, (newCount) => {
  		// yes, console.log() is a side effect
  		console.log(`new count is: ${newCount}`)
	})
	
- Components
	- A parent component can render another component in its template as a child component. To use a child component, 
	we need to first import it:
	
- Props 
	- A child component can accept input from the parent via props. First, it needs to declare the props it accepts:
	- The parent can pass the prop to the child just like attributes. To pass a dynamic value, we can also use the v-bind syntax:

- Emits
	- a child component can also emit events to the parent:
	The first argument to emit() is the event name. Any additional arguments are passed on to the event listener.
	The parent can listen to child-emitted events using v-on - here the handler receives the extra argument from the child emit call and assigns it to local state:


- User Input Handling - use for Form 
		- Data Binding 
			- use for Two ways data binding - v-model 
				eg. <input type="text" v-model="DeclaredSomethingValue">

- Event Handling - for action

	eg. 	<input type="text" v-model="DeclaredSomethingName" v-on:keyup.enter="methodName">
		<button v-on:click="methodName"> </button>
		
		<form v-on:submit.prevent="methodName">
    			<input type="text" v-model="author">
    			<button type="submit">Submit</button>
  		</form>

- shorthands 
	eg. v-on:click == @click, v-on:submit.prevent == @submit.prevent, v-bind:disabled == :disabled

- Attribute Binding 
	eg. <input type="text" v-model="author" :disabled="author.length === 0">

- class Binding
	eg. eg. <p :class="'class_name' : checkValue"> {{ author.name }} </p>

- Conditional Rendering - v-if , v-else-if , v-else
	eg. check to show the author name - <p v-if="author.name"> {{ author.name }} </p>

- Computed Properties
	Computed properties are best when:

	✔ You want derived data
	✔ You need automatic updates
	✔ The calculation should be cached until dependencies change

		eg. 	const total = computed(() => {
  					return authors.value.filter(author => author.deleted === false)
				})