Bắt đầu với Chuyển đổi thành phần trong Vue
Khi ta xây dựng các ứng dụng, ta muốn làm cho chúng trực quan cho user . Ta muốn user của bạn có trải nghiệm mượt mà khi sử dụng nó và cảm thấy ứng dụng của ta trôi chảy từ điểm này sang điểm khác, thay vì chỉ nhảy giữa các màn hình.
Nếu ta chuyển đổi các thành phần mà không có quá trình chuyển tiếp, ta sẽ thấy sự thay đổi rõ rệt mỗi khi một thành phần mới được gọi lên. Điều này không lý tưởng và có thể dẫn đến việc user của ta có trải nghiệm kém với ứng dụng của ta .
Trong hướng dẫn này, bạn sẽ học cách cải thiện stream ứng dụng của bạn bằng cách sử dụng chuyển đổi thành phần trong Vue.
Yêu cầu
- Vue CLI 3 để cài đặt Vue
- Kiến thức về JavaScript
- Kiến thức về Vue.js
Cài đặt ứng dụng của ta
Để bắt đầu, hãy tạo một ứng dụng Vue. Chạy lệnh sau:
- vue create component-transitions
- cd component-transitions
Sau khi hoàn tất việc tạo ứng dụng, bạn cần xác định một thành phần mà bạn sẽ sử dụng cho quá trình chuyển đổi.
Cập nhật thành phần ứng dụng
Khi ta tạo một ứng dụng Vue mới, CLI sẽ tạo một file App.vue bên trong folder ./src . Mở file và cập nhật phần style như sau:
[...] <style> [...] h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> Ta đã tạo ra các phong cách global mà ta muốn chia sẻ trên tất cả các thành phần của bạn . Bằng cách này, bạn sẽ không phải thêm lại các kiểu cho mỗi thành phần.
Cập nhật thành phần HelloWorld
Ứng dụng Vue của ta cũng đi kèm với file HelloWorld.vue nằm trong folder ./src/components . Mở file và chỉnh sửa như sau:
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String } } </script> Tạo thành phần Giới thiệu
Ta sẽ tạo một thành phần mới About.vue bên trong folder ./src/components . Mở file và thêm thông tin sau:
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'About', props: { msg: String } } </script> Tạo một thành phần khác
Ta sẽ tạo một thành phần Extra.vue bên trong folder ./src/components . Mở file và thêm thông tin sau:
<template> <div> <h1>{{ intro }}</h1> </div> </template> <script> export default { name: 'Extra', props: { msg: String }, data(){ return { intro : "Extra" } }, watch: { msg : { immediate: true, handler(val, oldval) { // } } } } </script> Đối với thành phần bổ sung của ta , ta đã thêm một phương thức đồng hồ để theo dõi các cập nhật cho msg prop. Khi thông báo hỗ trợ cập nhật, ta muốn cập nhật thuộc tính intro .
Ta đã xác định nó theo cách này để cho phép ta sử dụng chuyển tiếp trên thành phần.
Kết xuất các thành phần của ta
Vue cung cấp nhiều cách khác nhau để áp dụng các hiệu ứng chuyển tiếp khi các mục trong một thành phần được cập nhật hoặc khi bản thân các thành phần được thay đổi. Nó bao gồm việc áp dụng các lớp CSS cho chuyển tiếp và hoạt ảnh đến sử dụng thư viện JavaScript của bên thứ ba cho các hiệu ứng chuyển tiếp.
Tập hợp các chuyển đổi đầu tiên mà bạn sẽ xác định sẽ là thay đổi các thành phần. Bạn sẽ sử dụng kết xuất có điều kiện để hiển thị các thành phần ta đã tạo và áp dụng chuyển đổi khi chúng kết xuất.
Nhập các thành phần
Ta cần nhập các thành phần mà ta đã tạo vào thành phần App.vue của ta . Mở file và chỉnh sửa như sau:
[...] <script> import HelloWorld from './components/HelloWorld.vue' import About from './components/About.vue' import Extra from './components/Extra.vue' export default { name: 'app', components: { HelloWorld, About, Extra } } </script> Sử dụng các thành phần
Bây giờ ta đã nhập các thành phần, hãy để ta sử dụng nó trong thành phần App . Chỉnh sửa file App.vue như sau:
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld msg="Welcome to your Vue.js application"/> <Extra :msg="extra"/> <About msg="This is the About page"/> <button @click="changeExtra">Update Extra</button> </div> </template> Ta định nghĩa một hàm changeExtra để nghe cho các nhấp chuột vào nút và cũng ràng buộc các msg prop cho Extra thành phần để extra thuộc tính. Bây giờ, hãy tạo extra thuộc tính và phương thức changeExtra . Bạn sẽ chỉ để logo Vue.js ở đó để trang không cảm thấy trống rỗng?
Chỉnh sửa file như sau:
[...] export default { name: 'app', components: { HelloWorld, About, Extra }, data(){ return { extra : "Extra" } }, methods : { changeExtra(){ this.extra = "This is extra" } }, } [...] Xác định các liên kết cho các thành phần chuyển đổi
Ta sẽ hiển thị từng thành phần một. Để làm điều này, bạn sẽ có một tập hợp các liên kết cho phép ta nêu rõ thành phần nào sẽ sử dụng tại một thời điểm nhất định.
Mở file App.vue và thêm file sau:
<template> <div id="app"> [...] <div> <ul> <li @click="showHome">Home</li> <li @click="showAbout">About</li> <li @click="showExtra">Extra</li> </ul> </div> </div> </template> Sau đó, thêm các phương pháp ta đã sử dụng ở trên:
[...] methods : { [...] showHome(){ this.displayHome = true this.displayAbout = false this.displayExtra = false }, showAbout(){ this.displayHome = false this.displayAbout = true this.displayExtra = false }, showExtra(){ this.displayHome = false this.displayAbout = false this.displayExtra = true } }, [...] Cuối cùng, ta xác định các thuộc tính - displayHome , displayAbout , displayExtra .
[...] data(){ return { extra : "Extra", displayHome : true, displayAbout : false, displayExtra : false } }, [...] Ta đặt displayHome thành true để khi nào ta tải ứng dụng của bạn , ứng dụng sẽ hiển thị đầu tiên. Phần còn lại là sai nên chúng không hiển thị.
Kết xuất có điều kiện của các thành phần của ta
Bây giờ ta đã xác định các liên kết để hiển thị các thành phần của ta , hãy kết xuất chúng dựa trên các điều kiện nhất định.
Vẫn trong file App.vue , hãy chỉnh sửa nó như sau:
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld msg="Welcome to your Vue.js application" v-if="displayHome"/> <About msg="This is the About page" v-if="displayAbout"/> <div v-if="displayExtra"> <Extra :msg="extra"/> <button @click="changeExtra">Update Extra</button> </div> [...] </div> </template> Vì vậy, ta đã kết xuất hoàn toàn tất cả các thành phần của bạn , bây giờ ta có thể thêm các chuyển đổi vào đó.
Xác định chuyển đổi khi thay đổi dữ liệu
Bạn sẽ sửa đổi thành phần Extra . Ta muốn thêm hiệu ứng chuyển tiếp khi ta cập nhật dữ liệu bên trong nó. Mở file Extra.vue trong folder ./src/components/ và chỉnh sửa như sau:
<template> <div> <transition name="fade"> <h1 v-if="!msg">{{ intro }}</h1> </transition> <transition name="fade"> <h1 v-if="msg">{{ msg }}</h1> </transition> </div> </template> [...] <style scoped> .fade-enter-active{ transition: opacity 1.5s; } .fade-leave-active { opacity: 0; } .fade-enter, .fade-leave-to { opacity: 0; } </style> Khi bạn nhấp vào nút Update Extra , bạn sẽ thấy một chuyển đổi slide mờ dần xảy ra. Sự chuyển đổi này rất đáng chú ý, vì vậy user của ta có thể sẽ nhìn thấy nó.
Ta có thể đạt được sự chuyển đổi bằng cách bao bọc phần tử của ta trong phần tử chuyển tiếp Vue và sau đó xác định hiệu ứng mà ta muốn phần tử chuyển tiếp sử dụng. Trong trường hợp của ta , ta đã sử dụng opacity để làm cho thành phần xuất hiện và biến mất.
Lưu ý : Đối với chuyển đổi thay đổi dữ liệu, bạn có thể cần sử dụng chuyển đổi trạng thái vì nó cung cấp trải nghiệm mạnh mẽ hơn. Đọc thêm về Chuyển đổi trạng thái .
Vue cung cấp các hook ở các giai đoạn khác nhau của chu kỳ chuyển đổi mà ta có thể kết nối và xác định cách ta muốn quá trình chuyển đổi diễn ra. Tôi đã thêm một hình ảnh bên dưới từ trang web Vue.js để minh họa điều này:
v đại diện cho tên của quá trình chuyển đổi của ta . Trong trường hợp của thành phần Extra , ta thay thế v bằng fade để có fade-enter thay cho v-enter , v.v.
Xác định chuyển đổi khi thay đổi thành phần
Xác định quá trình chuyển đổi trên thành phần HelloWorld
Bây giờ, đến thành phần App , nơi bạn sẽ khám phá các cách khác nhau để thực hiện chuyển đổi. Hãy xác định quá trình chuyển đổi trên thành phần HelloWorld . Mở file App.vue và chỉnh sửa như sau:
<transition name="welcome"> <HelloWorld msg="Welcome to your Vue.js application" v-if="displayHome"/> </transition> Quá trình chuyển đổi của ta sẽ được đặt tên là “chào mừng”. Bây giờ, hãy thêm các lớp chuyển tiếp để có được hiệu ứng mong muốn của bạn:
<style scoped> /* Welcome Styles */ .welcome-enter { transform: translateX(10px); opacity: 0; } .welcome-enter-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .welcome-leave-active, .welcome-leave-to { opacity: 0; } </style> Bây giờ, mỗi khi ta nhấp vào liên kết Home , sẽ có một chút rung lắc ? như thành phần của ta hiển thị.
Ta cũng tạo một phần tử style mới và thêm 'phạm vi' vào nó.
Xác định quá trình chuyển đổi trên thành phần giới thiệu
Bạn sẽ thực hiện một bước tương tự với những gì ta đã làm cho thành phần HelloWorld . Mở file và thêm thông tin sau:
[...] <transition name="about"> <About msg="This is the About page" v-if="displayAbout"/> </transition> [...] Sau đó, thêm hiệu ứng chuyển tiếp:
<style scoped> [...] /* About Styles */ .about-enter { width: 30%; opacity: 0; } .about-enter-active { transition: all 2s ease-in-out; } .about-leave-active, .about-leave-to { opacity: 0; } .about-enter-to { width:100%; opacity: 1; margin-left: auto; } </style> Xác định quá trình chuyển đổi trên thành phần phụ
Cuối cùng, hãy thêm một chuyển đổi để nhập và thoát thành phần bổ sung:
[...] <transition name="extra"> <div v-if="displayExtra"> <Extra :msg="extra"/> <button @click="changeExtra">Update Extra</button> </div> </transition> [...] Sau đó, thêm các kiểu cho quá trình chuyển đổi:
<style scoped> [...] /* Extra Styes */ .extra-enter { transform: translateX(-200px); opacity: 0; } .extra-enter-to { transform: translateX(0px); } .extra-enter-active { transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .extra-leave-active, .extra-leave-to { opacity: 0; } </style> Và đó là nó cho quá trình chuyển đổi thành phần.
Chạy ứng dụng
Bây giờ ta đã hoàn tất việc xác định chuyển tiếp cho các thành phần khác nhau của bạn , hãy chạy ứng dụng và xem nó trông như thế nào.
Từ terminal của bạn, hãy chạy lệnh sau:
- npm run serve
Sau đó truy cập ứng dụng trên url hiện ra.
Kết luận
Ta đã xem xét các chuyển đổi thành phần vue trong hướng dẫn này. Ta đã học cách thêm chuyển tiếp vào ứng dụng của bạn , mặc dù bạn có thể cần sử dụng ít chuyển tiếp như vậy hơn trong ứng dụng thực.
Cố gắng sử dụng các chuyển tiếp CSS khác nhau cho các thành phần của bạn và xem bạn có thể nghĩ ra điều gì.
Các tin liên quan
