#2 Create a Notification Message Component
This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far.
In this component exercise, we're going to build a fun and useful component that is a notification message.
In the exercise, we'll be using Semantic UI, we'll specifically use the message element. We've prepared a boilerplate as a starting point for the exercise.
Your goal is to create a component that will be passed some content (the message) and the type of notification (info, error, success). The user should also be able to close the notification.
We encourage you to go back and rewatch videos if you're stuck, but if want to, you can peak at the solution.
Good luck and have fun!
Important Note
Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN.
<script src="https://unpkg.com/vue@2"></script>
LESSON TRANSCRIPT
Σε αυτό το εξάσκημα, θα δημιουργήσουμε ένα ενδιαφέρον και χρησιμοποιημένο κομπονέτο που είναι ένα σημαντικό μήνυμα. Έχω γράψει ένα σημαντικό μήνυμα από τα docks του Semantic UI και το βάζω στο σημαντικό μήνυμα που θα δημιουργήσουμε. Αυτή είναι η σημαντικότητα που βλέπουμε στο μπροσό. Σεμαντικό δίνει μας με τέτοιες τυπικές μήνυμα.
Το Info, το Warning, το Error και το Succes. Λοιπόν, αν χτυπήσουμε το InfoKlass με το Error, για παράδειγμα, θα δημιουργήσουμε αυτό το Το σκοπό σας για αυτό το εξάστασμα είναι να δημιουργήσετε ένα κομπονέτο που θα είναι πάνω από κάποιο καθημεριστήριο και το τύπο της σχέσης και θα δημιουργήσει ένα μήνυμα όπως αυτό. Για παράδειγμα, πρέπει να μπορούμε να χρησιμοποιήσουμε το κομπονέτο μας όπως αυτό. Now, for the content of the notification we could use a prop but that can be limiting.
On the other hand, Εάν χρησιμοποιήσαμε ένα σλότ και περνάμε το καθημεριστικό στο μήνυμα, μπορούμε εύκολα να φορματήσουμε ένα μέρος του τεξίου ή να προσθέσουμε ένα λινκ, διότι περνάμε html στο κομπονέτο δηλαδή. Όπως μπορείτε να περιμένετε, οι καθημεριστικές θα πρέπει να φύγουν αυτοί όταν ο χρησιμοποιητής παίξει το X button. Εντάξει, είναι η ώρα για εσάς να γράψετε κάποια κομμάτια. Παστήστε το βίντεο και έρθετε μετά όταν είστε ετοιμασμένοι.
Όπως έκαναμε στην προηγούμενη Έχουμε ένα προβλήμα για να δημιουργήσουμε τον τρόπο της σχέσης, ο οποίος θα είναι ο τρόπος της σχέσης. Επίσης, χρειαζόμαστε να δημιουργήσουμε το κεφάλι που είναι το τίτλο της σχέσης που βλέπουμε εδώ. Αυτό είναι επίσης ο τρόπος της σχέσης. Ας ξεκινήσουμε τώρα το τεμπλίδι.
Έχω αυτό το σκρήπτο που έχει δημιουργήσει, ο οποίος έχουμε να κάνουμε είναι να μεταξύσουμε αυτό το μέρος μέσα στο σκρήπτο μας. Λοιπόν, εδώ λέμε UIErrorMessage, αλλά δεν θέλουμε αυτό να είναι στατικό. Επομένως, τι θέλουμε να κάνουμε είναι να χρησιμοποιήσουμε τον τυπ που έχουμε από την οικογένεια. Για να το κάνουμε, θα ασφαλίσουμε τον κλάσσο στον τυπ.
Στην επόμενη, ας δημιουργήσουμε τον χέντερ. Τελικά, πρέπει να δημιουργήσουμε τον κοινό του σλότ, χρησιμοποιώντας τον σλότ. Ας δούμε τι έχουμε τώρα. Ω, όχι, η δημιουργία σας έχει μεταξύψει.
Αυτό είναι ωραίο. Ας δώσουμε επίσης ένα άλλο σχέδιο του τυπ ΣΥΞΕΣ, ώστε να μπορούμε να δούμε ότι όλα δημι Ας οδηγήσουμε την οδηγία του Close. Θέλουμε να δούμε ένα μέθοδο όταν ο χειρότητας κλείσει το κλείσμα. Θα χρησιμοποιήσουμε Beyond.
Κλικ. Ας οδηγήσουμε αυτό το μέθοδο Hide. Για να κρατήσουμε το στάτος της οδηγίας της σχέσης, θα προσπαθήσω να προσπαθήσω το Data property, που θα οδηγήσω Hidden. Αρχικά, το Hidden property θα είναι φοβό.
Τώρα, όταν ο χειρότητας κλείσει το X, το Hide θα λειτουργεί και θα προσπαθήσει την οδηγία της σχέσης. με το σημαντικό δίκτυο στον αλήθεια. Οπότε, αυτός που υπάρχει είναι να εφαρμόζουμε ένα VIF στο βασίλειο του βασίλειου, ώστε να δημιουργήσουμε το σημαντικό δίκτυο χωρίς το σημαντικό βασίλειο. Εντάξει.
Ας δώσουμε ένα σημαντικό. Ωραίο! Και με αυτό το σημαντικό δίκτυο είναι έτοιμο. Τώρα, αυτό είναι ωραίο, αλλά μπορούμε επίσης να δημιουργήσουμε ένα σημαντικό δίκτυο, όπου θα χρειαστεί να περάσουμε το κόντεκτο, όπως αυτό.
Μπορούμε να which can be the info and then we can set the default header that can be information or hello. Let's give it a refresh and see what we get. This is awesome but I want to make this uppercase. Good job!
Σε αυτό το εξάσκημα, θα δημιουργήσουμε ένα ενδιαφέρον και χρησιμοποιημένο κομπονέτο που είναι ένα σημαντικό μήνυμα. Έχω γράψει ένα σημαντικό μήνυμα από τα docks του Semantic UI και το βάζω στο σημαντικό μήνυμα που θα δημιουργήσουμε. Αυτή είναι η σημαντικότητα που βλέπουμε στο μπροσό. Σεμαντικό δίνει μας με τέτοιες τυπικές μήνυμα.
Το Info, το Warning, το Error και το Succes. Λοιπόν, αν χτυπήσουμε το InfoKlass με το Error, για παράδειγμα, θα δημιουργήσουμε αυτό το Το σκοπό σας για αυτό το εξάστασμα είναι να δημιουργήσετε ένα κομπονέτο που θα είναι πάνω από κάποιο καθημεριστήριο και το τύπο της σχέσης και θα δημιουργήσει ένα μήνυμα όπως αυτό. Για παράδειγμα, πρέπει να μπορούμε να χρησιμοποιήσουμε το κομπονέτο μας όπως αυτό. Now, for the content of the notification we could use a prop but that can be limiting.
On the other hand, Εάν χρησιμοποιήσαμε ένα σλότ και περνάμε το καθημεριστικό στο μήνυμα, μπορούμε εύκολα να φορματήσουμε ένα μέρος του τεξίου ή να προσθέσουμε ένα λινκ, διότι περνάμε html στο κομπονέτο δηλαδή. Όπως μπορείτε να περιμένετε, οι καθημεριστικές θα πρέπει να φύγουν αυτοί όταν ο χρησιμοποιητής παίξει το X button. Εντάξει, είναι η ώρα για εσάς να γράψετε κάποια κομμάτια. Παστήστε το βίντεο και έρθετε μετά όταν είστε ετοιμασμένοι.
Όπως έκαναμε στην προηγούμενη Έχουμε ένα προβλήμα για να δημιουργήσουμε τον τρόπο της σχέσης, ο οποίος θα είναι ο τρόπος της σχέσης. Επίσης, χρειαζόμαστε να δημιουργήσουμε το κεφάλι που είναι το τίτλο της σχέσης που βλέπουμε εδώ. Αυτό είναι επίσης ο τρόπος της σχέσης. Ας ξεκινήσουμε τώρα το τεμπλίδι.
Έχω αυτό το σκρήπτο που έχει δημιουργήσει, ο οποίος έχουμε να κάνουμε είναι να μεταξύσουμε αυτό το μέρος μέσα στο σκρήπτο μας. Λοιπόν, εδώ λέμε UIErrorMessage, αλλά δεν θέλουμε αυτό να είναι στατικό. Επομένως, τι θέλουμε να κάνουμε είναι να χρησιμοποιήσουμε τον τυπ που έχουμε από την οικογένεια. Για να το κάνουμε, θα ασφαλίσουμε τον κλάσσο στον τυπ.
Στην επόμενη, ας δημιουργήσουμε τον χέντερ. Τελικά, πρέπει να δημιουργήσουμε τον κοινό του σλότ, χρησιμοποιώντας τον σλότ. Ας δούμε τι έχουμε τώρα. Ω, όχι, η δημιουργία σας έχει μεταξύψει.
Αυτό είναι ωραίο. Ας δώσουμε επίσης ένα άλλο σχέδιο του τυπ ΣΥΞΕΣ, ώστε να μπορούμε να δούμε ότι όλα δημι Ας οδηγήσουμε την οδηγία του Close. Θέλουμε να δούμε ένα μέθοδο όταν ο χειρότητας κλείσει το κλείσμα. Θα χρησιμοποιήσουμε Beyond.
Κλικ. Ας οδηγήσουμε αυτό το μέθοδο Hide. Για να κρατήσουμε το στάτος της οδηγίας της σχέσης, θα προσπαθήσω να προσπαθήσω το Data property, που θα οδηγήσω Hidden. Αρχικά, το Hidden property θα είναι φοβό.
Τώρα, όταν ο χειρότητας κλείσει το X, το Hide θα λειτουργεί και θα προσπαθήσει την οδηγία της σχέσης. με το σημαντικό δίκτυο στον αλήθεια. Οπότε, αυτός που υπάρχει είναι να εφαρμόζουμε ένα VIF στο βασίλειο του βασίλειου, ώστε να δημιουργήσουμε το σημαντικό δίκτυο χωρίς το σημαντικό βασίλειο. Εντάξει.
Ας δώσουμε ένα σημαντικό. Ωραίο! Και με αυτό το σημαντικό δίκτυο είναι έτοιμο. Τώρα, αυτό είναι ωραίο, αλλά μπορούμε επίσης να δημιουργήσουμε ένα σημαντικό δίκτυο, όπου θα χρειαστεί να περάσουμε το κόντεκτο, όπως αυτό.
Μπορούμε να which can be the info and then we can set the default header that can be information or hello. Let's give it a refresh and see what we get. This is awesome but I want to make this uppercase. Good job!
This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.
