Xây dựng các biểu mẫu phức tạp trong Vue

[theanh]

Thông thường, các kỹ sư web luôn có lý do để xây dựng các biểu mẫu, từ đơn giản đến phức tạp. Đây cũng là một nỗi đau quen thuộc đối với các kỹ sư khi các cơ sở mã trở nên cực kỳ lộn xộn và dài dòng một cách bất hợp lý khi xây dựng các biểu mẫu lớn và phức tạp. Do đó, câu hỏi đặt ra là "Làm thế nào để tối ưu hóa điều này?".

Hãy xem xét một kịch bản kinh doanh mà chúng ta cần xây dựng danh sách chờ ghi lại tên và email. Kịch bản này chỉ yêu cầu hai/ba trường nhập liệu, tùy từng trường hợp, và có thể được thêm vào nhanh chóng mà không gặp nhiều rắc rối. Bây giờ, chúng ta hãy xem xét một kịch bản kinh doanh khác mà người dùng cần điền vào một biểu mẫu có mười trường nhập liệu trong 5 phần. Viết 50 trường nhập liệu không chỉ là công việc mệt mỏi đối với Kỹ sư mà còn lãng phí thời gian kỹ thuật tuyệt vời. Hơn nữa, nó đi ngược lại nguyên tắc khét tiếng “Đừng lặp lại chính mình” (DRY).

Trong bài viết này, chúng ta sẽ tập trung vào việc học cách sử dụng các thành phần Vue, chỉ thị v-model và các props Vue để xây dựng các biểu mẫu phức tạp trong Vue.

Chỉ thị v-model trong Vue​

Vue có một số thuộc tính HTML duy nhất được gọi là chỉ thị, được thêm tiền tố v-. Các chỉ thị này thực hiện các chức năng khác nhau, từ hiển thị dữ liệu trong DOM đến thao tác dữ liệu.

v-model là một trong những chỉ thị như vậy và chịu trách nhiệm liên kết dữ liệu hai chiều giữa giá trị đầu vào của biểu mẫu và giá trị được lưu trữ trong thuộc tính data. v-model hoạt động với bất kỳ phần tử đầu vào nào, chẳng hạn như các phần tử input hoặc select. Bên trong, nó kết hợp giá trị đầu vào đã nhập và trình lắng nghe sự kiện thay đổi tương ứng như sau:

 Vui lòng chọn tùy chọn đúng A B C

Sự kiện input được sử dụng cho phần tử . Tương tự như vậy, đối với … , và , v-model sẽ lần lượt khớp các giá trị với sự kiện change.

Thành phần trong Vue​

Khả năng tái sử dụng là một trong những nguyên tắc cốt lõi của Kỹ thuật phần mềm, nhấn mạnh vào việc sử dụng các tính năng hoặc tài sản phần mềm hiện có trong một dự án phần mềm vì nhiều lý do, từ việc giảm thiểu thời gian phát triển đến tiết kiệm chi phí.

Một trong những cách chúng ta quan sát khả năng tái sử dụng trong Vue là thông qua việc sử dụng các thành phần. Các thành phần Vue là các giao diện có thể tái sử dụng và mô-đun với logic và nội dung tùy chỉnh riêng. Mặc dù chúng có thể được lồng vào nhau như một phần tử HTML thông thường, chúng cũng có thể hoạt động riêng lẻ.

Các thành phần Vue có thể được xây dựng theo hai cách như sau:

• Không có bước xây dựng,
• Có bước xây dựng.

Không có bước xây dựng​

Các thành phần Vue có thể được tạo mà không cần sử dụng Giao diện dòng lệnh Vue (CLI). Phương pháp tạo thành phần này định nghĩa một đối tượng JavaScript trong thuộc tính tùy chọn của phiên bản Vue. Trong khối mã bên dưới, chúng tôi đã nhúng một chuỗi JavaScript mà Vue phân tích cú pháp ngay lập tức.

template: ` 
 Thành phần Vue không có bước xây dựng 
 `

Với Bước Xây dựng​

Việc tạo các thành phần bằng bước xây dựng liên quan đến việc sử dụng Vite — một công cụ xây dựng cực nhanh và nhẹ. Sử dụng bước xây dựng để tạo thành phần Vue tạo ra Thành phần Tệp Đơn (SFC), vì nó có thể đáp ứng logic, nội dung và kiểu dáng của tệp.

 Thành phần Vue với bước xây dựng

Trong đoạn mã trên, chúng ta có thẻ trong thẻ HTML, được hiển thị khi chúng ta sử dụng bước xây dựng cho ứng dụng.

Đăng ký Vue Components​

Tạo Vue component là bước đầu tiên của khả năng tái sử dụng và tính mô-đun trong Vue. Tiếp theo là đăng ký và sử dụng thực tế Vue component đã tạo.

Vue components cho phép lồng các thành phần bên trong các thành phần và thậm chí còn hơn thế nữa, lồng các thành phần bên trong một thành phần toàn cục hoặc thành phần cha.

Hãy xem xét rằng chúng ta đã lưu trữ thành phần mà chúng ta đã tạo bằng bước xây dựng trong tệp BuildStep.vue. Để thành phần này có thể sử dụng, chúng ta sẽ nhập thành phần đó vào một thành phần Vue khác hoặc .vue, chẳng hạn như tệp mục nhập gốc. Sau khi nhập thành phần này, chúng ta có thể đăng ký tên thành phần trong thuộc tính tùy chọn components, do đó, thành phần có thể sử dụng dưới dạng thẻ HTML. Trong khi thẻ HTML này sẽ có tên tùy chỉnh, thì công cụ Vue sẽ phân tích cú pháp chúng thành HTML hợp lệ và hiển thị chúng thành công trong trình duyệt.

   import BuildStep from './BuildStep.vue'export default { components: { BuildStep }}

Từ những điều trên, chúng ta đã import thành phần BuildStep.vue vào tệp App.vue, đăng ký thành phần này trong thuộc tính tùy chọn components, sau đó khai báo thành phần này trong mẫu HTML của chúng ta là .

Vue Props​

Vue props, hay còn gọi là properties, là các thuộc tính tùy chỉnh được sử dụng trên một thành phần để truyền dữ liệu từ thành phần cha đến thành phần con. Một trường hợp mà props có thể hữu ích là khi chúng ta cần một thành phần có nội dung khác nhau nhưng có bố cục trực quan không đổi, vì một thành phần có thể có nhiều props nhất có thể.

Vue prop có luồng dữ liệu một chiều, tức là từ thành phần cha đến thành phần con. Do đó, thành phần cha sở hữu dữ liệu và thành phần con không thể sửa đổi dữ liệu. Thay vào đó, thành phần con có thể phát ra các sự kiện mà thành phần cha có thể ghi lại.

Tuyên bố Props trong Vue​

Chúng ta hãy xem xét khối mã bên dưới:

 Thành phần Vue {{ buildType }} bước xây dựng
export default { props: { buildType: { type: String } }}

Chúng tôi đã cập nhật mẫu HTML bằng buildType được nội suy, sẽ được thực thi và thay thế bằng giá trị của các prop sẽ được truyền xuống từ thành phần cha.

Chúng tôi cũng đã thêm thẻ props vào thuộc tính tùy chọn props để lắng nghe sự thay đổi của props và cập nhật mẫu cho phù hợp. Trong thuộc tính tùy chọn props này, chúng tôi đã khai báo tên của props, khớp với tên chúng tôi có trong thẻ và cũng đã thêm props type.

Kiểu props, có thể là String, Number, Array, Boolean hoặc Object, hoạt động như một quy tắc hoặc kiểm tra để xác định thành phần của chúng tôi sẽ nhận được gì.

Trong ví dụ trên, chúng tôi đã thêm một kiểu String; chúng ta sẽ nhận được lỗi nếu chúng ta cố gắng truyền bất kỳ loại giá trị nào khác như Boolean hoặc Object.

Truyền Props Trong Vue​

Để kết thúc, chúng ta sẽ cập nhật tệp cha, tức là App.vue và truyền props cho phù hợp.

   import BuildStep from './BuildStep.vue'export default { components: { BuildStep }}

Bây giờ, khi thành phần build step được render, chúng ta sẽ thấy nội dung tương tự như sau:

Thành phần Vue với bước build

Với props, chúng ta không cần tạo thành phần mới từ đầu để hiển thị thành phần có bước build hay không. Chúng ta có thể khai báo lại thành phần và thêm loại build có liên quan.

Tương tự như đối với bước xây dựng, khi thành phần được hiển thị, chúng ta sẽ có chế độ xem sau:

Thành phần Vue không có bước xây dựng

Xử lý sự kiện trong Vue​

Vue có nhiều chỉ thị, bao gồm v-on. v-on chịu trách nhiệm lắng nghe và xử lý các sự kiện DOM để hoạt động khi được kích hoạt. Chỉ thị v-on cũng có thể được viết dưới dạng ký hiệu @ để giảm độ dài dòng.

 Kiểm tra loại xây dựng

Thẻ button trong khối mã trên có một sự kiện nhấp được đính kèm vào phương thức checkBuildType. Khi nhấp vào nút này, nó sẽ tạo điều kiện thực thi một hàm kiểm tra loại bản dựng của thành phần.

Trình sửa đổi sự kiện​

Chỉ thị v-on có một số trình sửa đổi sự kiện thêm các thuộc tính duy nhất vào trình xử lý sự kiện v-on. Các trình sửa đổi sự kiện này bắt đầu bằng dấu chấm và nằm ngay sau tên trình sửa đổi sự kiện.

 ...

Trình sửa đổi phím​

Trình sửa đổi phím giúp chúng ta lắng nghe các sự kiện bàn phím, chẳng hạn như enter và page-up khi đang chạy. Các trình sửa đổi khóa được liên kết với chỉ thị v-on như v-on:eventname.keymodifiername, trong đó eventname có thể là keyup và modifiername là enter.

Các trình sửa đổi khóa cũng cung cấp tính linh hoạt nhưng cho phép nối nhiều tên khóa.

Tại đây, tên khóa sẽ lắng nghe cả sự kiện bàn phím ctrl và enter trước khi phương thức checkInput được gọi.

Chỉ thị v-for​

Cũng giống như JavaScript cung cấp khả năng lặp qua các mảng bằng các vòng lặp như vòng lặp for, Vue-js cũng cung cấp một chỉ thị tích hợp được gọi là v-for thực hiện cùng một chức năng.

Chúng ta có thể viết cú pháp v-for thành item in items trong đó items là mảng mà chúng ta đang lặp qua hoặc thành items of items để thể hiện sự tương đồng với cú pháp vòng lặp JavaScript.

Kết xuất danh sách​

Chúng ta hãy xem xét việc kết xuất các loại bước xây dựng thành phần trên một trang.

  [LIST] 
[*]  {{ steps.step }} [/LIST] export default { data() { return { buildSteps: [ { id: "step 1", step:'With the build step', }, { id: "step 2", step:'Without the build step' } ] } }}

Trong khối mã ở trên, mảng steps trong thuộc tính data hiển thị hai loại bước xây dựng mà chúng ta có cho một thành phần. Trong mẫu của chúng tôi, chúng tôi đã sử dụng lệnh v-for để lặp qua mảng các bước, kết quả của lệnh này sẽ được hiển thị trong danh sách không có thứ tự.

Chúng tôi đã thêm đối số key tùy chọn biểu thị chỉ mục của mục mà chúng tôi hiện đang lặp lại. Nhưng ngoài ra, key chấp nhận một mã định danh duy nhất cho phép chúng tôi theo dõi từng nút của mục để quản lý trạng thái phù hợp.

Sử dụng v-for với một thành phần​

Giống như sử dụng v-for để hiển thị danh sách, chúng tôi cũng có thể sử dụng lệnh này để tạo thành phần. Chúng ta có thể thêm chỉ thị v-for vào thành phần như sau:

Khối mã trên sẽ không có nhiều tác dụng trong việc hiển thị hoặc truyền step cho thành phần. Thay vào đó, chúng ta sẽ cần truyền giá trị của step dưới dạng props cho thành phần.

Chúng ta thực hiện như trên để ngăn chặn bất kỳ sự cố định chặt chẽ nào của v-for vào thành phần.

Điều quan trọng nhất cần lưu ý trong cách sử dụng khác nhau của v-for là tự động hóa một quy trình dài. Chúng ta có thể chuyển từ việc liệt kê thủ công 100 mục hoặc thành phần sang sử dụng chỉ thị v-for và hiển thị mọi thứ trong tích tắc, tùy từng trường hợp.

Xây dựng biểu mẫu đăng ký phức tạp trong Vue​

Chúng ta sẽ kết hợp mọi thứ đã học về v-model, các thành phần Vue, các đạo cụ Vue, chỉ thị v-for và xử lý sự kiện để xây dựng một biểu mẫu phức tạp giúp chúng ta đạt được hiệu quả, khả năng mở rộng và quản lý thời gian.

Biểu mẫu này sẽ phục vụ cho việc thu thập dữ liệu tiểu sử của sinh viên, mà chúng ta sẽ phát triển để tạo điều kiện cải tiến dần dần khi nhu cầu kinh doanh tăng lên.

Thiết lập ứng dụng Vue​

Chúng ta sẽ dựng khung cho ứng dụng Vue của mình bằng bước xây dựng. Để thực hiện việc này, chúng ta sẽ cần đảm bảo đã cài đặt những thứ sau:

• Node.js;
• npm hoặc yarn.

Bây giờ chúng ta sẽ tiến hành tạo ứng dụng Vue của mình bằng cách chạy lệnh bên dưới:

# npmnpm init vue@latest vue-complex-form

trong đó vue-complex-form là tên của ứng dụng Vue.

Sau đó, chúng ta sẽ chạy lệnh bên dưới tại thư mục gốc của dự án Vue:

npm install

Tạo tệp JSON để lưu trữ dữ liệu biểu mẫu​

Chúng tôi muốn tạo một biểu mẫu nơi người dùng có thể điền thông tin chi tiết của họ. Mặc dù chúng tôi có thể thêm thủ công tất cả các trường nhập liệu, nhưng chúng tôi sẽ sử dụng một phương pháp khác để đơn giản hóa cơ sở mã của mình. Chúng tôi sẽ thực hiện điều này bằng cách tạo một tệp JSON có tên là util/bio-data.json. Trong mỗi đối tượng JSON, chúng ta sẽ có thông tin cơ bản mà chúng ta muốn mỗi trường nhập có.

[ { "id": 1, "inputvalue":" ", "formdata": "First Name", "type": "text", "inputdata": "firstname" }, { "id": 2, "inputvalue":" ", "formdata": "Last Name", "type": "text", "inputdata": "lastname" },]

Như đã thấy trong khối mã ở trên, chúng ta đã tạo một đối tượng với một số khóa đã mang các giá trị:

• id đóng vai trò là định danh chính của từng đối tượng;
• inputvalue sẽ phục vụ cho giá trị được truyền vào v-model;
• formdata sẽ xử lý trình giữ chỗ nhập và nhãn name;
• type biểu thị loại đầu vào, chẳng hạn như email, số hoặc văn bản;
• inputdata biểu thị id và name đầu vào.

Các giá trị của khóa này sẽ được truyền vào sau cho thành phần của chúng ta dưới dạng props. Chúng ta có thể truy cập toàn bộ dữ liệu JSON tại đây.

Tạo thành phần có thể tái sử dụng​

Chúng ta sẽ tạo một thành phần đầu vào sẽ được truyền các props từ tệp JSON mà chúng ta đã tạo. Thành phần đầu vào này sẽ được lặp lại bằng cách sử dụng lệnh v-for để tạo nhiều phiên bản của trường đầu vào cùng một lúc mà không cần phải viết tất cả theo cách thủ công. Để thực hiện việc này, chúng ta sẽ tạo tệp components/TheInputTemplate.vue và thêm mã bên dưới:

  {{ formData }}   export default { name: 'TheInputTemplate', props: { modelValue: { type: String }, formData: { type: String }, type: { type: String }, inputData: { type: String } }, phát ra: ['update:modelValue']}label { display: inline-block; margin-bottom: 0.5rem; text-transform: uppercase; color: rgb(61, 59, 59); font-weight: 700; font-size: 0.8rem;}input { display: block; width: 90%; padding: 0.5rem; margin: 0 auto 1.5rem auto;}

Trong khối mã trên, chúng ta đã đạt được những điều sau:

• Chúng ta đã tạo một thành phần có trường nhập.
• Trong trường nhập, chúng ta đã khớp các giá trị mà chúng ta sẽ truyền vào từ tệp JSON với các vị trí quan tâm tương ứng trong phần tử.
• Chúng ta cũng đã tạo các thuộc tính của modelValue, formData, type và inputData sẽ được đăng ký trên thành phần khi xuất. Các prop này sẽ chịu trách nhiệm lấy dữ liệu từ tệp cha và truyền xuống thành phần TheInputTemplate.vue.
• Liên kết prop modelValue với giá trị của giá trị đầu vào.
• Thêm update:modelValue, được phát ra khi sự kiện input được kích hoạt.

Đăng ký thành phần đầu vào​

Chúng ta sẽ điều hướng đến tệp App.vue và nhập thành phần TheInputTemplate.vue từ đó chúng ta có thể tiến hành sử dụng thành phần đó.

   import TheInputTemplate từ './components/TheInputTemplate.vue'export default { name: 'App', components: { TheInputTemplate }}html, body{ background-color: grey; height: 100%; min-height: 100vh;}.wrapper { background-color: white; width: 50%; border-radius: 3px; padding: 2rem 1.5rem; margin: 2rem auto;}

Ở đây chúng ta đã nhập thành phần TheInputTemplate.vue vào tệp App.vue, đăng ký thành phần này trong thuộc tính tùy chọn components, sau đó khai báo thành phần này trong mẫu HTML của chúng ta.

Nếu chúng ta chạy npm run serve, chúng ta sẽ có chế độ xem sau:



Tại thời điểm này, không có nhiều thứ để xem vì chúng ta vẫn chưa đăng ký các thuộc tính trên thành phần.

Truyền dữ liệu đầu vào​

Để có được kết quả mong muốn, chúng ta sẽ cần truyền dữ liệu đầu vào và thêm props vào thành phần. Để thực hiện việc này, chúng ta sẽ cập nhật tệp App.vue của mình:

     //thêm mục nhập ở đâyimport biodata from "../util/bio-data.json";export default { name: 'App', //component goes here data: () => ({ biodata })}

Từ khối mã trên, chúng ta đã đạt được một số thành quả:

• Chúng ta đã nhập tệp JSON bio-data đã tạo vào tệp App.vue. Sau đó, chúng tôi đã thêm biến đã nhập vào tùy chọn data của tập lệnh Vue.
• Lặp qua dữ liệu JSON mà chúng tôi đã khởi tạo trong tùy chọn dữ liệu bằng lệnh v-for của Vue.
• Trong thành phần TheInputTemplate.vue mà chúng tôi đã tạo, chúng tôi đã truyền dữ liệu phù hợp để điền vào tùy chọn props.

Lúc này, giao diện của chúng tôi sẽ trông như sau:



Để xác nhận xem ứng dụng của chúng ta có hoạt động như mong đợi hay không, chúng ta sẽ mở Vue DevTools hoặc cài đặt một công cụ từ https://devtools.vuejs.org nếu chúng ta chưa có công cụ này trong trình duyệt.

Khi chúng ta nhập giá trị vào bất kỳ trường nhập nào, chúng ta có thể thấy giá trị đó hiển thị trong modelValue trong bảng điều khiển Vue Devtools.

Kết luận​

Trong bài viết này, chúng ta đã khám phá một số nguyên tắc cơ bản cốt lõi của Vue như v-for, v-model, v.v., sau đó chúng ta đã ghép chúng lại với nhau để xây dựng một biểu mẫu phức tạp. Mục tiêu chính của bài viết này là đơn giản hóa quy trình xây dựng các biểu mẫu phức tạp trong khi vẫn duy trì khả năng đọc và khả năng tái sử dụng, đồng thời giảm thời gian phát triển.

Trong bất kỳ trường hợp nào, nếu cần mở rộng biểu mẫu, tất cả những gì nhà phát triển phải làm là điền thông tin cần thiết vào các tệp JSON và thế là xong, biểu mẫu đã sẵn sàng. Ngoài ra, các Kỹ sư mới có thể tránh việc bơi trong những dòng mã dài để có ý tưởng về những gì đang diễn ra trong cơ sở mã.

Lưu ý: Để khám phá thêm về cách xử lý các sự kiện trong các thành phần để giải quyết càng nhiều sự phức tạp càng tốt, bạn có thể xem bài viết này về sử dụng các thành phần với v-model.

Đọc thêm trên Tạp chí Smashing​

• “Tối ưu hóa ứng dụng Vue,” Michelle Barker
• “Ba hiểu biết sâu sắc mà tôi có được khi nghiên cứu về khả năng truy cập của Vue.js,” Marcus Herrmann
• “Các công cụ và thực hành để tăng tốc quy trình phát triển Vue.js,” Uma Victor
• “Chuyển từ Vue 1 sang Vue 2 sang Vue 3: Nghiên cứu điển hình về Di chuyển hệ thống CMS không đầu,” Lisi Linhart