Learn Vue.js
By Overflow Club
Instructor: Mohamed Mansour
2.2
Section II
Getting Started with Vue (part 2)
Outline
- Form and user-input handling
- Input binding
- Working with single-file components
- Props
- Slots
- Docs references
Form and user-input handling
Input Binding
The problem we have is that we simply need the user input to be reflected in the variable in JS whenever the input value change, for example.
A simple solution is that we can add an event listener to the input element, so that whenever it updates, we get the value.
Something like the following:
Form and user-input handling
Input Binding
The problem we have is that we simply need the user input to be reflected in the variable in JS whenever the input value change, for example.
A simple solution is that we can add an event listener to the input element, so that whenever it updates, we get the value.
Something like the following:
<template>
...
<input
:value="text"
@input="event => text = event.target.value"
>
...
</template>
<script setup>
const text = ref('')
</script>This works fine, but Vue also provides us with a simpler way that works for all different input types, which is using the
v-model directive.
A simple solution is that we can add an event listener to the input element, so that whenever it updates, we get the value.
Something like the following:
<template>
...
<input v-model="text">
...
</template>
<script setup>
const text = ref('')
</script>This works fine, but Vue also provides us with a simpler way that works for all different input types, which is using the
v-model directive.
Using v-model in the same previous example:
Working with
(Single-File) Components
Defining Components
There are different ways to define a component depending on whether we're using a build step or not. Since we already use Vite as our build tool, we'll go with the single-file component way for now.
Vue Single-File Components (files with .vue extension, aka SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
Working with
(Single-File) Components
Defining Components
There are different ways to define a component depending on whether we're using a build step or not. Since we already use Vite as our build tool, we'll go with the single-file component way for now.
Vue Single-File Components (files with .vue extension, aka SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
We've already seen SFC's in the Hello World project that we started with.
Single file components live under the components directory in the project.
To create your own component, simply create a new file with the .vue extension.
And then include the 3 main parts of any Vue component:
template, script, and style
We've already seen SFC's in the Hello World project that we started with.
Single file components live under the components directory in the project.
To create your own component, simply create a new file with the .vue extension.
And then include the 3 main parts of any Vue component:
template, script, and style
To use this component anywhere in the app, you have to import it first where you want to use it.
And then include the 3 main parts of any Vue component:
template, script, and style
And then include the 3 main parts of any Vue component:
template, script, and style
To use this component anywhere in the app, you have to import it first where you want to use it.
And then include the 3 main parts of any Vue component:
template, script, and style
And then include the 3 main parts of any Vue component:
template, script, and style
To use this component anywhere in the app, you have to import it first where you want to use it.
Passing data to components:
Props
Many times you have a component that needs some external information before it renders, we can achieve this using different methods, one of them is using something called props.
Props allow us to pass the data we need from the parent component the same way you pass HTML attributes.
Defining and passing props
There's a special Vue function called defineProps()
And then include the 3 main parts of any Vue component:
template, script, and style
And then include the 3 main parts of any Vue component:
template, script, and style
Passing data to components:
Props
Many times you have a component that needs some external information before it renders, we can achieve this using different methods, one of them is using something called props.
Props allow us to pass the data we need from the parent component the same way you pass HTML attributes.
Defining and passing props
There's a special Vue function called defineProps()
This is the simplest way of which we can define a prop in our component. In this example, we defined a prop called name which we referenced in our template.
It can take an array of the props names to be defined or an object to also allow you to define more information about the props.
And then include the 3 main parts of any Vue component:
template, script, and style
And then include the 3 main parts of any Vue component:
template, script, and style
Defining and passing props
There's a special Vue function called defineProps()
This is the simplest way of which we can define a prop in our component. In this example, we defined a prop called name which we referenced in our template.
It can take an array of the props names to be defined or an object to also allow you to define more information about the props.
We can then pass a value to the prop whenever we reference our component this way:
As you can see, we pass the prop as if we pass a normal HTML attribute.
And then include the 3 main parts of any Vue component:
template, script, and style
And then include the 3 main parts of any Vue component:
template, script, and style
This is the simplest way of which we can define a prop in our component. In this example, we defined a prop called name which we referenced in our template.
We can then pass a value to the prop whenever we reference our component this way:
As you can see, we pass the prop as if we pass a normal HTML attribute.
And this is the rendered element.
We can take the step of defining a prop even one more step further, and add more information about each prop this way:
And then include the 3 main parts of any Vue component:
template, script, and style
And then include the 3 main parts of any Vue component:
template, script, and style
As you can see, we pass the prop as if we pass a normal HTML attribute.
And this is the rendered element.
We can take the step of defining a prop even one more step further, and add more information about each prop this way:
You can define the expected data type of your prop, so if you pass the wrong type, Vue will warn you.
You can also define if it's required. If it's true, Vue will warn you if you didn't pass a value.
If you set a default value, it'll be used if you didn't pass a value to the prop.
Passing data content to components:
Slots
Slots are a way for us to nest elements or components inside other components. It lets you do something like this:
Here we've nested a span element inside MyComponent, but how can MyComponent deal with it?
Passing data to components:
Slots
Slots are a way for us to nest elements or components inside other components. It lets you do something like this:
Here we've nested a span element inside MyComponent, but how can MyComponent deal with it?
This is where we should use slots:
Rendered output:
Docs Reference
Thank you
Overflow Vue Course - 2.2
By Mo Mansour
