VueJS Tutorial and Examples

 Allows for a more efficient development process with a Template based syntax, two-way data binding, and a centralized state management

--Create a Folder 'Vue Training

--Open CMD>>Go to that folder path>>code .

--Goto Extension>>Search for Vue>>install Vue 3 Snippets

--Search 'Vue.JS CDN' in google for script--https://vuejs.org/

--Download some images and copied in 'Images' folder

--create html file as 'first.html' and start coding

--To run install 'Live Server' by Ritwick Dey from Extension

---Click on 'Go Live' option on Taskbar to run the application

---Or Right click on the every where on the Page and click 'Open with Live Server'

Directives:

v-bind: for variables

v-if: for condition

v-show: To visible

v-for: for loop

v-on: for event modifiers

v-model: for ,form, input and button

v-bind:class=""

v-bind:style="{fontSize:size}"

<div v-if="text.includes('pizza')"></div>

<div v-else v-bind:style="{backgroundColor:no}">No Pizza</div>

Dt:05-09-2023:

Vue-For

Vue Events

Vue Methods

Vue Event Modifiers

Dt:06-09-2023:

V-Model ->Two way data binding

.lazy, .number, .trim

V-Bind  ->One way data binding

Dt:07-09-2023:

Vue with TypeScript:

>npm create vue@latest

--Project Name: vue-project

>cd vue-project

>npm install

>npm run dev

-->npm run format

-->npm run serve

Dt:08-09-2023:-

--Option API --Normal html form

--Composition API --Real time will use this

Dt:12-09-2023:MySelf

https://www.youtube.com/watch?v=2uZYKcKHgU0&list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5

>npm install -g @vue/cli

>vue create vuetify-todo

--Select Manually

--Select Package.json

>cd vuetify-todo

>vue add vuetify /or npm add vuetify

>npm run serve

--To add Vuetify Version 3

--Go to https://vuetifyjs.com/en/getting-started/installation/

>npm add vuetify@^3.3.16 

--Then add below code from above link in main.js file

import { createApp } from 'vue'

import App from './App.vue'

// Vuetify

import 'vuetify/styles'

import { createVuetify } from 'vuetify'

import * as components from 'vuetify/components'

import * as directives from 'vuetify/directives'

const vuetify = createVuetify({

  components,

  directives,

})

createApp(App).use(vuetify).mount('#app')

>npm run serve

Dt-13-09-2023:By Deepa

--Open cmp prompt

>npm install -g @vue/cli

>cd C:\Subas\VueJS

>vue create stylewithvuetify

--Select Default Vue 3

>cd stylewithvuetify

>npm run serve

--Open the Project in VSCode>>Goto Terminal>>Select cmd prompt

>vue add vuetify

--Select Vuetify 3-Vue CLI(Preview)

--Then goto vuetify.js file and import below lines

import * as components from 'vuetify/components'

import * as directives from 'vuetify/directives'

--Then start exploring

--Default restapi link to check CRUD operation

---https://dummy.restapiexample.com/api/v1/employees

---https://dummy.restapiexample.com/api/v1/employee/1

---https://dummy.restapiexample.com/api/v1/create

---https://dummy.restapiexample.com/api/v1/update/1

---https://dummy.restapiexample.com/api/v1/delete/1

>npm i axios --save

Dt:14-09-2023:

Pinia State Management

>npm i pinia

Dt:15-09-2023:

Crud Operation using Vuetify:

--Open cmp prompt

>npm install -g @vue/cli

>cd C:\Subas\VueJS

>vue create stylewithnpmvuetify

--Select Default Vue 3

>cd stylewithnpmvuetify

>npm run serve

--Open the Project in VSCode>>Goto Terminal>>Select cmd prompt

>npm add vuetify

--Then add 'plugins' folder>>'vuetify.js' manually

import 'vuetify/styles'

import * as components from 'vuetify/components'

import * as directives from 'vuetify/directives'

// Vuetify

import { createVuetify } from 'vuetify'

export default createVuetify(

  {

    components,

    directives

  }

  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides

)

--Then add in 'main.js' file as below

import vuetify from './plugins/vuetify'

createApp(App)

  .use(vuetify)

  .mount('#app')

>npm run serve