Vue Ví dụ
Giới thiệu về Vue
Giải thích cơ bản về Vue Chỉ thị v-bind
Liên kết phần tử
v-bind Giải thích<div> với một lớp Liên kết phần tử <img> với một tệp hình ảnh Thay đổi kích thước phông chữ Thay đổi kích thước phông chữ theo cách khác Thay đổi kích thước phông chữ theo một cách khác Thay đổi màu nền Sử dụng v-bind và a Điều kiện JavaScript để thay đổi màu nền Liên kết phần tử <div> với một lớp Liên kết phần tử <div> với một lớp, có điều kiện Liên kết phần tử <div> với một lớp, có điều kiện, với thuộc tính dữ liệu Sử dụng v-bind Thay đổi độ mờ để hiển thị hình ảnh bằng cách sử dụng phần tử phạm vi đầu vào Chỉ định một lớp khi hình ảnh được tạo bằng v-for được nhấp vào Chúng tôi thấy rằng các quy tắc CSS được đặt với class và v-bind:class được hợp nhất Có thể đặt nhiều lớp bằng v-bind:class , với sự phân tách bằng dấu phẩy Các quy tắc CSS được xác định bằng v-bind:style , sử dụng cả ký hiệu kiểu lạc đà và kiểu kebab. Các lớp được gán bằng cú pháp mảng Chỉ thị v-if
Hiển thị văn bản có điều kiện, dựa trên thuộc tính dữ liệu Hiển thị văn bản có điều kiện, dựa trên so sánh Hiển thị văn bản có điều kiện, với
v-nếu giải thíchv-if , v-else-if và v-else Hiển thị thông báo nếu một văn bản nhất định chứa từ 'pizza' Hiển thị a tin nhắn và hình ảnh nếu một văn bản nhất định chứa từ 'pizza' Hiển thị các tin nhắn và hình ảnh khác nhau nếu một văn bản nhất định chứa từ 'pizza' hoặc 'burrito' Chỉ thị v-show
Hiển thị hoặc ẩn phần tử
v-show Giải thích<div> dựa trên thuộc tính dữ liệu Khám phá sự khác biệt giữa v-show và v-if Chỉ thị v-for
Kết xuất danh sách dựa trên một mảng Kết xuất hình ảnh dựa trên một mảng Kết xuất hình ảnh và văn bản dựa trên một mảng Nhận chỉ mục khi hiển thị văn bản dựa trên một mảng Nhận chỉ mục khi hiển thị văn bản dựa trên các đối tượng trong một mảng
v-để giải thích Chỉ thị v-on
Nhấp vào nút để tăng bộ đếm Nhấp vào nút để bật và tắt đèn Bộ đếm tăng mỗi khi đăng ký sự kiện nhập văn bản Màu nền ngẫu nhiên được tạo mỗi khi đăng ký sự kiện di chuyển con trỏ chuột Sự kiện nhấp chuột được thiết lập với
v-on Giải thíchv-on:click để tìm các phần tử được tạo bằng v-for Viết tắt v-on @ được sử dụngphương pháp
Một phương thức viết "Xin chào thế giới!" Một phương thức lấy vị trí con trỏ chuột từ đối tượng sự kiện Một phương thức thay đổi màu nền dựa trên vị trí con trỏ chuột Một phương thức ghi văn bản từ trường nhập vào hình ảnh của trang sổ tay Một phương thức được gọi với các giá trị đối số khác nhau khi nhấp vào các nút khác nhau Một phương thức được gọi với cả văn bản và đối tượng sự kiện làm đối số Nhiều nút gọi cùng một phương thức với các đối số khác nhau
Phương pháp giải thíchCông cụ sửa đổi sự kiện
Công cụ sửa đổi
Giải thích về công cụ sửa đổi sự kiện.once làm cho cảnh báo chỉ xuất hiện một lần khi nhấp vào nút Sự kiện bàn phím keydown gọi một phương thức ghi khóa vào màn hình Công cụ sửa đổi .s kích hoạt cảnh báo khi nhấn phím 'S' .s và .ctrl công cụ sửa đổi kích hoạt cảnh báo khi nhấn đồng thời phím 'S' và 'ctrl' Màu nền thay đổi khi nhấp chuột phải vào phần tử <div> Màu nền thay đổi khi nhấp chuột phải vào phần tử <div> khi nhấn phím 'ctrl' đã nhấn Menu thả xuống nhấp chuột phải bị ngăn chặn bằng công cụ sửa đổi .prevent Nhấp chuột trái sẽ thay đổi hình ảnh khi nhấn phím 'shift' Chỉ thị v-model
Các mặt hàng mua sắm mới có thể được thêm vào danh sách mua sắm bằng
v-mô hình Giải thíchv-model Khám phá tính năng liên kết hai chiều do v-model cung cấp Hộp kiểm thay đổi thuộc tính dữ liệu boolean Danh sách mua sắm Danh sách mua sắm trong đó các mặt hàng có thể được đánh dấu là đã tìm thấy Đơn đặt hàng nhà hàng động form Chọn con vật yêu thích bằng nút radio, <input type="radio"> Chọn thức ăn bạn thích bằng hộp kiểm, <input type="checkbox"> Chọn ô tô từ danh sách thả xuống, <select> Chọn nhiều ô tô, <select multiple> Chỉ đọc biểu mẫu nhập vào, <input type="file"> Đăng ký chiều cao, <input type="range"> Chọn màu, <input type="color"> Viết đánh giá sản phẩm, <textarea>Thuộc tính được tính toán
Một hộp kiểm được tạo động để văn bản phản ánh trạng thái hiện tại. Văn bản trạng thái hộp kiểm hiện tại là 'có' hoặc 'không'
Giải thích thuộc tính tính toánNgười theo dõi
Trình theo dõi được sử dụng để không thể chọn các giá trị từ 20 đến 60. Trình theo dõi lấy giá trị mới và cũ làm đối số đầu vào. Giá trị mới và cũ được sử dụng để xác nhận địa chỉ email chính xác
Người theo dõi giải thíchMẫu
Giải thích mẫuTrang SFC
Giải thích về các trang SFCCác thành phần
Một thành phần được sử dụng ba lần Mỗi thành phần có bộ đếm riêng Các thành phần có props được tạo bằng
Giải thích các thành phầnv-for Các thành phần có props được tạo bằng v-for và thuộc tính key Ví dụ bị lỗi này chứng tỏ rằng thuộc tính key là cần thiết. Ví dụ này chứng minh rằng key thuộc tính có thể khắc phục vấn đềđạo cụ
Đạo cụ được xác định trong thành phần, dưới dạng một mảng Hai thuộc tính prop được xác định trong thành phần Một prop boolean được sử dụng để xác định xem một món ăn có được yêu thích hay không Tùy chọn cấu hình đạo cụ được định nghĩa là một đối tượng Thuộc tính dữ liệu 'foodIsFavorite' có thể là chuyển đổi bằng một nút
Đạo cụ giải thíchphát ra
Thành phần này phát ra trạng thái yêu thích boolean. Trạng thái yêu thích boolean được phát ra được App.vue nhận. Trạng thái yêu thích boolean được phát ra được nhận và cập nhật trong App.vue
Phát ra giải thíchThuộc tính dự phòng
Thuộc tính
Giải thích về thuộc tính dự phòngstyle rơi vào thành phần Thuộc tính style rơi vào thành phần và được hợp nhất với kiểu dáng nội tuyến Đối tượng $attrs được sử dụng để xác định vị trí của các thuộc tính dự phòngTạo kiểu theo phạm vi
Kiểu được xác định là toàn cục trừ khi được xác định khác Kiểu được xác định là cục bộ, với thuộc tính
Giải thích về kiểu dáng theo phạm viscopedThành phần cục bộ
Các thành phần được xác định trong main.js có sẵn trên toàn cầu Các thành phần có thể được xác định bên trong một thành phần khác để chỉ có sẵn cục bộ
Giải thích các thành phần cục bộMáy đánh bạc
"Chào thế giới!" được nhận bên trong một khe của thành phần Một khe của thành phần được sử dụng để tạo một gói giống như thẻ Một khe của các thành phần được sử dụng để tạo một gói giống như thẻ khác Một khe được sử dụng với nội dung dự phòng Hai khe được sử dụng trong cùng một thành phần . được đặt tên để hướng nội dung đến đúng vị trí Nếu một vị trí không có tên thì đó sẽ là vị trí mặc định Một vị trí được xác định rõ ràng là vị trí mặc định Lệnh
Giải thích về Slotsv-slot được sử dụng để hướng nội dung đến một vị trí cụ thể Viết tắt v-slot là # Nhận dữ liệu từ một vị trí có phạm vi Các vị trí có phạm vi được tạo bằng v-for gửi dữ liệu đến cha mẹ của nó Các vị trí có phạm vi được tạo từ một mảng đối tượng gửi dữ liệu đến cha mẹ của nó Một văn bản được gửi từ một vị trí có phạm vi mà không có chỉ thị v-bind Các vị trí có phạm vi là Các vị trí có phạm vi được đặt tên gửi dữ liệu khác nhau đến App.vue.Thành phần động
App.vue chuyển đổi giữa thành phần nào sẽ hiển thị Nếu không có thành phần
Giải thích về thành phần động<KeepAlive> thì các thành phần không được lưu vào bộ nhớ đệm Thành phần <KeepAlive> lưu vào bộ nhớ đệm các thành phần Chỉ thành phần được chỉ định mới được lưu vào bộ đệm với mã <KeepAlive include="CompOne"> Thành phần được chỉ định KHÔNG được lưu vào bộ đệm với mã <KeepAlive exclude="CompOne"> Hai thành phần được chỉ định để được lưu vào bộ đệm với thành phần <KeepAlive> Hai thành phần được truy cập cuối cùng được chỉ định để được lưu vào bộ đệm với thành phần <KeepAlive>Dịch chuyển tức thời
Phần tử
Giải thích dịch chuyển tức thời<div> được di chuyển đến thư mục gốc của phần tử <body> trong kiểu dáng Phạm vi DOM và tập lệnh vẫn hoạt động đối với phần tử <div> được dịch chuyển tức thờiYêu cầu HTTP
Một yêu cầu GET được gửi cho một tệp văn bản và một đối tượng lời hứa được nhận Một yêu cầu GET được gửi cho một tệp văn bản và một đối tượng phản hồi được nhận Một yêu cầu GET được gửi cho một tệp văn bản và tệp thực tế được nhận một GET yêu cầu được gửi cho tệp JSON và thông tin về động vật có vú trên cạn lớn được nhận. Yêu cầu GET được gửi cho tệp JSON và một động vật có vú trên cạn ngẫu nhiên được hiển thị Một người dùng ngẫu nhiên được tìm nạp từ API ngẫu nhiên-data-api.com A người dùng ngẫu nhiên được tìm nạp từ API Random-data-api.com và hiển thị với tiêu đề, tên và hình ảnh Một người dùng ngẫu nhiên được tìm nạp từ API Random-data-api.com bằng thư viện axios
Giải thích về yêu cầu HTTPTham chiếu mẫu
Đối tượng
Giải thích về giới thiệu mẫu$refs được sử dụng để thay thế văn bản trong phần tử <p> Đối tượng $refs được sử dụng để thay thế văn bản từ phần tử <p> này sang phần tử khác Đối tượng $refs được sử dụng để đặt giá trị từ phần tử <input> vào một Phần tử <p> Các phần tử <li> có thuộc tính ref, được tạo bằng v-for , được thu thập trong đối tượng $refs dưới dạng một mảngMóc vòng đời
Móc vòng đời
Giải thích về móc vòng đờibeforeCreate Móc vòng đời created Móc vòng đời beforeMount Móc vòng đời mounted Móc vòng đời được mounted được sử dụng để đặt con trỏ bên trong phần tử <input> Móc vòng đời beforeUpdate Móc vòng đời updated Móc vòng đời được updated tạo ra một vòng lặp vô hạn beforeUnmount móc vòng đời Móc vòng đời unmounted Móc vòng đời errorCaptured Móc vòng đời errorCaptured lấy thông tin về lỗi Móc vòng đời renderTracked Móc vòng đời activated Móc vòng đời activated , deactivated và các móc vòng đời khácCung cấp/Tiêm
Cung cấp/Tiêm Giải thíchLộ trình
Các thành phần được chuyển đổi giữa việc sử dụng thành phần động Các thành phần được chuyển đổi giữa việc sử dụng định tuyến
Giải thích định tuyếnHoạt hình
Phần tử
Giải thích hoạt hình<div> được xoay bằng thuộc tính CSS transition Một phần tử <div> hình tròn nảy từ trái sang phải với thuộc tính CSS @keyframes Phần tử <p> được chuyển đổi bằng nút Một phần tử <p> bên trong <Transition> thành phần mờ dần khi bị xóa. Phần tử <p> trượt vào và ra khi được bật. Phần tử <p> có màu nền riêng biệt trong khi các phần tử 'enter' và 'leave' <p> được tạo hoạt ảnh khác nhau, sử dụng name prop để phân biệt các thành phần <Transition> Sự kiện after-enter sẽ kích hoạt phần tử <div> được hiển thị Nút chuyển đổi kích hoạt sự kiện enter-cancelled Sự kiện appear bắt đầu hoạt ảnh phần tử <p> ngay sau khi trang được tải Lật qua các hình ảnh có hoạt ảnh vào 'nhập' và 'rời'. Một hình ảnh mới được thêm vào trước khi hình ảnh cũ bị xóa Lật qua các hình ảnh có hoạt ảnh khi 'nhập' và 'rời'. mode="out-in" ngăn hình ảnh mới được thêm vào cho đến khi hình ảnh cũ bị xóa Chuyển đổi giữa các thành phần là hoạt hình Hoạt ảnh với v-for
Các mục danh sách mới được thêm vào danh sách được hiển thị bằng
Hoạt ảnh với v-for Giải thíchv-for , sử dụng <TransitionGroup> Xúc xắc có thể được thêm hoặc xóa, xúc xắc được thêm sẽ hoạt hình bằng cách sử dụng <TransitionGroup> Xúc xắc có thể được thêm hoặc xóa, cả xúc xắc được thêm và xóa đều được tạo hoạt ảnh bằng <TransitionGroup> Xúc xắc có thể được thêm, xóa, xáo trộn hoặc sắp xếp, tất cả đều hoạt hình bằng cách sử dụng <TransitionGroup>API thành phần
Được viết bằng API thành phần: Có thể giảm số lượng bộ nhớ của máy đánh chữ bằng cách nhấp vào nút Viết bằng API tùy chọn: Có thể giảm số lượng bộ nhớ của máy đánh chữ bằng cách nhấp vào nút
Giải thích về API Thành phần