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
No comments:
Post a Comment