Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/milan-sony/learn_vue.js
learn vue.js
https://github.com/milan-sony/learn_vue.js
vue-cli vue3 vuejs
Last synced: about 1 month ago
JSON representation
learn vue.js
- Host: GitHub
- URL: https://github.com/milan-sony/learn_vue.js
- Owner: milan-sony
- Created: 2024-03-18T07:49:47.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T06:13:30.000Z (about 2 months ago)
- Last Synced: 2024-11-04T07:20:02.467Z (about 2 months ago)
- Topics: vue-cli, vue3, vuejs
- Language: Vue
- Homepage: https://milansony.notion.site/Vue-JS-63472e8cc4534d51b5acd599b9f1ac17
- Size: 275 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue.JS
- Text can be bind inside the template using the **mustache syntax** `{{ name }}` or using `v-directives`
```
{{ greetings }}
export default {
name: "App",
data(){
return{
greetings: "Hello",
name: "MilanSony"
}
}
}
```
- `directive`
- Directives in Vue.js are special attributes that are prefixed with the letter v. They are used to tell the Vue.js library to do something to the DOM element to which they are attached
- Directives are **used to modify the behavior of our HTML elements which reside in the DOM**
- **Different directives** [link](https://vuejs.org/api/built-in-directives.html#built-in-directives)
- `v-text`
- The v-bind shorthand property is `:`
```jsx
{{ greetings }}
Heading
Button
Text Underline
Text Underline
Text Underline
Promoted Movie
Sold out movie
New Movie
Array condition movie
Object condition movie
Inline style
Style Object
Style array object
v-bind shorthand
export default {
name: "App",
data() {
return {
greetings: "Hello",
name: "MilanSony",
headingId: 'ID',
isDisabled: true,
status: 'danger',
isPromoted: true,
isSoldout: false,
highlightColor: 'orange',
headerSize: '50px',
headerStyleObj: {
color: 'Blue',
'font-size' : '30px',
padding: '10px'
},
newStyleObj:{
'font-size': '40px',
'background-color': 'yellow'
}
}
}
}
.underline {
text-decoration: underline;
}
.promoted {
font-style: italic;
}
.new {
color: green;
}
.sold-out {
color: red;
}
```
- `v-bind` [link1](https://vuejs.org/api/built-in-directives.html#v-bind) [link2](https://www.w3schools.com/vue/vue_v-bind.php)
- The shorthand of v-bind is `:`
- The v-bind directive lets us bind an HTML attribute to data in the Vue instance. This makes it easy to change the attribute value dynamically.
- `v-if` and `v-else`
```jsx
The number is Zero
The number is not Zero
export default {
name: "App",
data() {
return {
num: 5
}
}
}
```
- `v-else-if`
- wrapping the content (`template` tag)
```jsx
The number is Zero
The number is not Zero
Inside div tag
Name: Milan Sony
Age: 23
No div tag its inside template tag
The template tag acts as an invisible wrapper
Name: Milan Sony
Age: 23
export default {
name: "App",
data() {
return {
num: 5,
display: true
}
}
}
```
- `v-show` [link](https://www.w3schools.com/vue/vue_v-show.php)
- The v-show directive hides an element when the condition is 'false' by setting the CSS 'display' property value to 'none'
- The difference between `v-show` and `v-if` is that `v-if` creates (renders) the element depending on the condition, but with `v-show` the element is already created, `v-show` only changes its visibility
- `v-for`
- [link](https://vuejs.org/api/built-in-directives.html#v-for)
```jsx
{{ name }}
{{index}} {{ name }}
{{index + 1}} {{ name }}
export default {
name: "App",
data() {
return {
names: ['milan', 'sony']
}
}
}
```
- `v-on` (event handler) [link](https://www.w3schools.com/vue/vue_v-on.php)
- The shorthand property for v-on is `@`
- `@click.self` is used to add the click event only to that particular element
- inline event handlers
```jsx
{{ name }}
Change name
export default {
name: "App",
data() {
return {
name: 'milan'
}
},
methods:{
}
}
```
- inline count increment and decrement
```jsx
{{ name }}
Change name
{{ count }}
Increment
Decrement
export default {
name: "App",
data() {
return {
name: 'milan',
count: 0
}
},
methods:{
}
}
```
- onclick function call
```jsx
{{ name }}
Change name
{{ count }}
Increment
Decrement
export default {
name: "App",
data() {
return {
name: 'milan',
count: 0
}
},
methods:{
increment(){
this.count ++
},
decrement(){
this.count --
}
}
}
```
- on click pass value into the function
```
{{ name }}
Change name
{{ count }}
Increment
Decrement
Increment
Decrement
export default {
name: "App",
data() {
return {
name: 'milan',
count: 0
}
},
methods:{
increment(num){
this.count += num
},
decrement(num){
this.count -= num
}
}
}
```
- multiple methods
```jsx
{{ name }}
Change name
{{ count }}
Increment
Decrement
Increment
Decrement
export default {
name: "App",
data() {
return {
name: 'milan',
count: 0
}
},
methods:{
changeName(){
this.name = "Sony"
},
increment(num){
this.count += num
},
decrement(num){
this.count -= num
}
}
}
```
- `v-model` form handling
- v-model and form handling [link](https://vuejs.org/guide/essentials/forms.html#form-input-bindings)
```jsx
{{ JSON.stringify(formValue, null, 2) }}
Name
Profile Summary
Country
Select a country
India
China
Job Location
India
China
Open to remote work?
Skills
HTML
CSS
JavaScript
Years of exprerience
0-2
3-5
6-10
SUMBIT
export default {
name: "App",
data() {
return {
formValue: {
name: '',
profileSummary: '',
country: '',
jobLocation: [],
remoteWork: 'no',
skillset: [],
yearsOfExpreience: ''
}
}
},
methods: {
submitForm(event){
event.preventDefault()
console.log('Form Values', this.formValue)
}
}
}
```
- `methods` In Vue.js, a method is a function that is associated with a Vue instance. Methods are used to perform actions in response to user interaction or other events
```jsx
{{ 10 + 20 }}
Add method {{ add() }}
export default {
name: "App",
data() {
return {
}
},
methods:{
add(){
return 2+3+5
}
}
}
```
- passing value to the method/function
```jsx
{{ 10 + 20 }}
Add method {{ add(2, 3, 5) }}
Add method {{ add(2, 3, 2) }}
export default {
name: "App",
data() {
return {
}
},
methods:{
add(num1, num2, num3){
return num1 + num2 + num3
}
}
}
```
- using this keyword
- In vue when defining the methods don’t use arrow function
```jsx
{{ 10 + 20 }}
Add method {{ add(2, 3, 5) }}
Add method {{ add(2, 3, 2) }}
multiply {{ multiply(5) }}
export default {
name: "App",
data() {
return {
baseMultiplier:5
}
},
methods:{
add(num1, num2, num3){
return num1 + num2 + num3
},
multiply(num){
return num * this.baseMultiplier
}
}
}
```
- `modifiers`: are the suffix that can be added either to the v-on directive or the v-model directive to add some functionality inline within the template
- [trim](https://vuejs.org/guide/essentials/forms.html#trim) If you want whitespace from user input to be trimmed automatically, you can add the `trim` modifier to your `v-model`-managed inputs:
```jsx
```
- [number](https://vuejs.org/guide/essentials/forms.html#number) If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs:
```jsx
```
- [lazy](https://vuejs.org/guide/essentials/forms.html#lazy)
```jsx
```
- event modifier [link](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)
- `.prevent` - use this instead of event.preventDefault()
- key modifier [link](https://vuejs.org/guide/essentials/event-handling.html#key-modifiers)
```jsx
```
- `computed properties` [link](https://vuejs.org/guide/essentials/computed.html)
- computed properties are **cached** based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.
- Computed will only recalculate every time its dependent variables change, and methods will be computed whenever it is called
- Computed properties and methods are two ways to define functions in Vue.js. They are both used to perform calculations or logic, but they have different use cases.
- Computed properties are used to calculate values that are based on other data in the component. They are cached, meaning that they are only recalculated when their dependencies change. This makes them ideal for values that are used frequently in the template, such as the total price of a cart or the number of items in a list.
- Methods are used to perform actions that can be triggered by events, such as clicking a button or submitting a form. They can also be used to perform complex calculations that are not needed every time the template is rendered.
```jsx
Fullname: {{ firstName }} {{ lastName }}
Computed fullname: {{ fullName }}
Computed total: {{ total }}
Method Total: {{ getTotal() }}
export default {
name: "App",
data() {
return {
firstName: 'Milan',
lastName: 'Sony',
items: [
{
id: 1,
title: 'TV',
price: 100
},
{
id: 2,
title: 'Phone',
price: 200
},
{
id: 3,
title: 'Laptop',
price: 300
},
],
country: ''
}
},
methods: {
getTotal(){
console.log('getTotal()')
return this.items.reduce((total, curr) => (total = total + curr.price), 0)
}
},
computed:{
fullName(){
return `${this.firstName} ${this.lastName}`
},
total(){
console.log('total()')
return this.items.reduce((total, curr) => (total = total + curr.price), 0)
}
}
}
```
- list of items computed properties
```jsx
Fullname: {{ firstName }} {{ lastName }}
Computed fullname: {{ fullName }}
Computed total: {{ total }}
Method Total: {{ getTotal() }}
{{ item.title }} {{ item.price }}
{{ item.title }} {{ item.price }}
export default {
name: "App",
data() {
return {
firstName: 'Milan',
lastName: 'Sony',
items: [
{
id: 1,
title: 'TV',
price: 100
},
{
id: 2,
title: 'Phone',
price: 200
},
{
id: 3,
title: 'Laptop',
price: 300
},
],
country: ''
}
},
methods: {
getTotal(){
console.log('getTotal()')
return this.items.reduce((total, curr) => (total = total + curr.price), 0)
}
},
computed:{
fullName(){
return `${this.firstName} ${this.lastName}`
},
total(){
console.log('total()')
return this.items.reduce((total, curr) => (total = total + curr.price), 0)
},
expensiveItems(){
return this.items.filter(item => item.price > 100)
}
}
}
```
- computed `getter` and `setter` [link](https://vuejs.org/guide/essentials/computed.html#writable-computed)
Computed properties are by default getter-only. If you attempt to assign a new value to a computed property, you will receive a runtime warning. In the rare cases where you need a "writable" computed property, you can create one by providing both a getter and a setter:
```jsx
Fullname: {{ firstName }} {{ lastName }}
Computed fullname: {{ fullName }}
Change Name
export default {
name: "App",
data() {
return {
firstName: 'Milan',
lastName: 'Sony',
}
},
methods: {
changeFullName(){
this.fullName = 'Milosh Sony'
}
},
computed:{
fullName:{
// getter : read computed property value
get(){
return `${this.firstName} ${this.lastName}`
},
// setter : set() is called when new value is assigned into the computed property
set(value){
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
}
```
- `watchers` [link1](https://vuejs.org/guide/essentials/watchers.html#watchers) [link2](https://www.w3schools.com/vue/vue_watchers.php)
- Watchers allow you to observe a property in Vue.js and trigger a method when it changes.
- This is same as of computed property but different:
- Here are some use cases:
- Computed properties are used to calculate the value of a property based on some other conditions. Watchers, on the other hand, are not primarily used for changing the value of a property; instead, they are used to notify you when the value has changed and let you perform certain actions based on these changes.
- watchers should be used when you need to be notified when a specific data property changes and react accordingly. Methods should be used when you need to perform an action, such as updating data properties, calling other methods, or interacting with the DOM.
- can be used when you need to add some transitions
- can be used when you have to call an API in response to change in application data
- In addition to the new property value, the previous property value is also automatically available as an input argument to watcher methods.
```jsx
Volume Tracker (0-20)
Current Volume {{ volume }}
Increase
Decrease
export default {
name: "App",
data() {
return {
volume: 0
}
},
methods: {
},
computed: {
},
watch: {
volume(newValue, oldValue) {
if (newValue > oldValue && newValue === 16) {
alert("Volume above 16")
}
}
}
}
```
- `immediate` (watchers)
The immediate property will runs the watcher handler on page load
```jsx
Volume Tracker (0-20)
Current Volume {{ volume }}
Increase
Decrease
export default {
name: "App",
data() {
return {
volume: 0,
movie: 'Batman'
}
},
methods: {
},
computed: {
},
watch: {
volume(newValue, oldValue) {
if (newValue > oldValue && newValue === 16) {
alert("Volume above 16")
}
},
movie:{
handler(newValue){
console.log(`Calling an API with the movie name = ${newValue}`)
},
immediate: true
}
}
}
```
- `deep watcher` [link](https://vuejs.org/guide/essentials/watchers.html#deep-watchers)
---
- `components` [link](https://vuejs.org/guide/essentials/component-basics#components-basics)
- Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component
- **point to remember**
- In Single File Component’s (SFC), it's recommended to use `PascalCase` tag names for child components
- `component props` component props (props) are custom attributes that can register on a component which allow the component content to be dynamic
- `props` [link](https://vuejs.org/guide/essentials/component-basics#passing-props) props is an array of all data properties or custom attributes that the component will accept from the parent component. Declared props are automatically exposed to the template
- E.g. App.vue (parent)
```jsx
import GreetMe from './components/Greet.vue'
export default {
name: 'App',
components: {
GreetMe
},
data() {
return {
name: 'milosh',
email: '[email protected]'
}
}
}
```
- Greet.vue (child)
```jsx
Hello {{ name }} Email: {{ email }}
export default {
name: 'GreetMe',
props: [
'name',
'email'
]
}
```
- **prop types and validations** (`props as an object`) [link](https://www.w3schools.com/vue/vue_props.php)
- When the `props` option is given as an object several options can be defined in addition to the prop names:
App.vue (parent)
```jsx
// import GreetMe from './components/Greet.vue'
import ArticleList from './components/Article.vue'
export default {
name: 'App',
components: {
// GreetMe,
ArticleList
},
data() {
return {
name: 'milosh',
email: '[email protected]'
}
}
}
```
Article.vue (child)
```jsx
Article Component
{{ title }}
likes: {{ likes }}
Publised {{ isPublished ? 'Yes' : 'No' }}
export default {
name: 'ArticleList',
props: {
title:{
type: String,
required: true,
default: 'Article default title'
},
likes: Number,
isPublished: Boolean
},
}
```
- no prop attributes
- A non-prop attribute in Vue.js is an attribute that is passed to a component but does not have a corresponding prop defined in the component's options. Non-prop attributes are typically used to pass HTML attributes, such as class, style, and id, to a component
- **provide/inject** (props drilling or nested components) [link1](https://www.w3schools.com/vue/vue_provide-inject.php) [link2](https://vuejs.org/guide/components/provide-inject)
- Provide/Inject in Vue is used to provide data from one component to other components, particularly in large projects.
- Provide/Inject is a way to share data as an alternative to passing data using props
- `Provide` makes data available to other components
- `Inject` is used to get the provided data
- If we use provide/inject instead of props, we only need to define the provided data where it is provided, and we only need to define the injected data where it is injected
- **Note**:
- If you want to utilize the property only further down in the component tree you can specify the provide as an object
- If the data has to be used in the same component as well as components down in the component tree you can specify the provide as a function which returns an object
- **component event** (`$emit()`) [link](https://www.w3schools.com/vue/vue_emit.php)
- With the built-in **`$emit()`** method in Vue we can create a custom event in the child component that can be captured in the parent element
- `Props` are used to send data from the parent element to the child component, and **`$emit()`** is used to do the opposite: to pass information from the child component to the parent
- E.g.
Popup.vue - on click on the close button we are emitting a custom event called close (we can give any name) to the parent component
```jsx
This is a popup
close popup
export default{
name: 'PopUp',
emits: ['close']
}
```
App.vue - In the app component we need to listen to the close event (the custom event from the child component) for that we use the event binding (shorthand `@` ) and listen to own event `@close` and set Showpop to false `@close=”Showpopup = false”`
```jsx
show popup
import PopUp from './components/Popup.vue'
export default {
name: 'App',
data() {
return {
showPopup: false
}
},
components:{
PopUp
}
}
```
- You can also pass data from child component to parent component by including the data as the 2nd argument in the $emit()
- validating emitted event
- `slots` [link](https://www.w3schools.com/vue/vue_slots.php)
- Slots allow a parent component to embed any content in a child component including HTML elements
- `props` allow you to re-use components by passing in different data
- Although props are great for re-usability, we do have a strict parent child relationship
- The child will always be in control of the HTML content and the parent can only pass in different data values
- Slots are more powerful, they allows you to re-use a component, they allows the parent component to control inside the child content
- E.g.
card.vue
```jsx
Default Content
export default{
name: 'CardVue',
}
.card{
display: flex;
justify-self: center;
align-items: center;
text-align: center;
width: 180px;
height: 60px;
background-color: red;
color: white;
margin-bottom: 20px;
}
```
App.vue
```jsx
hello
Milan Sony
import CardVue from './components/Card.vue'
export default {
name: 'App',
data() {
return {
}
},
components: {
CardVue
},
methods: {
}
}
```
- `v-slot` [link](https://www.w3schools.com/vue/vue_v-slot.php) (named slots)
- **Dynamic Component** [link](https://www.w3schools.com/vue/vue_dynamic-components.php)
- Dynamic Components can be used to flip through pages within your page, like tabs in your browser, with the use of the 'is' attribute
- To make a dynamic component we use the `` tag to represent the active component. The 'is' attribute is tied to a value with `v-bind`, and we change that value to the name of the component we want to have active
- E.g.
```jsx
Tab A
Tab B
Tab C
import TabA from './components/TabA.vue'
import TabB from './components/TabB.vue'
import TabC from './components/TabC.vue'
export default {
name: 'App',
data() {
return {
activeTab: 'TabA'
}
},
components: {
TabA,
TabB,
TabC
},
methods: {
}
}
```
- ``
- `include` or `exclude` attributes on the `` tag
*click on the [link](https://www.w3schools.com/vue/vue_dynamic-components.php) to read more about `` and `include` or `exclude` attributes on the `` tag*
- **Teleport** [link](https://www.w3schools.com/vue/vue_teleport.php)
- To move some content to somewhere else in the DOM structure we use the Vue `` tag around the content and the 'to' attribute to define where to move it
- used in pop up modals
- Vue HTTP request [link](https://www.w3schools.com/vue/vue_http.php)
- E.g.
GetData.vue
1st install `axios` `npm install axios`
(add this component in the App.vue)
```jsx
Load Data
{{ data.first_name + " " + data.last_name }}
"{{ data.employment.title }}"
import axios from 'axios'
export default {
name: 'PostList',
data() {
return {
data: ''
}
},
methods: {
async fetchData() {
await axios.get("https://random-data-api.com/api/v2/users").then((response)=>{
console.log(response.data)
this.data = response.data
}).catch((err)=>{
console.log(err)
})
}
}
}
```
- **Lifecycle Hooks** [link](https://www.w3schools.com/vue/vue_lifecycle-hooks.php)
- use - sometimes we need to get the data from the API or something not only when the button is clicked but also the app loads in the browser. E.g. If you navigate to your profile page within an application your profile data need to be rendered in the browser without the need of a button click this is where the lifecycle method come in use
- GET request on page load
To get data on page load we need to call the get data function (API function) inside the `created()` lifecycle
```jsx
{{ data.first_name + " " + data.last_name }}
"{{ data.employment.title }}"
import axios from 'axios'
export default {
name: 'GetData',
data() {
return {
data: ''
}
},
created() {
this.fetchData()
},
methods: {
async fetchData() {
await axios.get("https://random-data-api.com/api/v2/users").then((response) => {
console.log(response.data)
this.data = response.data
}).catch((err) => {
console.log(err)
})
}
}
}
```
- **Template Refs** [link](https://www.w3schools.com/vue/vue_refs.php)
- Vue **Template Refs** are used to refer to specific DOM elements
- When the **`ref`** attribute is set on an HTML tag, the resulting DOM element is added to the **`$refs`** object
- We can use the **`ref`** attribute and the **`$refs`** object in Vue as an alternative to methods in plain JavaScript like getElementById() or querySelector()
- E.g.
```jsx
Click the button to copy this text into the paragraph below.
Transfer text
...
export default {
name: 'TemplateRef',
mounted() {
this.$refs.inputRef.focus()
},
methods: {
transferText() {
this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;
},
}
}
```