Nối thêm các phần tử động chuyên gia gán javascript

Nó cho phép bạn viết các chủ đề tùy chỉnh dễ dàng hơn, thêm các lớp dựa trên trạng thái của thành phần và cũng có thể viết các biến thể khác nhau của thành phần dựa trên kiểu dáng

Thêm tên lớp động cũng đơn giản như thêm prop

  
    This is how you add static classes in Vue.
  

8 vào thành phần của bạn. Bất cứ giá trị nào của

  
    This is how you add static classes in Vue.
  

9 sẽ là tên lớp được thêm vào thành phần của bạn

Tất nhiên, còn rất nhiều điều chúng ta có thể làm ở đây với các lớp động trong Vue

Chúng tôi sẽ đề cập đến rất nhiều thứ trong bài viết này

• Sử dụng các lớp tĩnh và động trong Vue
• Cách chúng ta có thể sử dụng các biểu thức Javascript thông thường để tính toán lớp của mình
• Cú pháp mảng cho tên lớp động
• Cú pháp đối tượng [để đa dạng hơn. ]
• Tạo tên lớp một cách nhanh chóng
• Cách sử dụng tên lớp động trên các thành phần tùy chỉnh

Không chỉ vậy, ở phần cuối, tôi sẽ chỉ cho bạn một mẫu đơn giản để sử dụng các đạo cụ được tính toán nhằm giúp dọn dẹp các mẫu của bạn. Điều này sẽ có ích khi bạn bắt đầu sử dụng tên lớp động ở mọi nơi

Các lớp tĩnh và động

Trong Vue, chúng ta có thể thêm cả lớp tĩnh và lớp động vào các thành phần của mình

Các lớp tĩnh là những lớp nhàm chán không bao giờ thay đổi và sẽ luôn hiện diện trên thành phần của bạn. Mặt khác, các lớp động là những lớp chúng ta có thể thêm và xóa mọi thứ thay đổi trong ứng dụng của mình

Nếu chúng ta muốn thêm một lớp tĩnh, nó hoàn toàn giống như thực hiện trong HTML thông thường

  
    This is how you add static classes in Vue.
  

Các lớp động rất giống nhau, nhưng chúng ta phải sử dụng cú pháp thuộc tính đặc biệt của Vue,

  
    This is how you add static classes in Vue.
  

0, để liên kết một biểu thức Javascript với lớp của chúng ta

  
    This is how you add static classes in Vue.
  

Bạn sẽ nhận thấy chúng tôi phải thêm dấu ngoặc kép xung quanh tên lớp động của chúng tôi

Điều này là do cú pháp

  
    This is how you add static classes in Vue.
  

0 lấy bất cứ thứ gì chúng ta chuyển vào dưới dạng giá trị Javascript. Việc thêm dấu ngoặc kép đảm bảo rằng Vue sẽ coi nó là một chuỗi

Vue cũng có một cú pháp tốc ký cho

  
    This is how you add static classes in Vue.
  

0

  
    This is how you add static classes in Vue.
  

Điều thực sự thú vị là bạn thậm chí có thể có cả lớp tĩnh và lớp động trên cùng một thành phần

Điều này cho phép bạn có một số lớp tĩnh cho những thứ bạn biết sẽ không thay đổi, chẳng hạn như định vị và bố cục cũng như các lớp động cho chủ đề của bạn

  
    This is how you add static classes in Vue.
  

____9

  
    This is how you add static classes in Vue.
  

0

Trong trường hợp này,

  
    This is how you add static classes in Vue.
  

3 là biến chứa tên lớp mà chúng ta sẽ áp dụng [hãy nhớ rằng nó coi nó là Javascript ở đó]

Tên lớp có điều kiện

Vì

  
    This is how you add static classes in Vue.
  

0 sẽ chấp nhận bất kỳ biểu thức Javascript nào, nên chúng tôi có thể thực hiện một số điều thú vị với nó

Yêu thích của tôi là sử dụng các ký tự ba bên trong mẫu, có xu hướng khá rõ ràng và dễ đọc

Nhưng chúng ta sẽ không đi vào vấn đề đó ở đây

Có nhiều cách khác nhau để ràng buộc các lớp trong Vue một cách có điều kiện và chúng đáng để khám phá

Sử dụng cú pháp mảng

Nếu có nhiều lớp khác nhau mà bạn muốn thêm động, bạn có thể sử dụng mảng hoặc đối tượng. Cả hai đều hữu ích, nhưng chúng ta sẽ đề cập đến mảng trước

Vì chúng ta chỉ đánh giá một biểu thức javascript nên bạn có thể kết hợp các biểu thức vừa học với cú pháp mảng

  
    This is how you add static classes in Vue.
  

3

Những gì đang xảy ra ở đây?

Chúng tôi đang sử dụng mảng để đặt hai tên lớp động cho phần tử này

Giá trị của

  
    This is how you add static classes in Vue.
  

5 là tên lớp sẽ thay đổi giao diện phông chữ của chúng tôi

Từ ví dụ trước của chúng tôi, chúng tôi vẫn có thể chuyển đổi giữa các chủ đề sáng và tối bằng cách sử dụng biến

  
    This is how you add static classes in Vue.
  

6 của chúng tôi

Sử dụng cú pháp đối tượng

Chúng ta thậm chí có thể sử dụng một đối tượng để xác định danh sách các lớp động, giúp chúng ta linh hoạt hơn

Đối với bất kỳ cặp khóa/giá trị nào có giá trị là

  
    This is how you add static classes in Vue.
  

7, nó sẽ áp dụng khóa làm tên lớp

Hãy xem một ví dụ về cú pháp đối tượng

  
    This is how you add static classes in Vue.
  

3

Đối tượng của chúng tôi chứa hai khóa,

  
    This is how you add static classes in Vue.
  

8 và

  
    This is how you add static classes in Vue.
  

9. Tương tự như logic mà chúng tôi đã thực hiện trước đây, chúng tôi muốn chuyển đổi giữa các chủ đề này dựa trên giá trị của

  
    This is how you add static classes in Vue.
  

6

Khi

  
    This is how you add static classes in Vue.
  

6 là

  
    This is how you add static classes in Vue.
  

7, nó sẽ áp dụng

  
    This is how you add static classes in Vue.
  

8 làm tên lớp động cho phần tử của chúng ta. Nhưng

  
    This is how you add static classes in Vue.
  

9 sẽ không được áp dụng vì

  
    This is how you add static classes in Vue.
  

5 sẽ đánh giá thành

  
    This is how you add static classes in Vue.
  

6

Điều ngược lại xảy ra khi

  
    This is how you add static classes in Vue.
  

6 được đặt thành false. Chúng tôi lấy

  
    This is how you add static classes in Vue.
  

9 làm tên lớp động thay vì

  
    This is how you add static classes in Vue.
  

8

Quy ước phổ biến là sử dụng dấu gạch ngang — hoặc dấu gạch nối — trong tên lớp CSS. Nhưng để viết các khóa đối tượng có dấu gạch ngang trong Javascript, chúng ta cần đặt nó trong dấu ngoặc kép để biến nó thành một chuỗi

Bây giờ chúng ta đã tìm hiểu những kiến ​​thức cơ bản về cách tự động thêm các lớp vào các thành phần Vue

Làm cách nào để chúng tôi thực hiện việc này với các thành phần tùy chỉnh của riêng mình?

Sử dụng với Thành phần tùy chỉnh

Giả sử rằng chúng tôi có một thành phần tùy chỉnh mà chúng tôi đang sử dụng trong ứng dụng của mình

  
    This is how you add static classes in Vue.
  

0

Nếu chúng ta muốn tự động thêm một lớp sẽ thay đổi chủ đề, chúng ta sẽ làm gì?

Nó thực sự rất đơn giản

Chúng ta chỉ cần thêm thuộc tính

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

0 như trước đây

  
    This is how you add static classes in Vue.
  

0

Lý do điều này hoạt động là Vue sẽ đặt trực tiếp

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

1 trên phần tử gốc của

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

2

Khi bạn đặt props trên một component, Vue sẽ so sánh các props đó với những gì mà component đã chỉ định trong phần

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

3 của nó. Nếu có một trận đấu, nó sẽ vượt qua nó như một chỗ dựa bình thường. Nếu không, Vue sẽ thêm nó vào phần tử DOM gốc

Ở đây, vì

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

2 không chỉ định thuộc tính

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

1, Vue biết rằng nó nên đặt nó trên phần tử gốc

Tuy nhiên, có một số điều thậm chí còn nâng cao hơn mà chúng ta có thể thực hiện với các tên lớp động.

Tạo tên lớp một cách nhanh chóng

Chúng tôi đã thấy rất nhiều cách khác nhau mà chúng tôi có thể tự động thêm hoặc xóa tên lớp

Nhưng còn việc tự động tạo tên lớp thì sao?

Giả sử bạn có một thành phần

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

6, với 20 kiểu CSS khác nhau cho tất cả các loại nút khác nhau của bạn

Đó là rất nhiều biến thể

Bạn có thể không muốn dành cả ngày để viết ra từng cái một, cùng với logic để bật và tắt nó. Đây cũng sẽ là một mớ hỗn độn khó chịu khi đến lúc cập nhật danh sách

Thay vào đó, chúng tôi sẽ tự động tạo tên của lớp mà chúng tôi muốn áp dụng

Một phiên bản đơn giản của cái này bạn đã thấy

  
    This is how you add static classes in Vue.
  

____9

  
    This is how you add static classes in Vue.
  

0

Chúng ta có thể đặt một biến để chứa chuỗi của bất kỳ tên lớp nào mà chúng ta muốn

Nếu chúng tôi muốn làm điều này cho thành phần

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

6 của chúng tôi, chúng tôi có thể làm điều gì đó đơn giản như thế này

  
    This is how you add static classes in Vue.
  

3

  
    This is how you add static classes in Vue.
  

4

  
    This is how you add static classes in Vue.
  

5

Giờ đây, bất kỳ ai đang sử dụng thành phần

export default {
  data[] {
    return {
      theme: 'blue-theme',
    };
  }
};

6 đều có thể chỉ cần đặt giá trị chống đỡ

  
    This is how you add static classes in Vue.
  

3 thành bất kỳ chủ đề nào họ muốn sử dụng

Nếu họ không đặt bất kỳ, nó sẽ thêm lớp

  
    This is how you add static classes in Vue.
  

00

Nếu họ đặt nó thành

  
    This is how you add static classes in Vue.
  

01, nó sẽ thêm lớp

  
    This is how you add static classes in Vue.
  

02

Dọn dẹp mọi thứ bằng các đạo cụ được tính toán

Cuối cùng, các biểu thức trong mẫu của chúng ta sẽ trở nên quá phức tạp và nó sẽ bắt đầu trở nên rất lộn xộn và khó hiểu

May mắn thay, chúng tôi có một giải pháp dễ dàng cho điều đó

Nếu chúng ta chuyển đổi các biểu thức của mình thành các đạo cụ được tính toán, thì chúng ta có thể di chuyển nhiều logic hơn ra khỏi mẫu và dọn sạch nó

  
    This is how you add static classes in Vue.
  

0

  
    This is how you add static classes in Vue.
  

7

Điều này không chỉ dễ đọc hơn mà còn dễ dàng thêm chức năng mới và cấu trúc lại trong tương lai

Mẫu này - chuyển mọi thứ từ mẫu sang các đạo cụ được tính toán - cũng hoạt động với tất cả mọi thứ. Đó là một trong những thủ thuật tốt nhất để dọn dẹp các thành phần Vue của bạn