Scribd
Upload
33 views5 pages

Vue

Vue.js is a progressive JavaScript framework designed for building user interfaces and single-page applications, created by Evan You. It features a component-based architecture, reactive data binding, and supports libraries like Vue Router and Vuex for routing and state management. The document also outlines the structure of a Vue application, common directives, lifecycle hooks, and key commands for using Vue CLI.

Uploaded by

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

Vue

Vue.js is a progressive JavaScript framework designed for building user interfaces and single-page applications, created by Evan You. It features a component-based architecture, reactive data binding, and supports libraries like Vue Router and Vuex for routing and state management. The document also outlines the structure of a Vue application, common directives, lifecycle hooks, and key commands for using Vue CLI.

Uploaded by

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

Vue.

js Notes

📌 What is Vue.js?

 Vue.js is a progressive JavaScript framework for building user


interfaces and single-page applications (SPAs).

 Created by Evan You.

 Focuses on the View layer but can be extended with libraries


like Vue Router and Vuex.

🚀 Key Features:

 ✅ Component-based architecture

 ✅ Reactive data binding

 ✅ Declarative rendering

 ✅ Built-in directives

 ✅ Transitions and animations

 ✅ Vue Router (for SPA routing)

 ✅ Vuex (for state management)

🧱 Vue App Structure (Vue CLI):

bash

CopyEdit

/src

main.js → Entry point

App.vue → Root component

/components → Reusable components

/views → Route views (if using router)

/store → Vuex store (if using Vuex)


🔹 Vue Instance:

js

CopyEdit

new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

});

🔗 Data Binding:

 Interpolation: {{ message }}

 Directive binding: v-bind:href="url" or :href="url"

 Event binding: v-on:click="doSomething" or


@click="doSomething"

 Two-way binding: v-model="inputValue"

🧩 Components:

js

CopyEdit

Vue.component('my-component', {

template: '<div>Hello from component</div>'

});

Or in .vue single-file format:

vue

CopyEdit

<template>
<p>{{ greeting }}</p>

</template>

<script>

export default {

data() {

return {

greeting: 'Hello Vue Component!'

};

</script>

🔁 Common Directives:

 v-if, v-else-if, v-else → Conditional rendering

 v-for="item in items" → Looping

 v-bind or : → Bind attributes

 v-model → Two-way binding

 v-show → Toggle visibility (uses CSS display)

🌐 Routing (Vue Router):

js

CopyEdit

const routes = [

{ path: '/home', component: Home },

{ path: '/about', component: About }

];
const router = new VueRouter({

routes

});

Use <router-view></router-view> and <router-link


to="/home">Home</router-link>

📦 Vuex (State Management):

js

CopyEdit

const store = new Vuex.Store({

state: {

count: 0

},

mutations: {

increment(state) {

state.count++

});

Access via:

js

CopyEdit

this.$store.state.count

this.$store.commit('increment')

🧪 Lifecycle Hooks:
 created()

 mounted()

 updated()

 destroyed()

🛠 Vue CLI Commands:

 vue create my-app → Create project

 npm run serve → Start dev server

 npm run build → Production build

🌟 Vue 3 Highlights (Composition API):

js

CopyEdit

import { ref } from 'vue';

export default {

setup() {

const count = ref(0);

const increment = () => count.value++;

return { count, increment };

You might also like