1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

VueJS Bài 4: Template Syntax

Thảo luận trong 'JavaScript' bắt đầu bởi Phạm Đạt, 7/7/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Bất kì framework nào cũng đưa ra một thư viện xử lý template riêng và Vue cũng vậy, nó có những cú pháp giúp việc render dữ liệu trở nên đơn giản và trơn tru hơn.

      Giống như những thư viện Javascript khác, việc xử lý template chủ yếu dựa vào directive (thuộc tính của thẻ HTML) với tiền tố đặc biệt riêng của từng framework. Ngoài ra nó còn sử dụng những cú pháp đơn giản khác để giúp việc lấy dữ liệu từ các biến để đưa vào DOM.

      [​IMG]

      1. Interpolations
      Mình không biết dịch từ này như thế nào cho chuẩn nữa nhưng về cơ bản thì bạn hãy hiểu đây là quá trình xác định giá trị của biến để đưa vào DOM.
      • Text
      Đây là dạng cơ bản nhất để bind data ở dạng text với cú pháp là hai cặp dấu ngoặc nhọn (mustache) nằm liền kề nhau {{key}}. Vue template sẽ nhận diện bất kì cặp dấu ngoặc nhọn nào và lấy tên mà bạn đã đặt ở bên trong, sau đó so sánh với danh sách key mà bạn đã khai báo ở data để hiển thị dữ liệu.

      Mã (Text):
      1. <div id="messageApp">
      2.     {{domain}} <br/>
      3.     {{author}}
      4. </div>
      5.  
      6. <script language="javascript">
      7.     var messageApp = new Vue({
      8.         el : "#messageApp",
      9.         data : {
      10.             domain : "tbit.vn",
      11.             author : 'Dat Pham'
      12.         }
      13.     });
      14. </script>
      Nếu bạn lạm dụng việc hiển thị dữ liệu text lên website sẽ rất là nguy hiểm nếu như nội dung được lấy từ người dùng, bởi họ có thể sử dụng kỹ thuật tấn công dựa vào các lỗ hổng XSS, vì vậy hãy sử dụng cách này chỉ với những nội dung đáng tin cậy.
      • Attributes
      Cặp dấu ngoặc không thể được sử dụng bên trong thẻ HTML mà thay vào đó bạn sẽ sử dụng cú pháp của v-bind directive.

      Cú pháp

      HTML:
      1. <div v-bind:id="yourid"></div>
      Mã (Text):
      1. <div id="messageApp">
      2.     <input type='button' v-bind:disabled="isShowButton" value='Button Disabled' />
      3.     <input type='button' v-bind:disabled="!isShowButton" value='Button Enabled' />
      4. </div>
      5.  
      6.  
      7. <script language="javascript">
      8.     var messageApp = new Vue({
      9.         el : "#messageApp",
      10.         data : {
      11.             isShowButton : false
      12.         }
      13.     });
      14. </script>
      Trong ví dụ này bạn cần chú ý là mình đã sử dụng phép phủ định để thay đổi từ FALSE sang TRUE cho button thứ hai nên chỉ có button thứ hai mới bị disabled.
      • Javascript Expression
      Phần này thì cú pháp sử dụng đúng chuẩn của ngôn ngữ Javascript kèm theo cơ chế hoạt động chạy từ trên xuống nên rất dễ dàng xử lý chương trình.

      Mã (Text):
      1. <div id="messageApp">
      2.     {{ isVisible ? "Hiển thị" : "ẩn" }}
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var messageApp = new Vue({
      7.         el : "#messageApp",
      8.         data : {
      9.             isVisible : true
      10.         }
      11.     });
      12. </script>
      Lưu ý: Vì là template nên nó chỉ xử lý được những lệnh đơn có trả về một kết quả. Như những ví dụ dưới đây là sai vì nó không phải là lệnh đơn có trả về kết quả mà là một tập lệnh.

      Mã (Text):
      1. {{ if (ok) { return message } }}
      Ngoài ra bạn cũng có thê sử dụng Javascript Expression trong Attributes.

      2. Directive
      Directive là những thuộc tính HTML đặc biệt có tiền tố bắt đầu bằng chữ v-. Giá trị của các directive thường là một biểu thức có giá trị đơn hoặc một giá trị đơn xác định, ngoại trừ các directive đặc biệt như v-if (chúng ta sẽ học nó sau).
      Một ví dụ khá rõ ràng của v-if directive, nếu giá trị truyền vào là true thì thẻ HTML sẽ hiển thị, ngược lại sẽ bị ẩn.

      Mã (Text):
      1. <div id="messageApp">
      2.     <p v-if="seen">Bạn sẽ thấy tin nhắn này</p>
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var messageApp = new Vue({
      7.         el : "#messageApp",
      8.         data : {
      9.             seen : true
      10.         }
      11.     });
      12. </script>
      Chạy lên bạn sẽ thấy xuất hiện dòng chữ "bạn sẽ thấy tin nhắn này", nhưng nếu bạn thay đổi giá trị của seen thành false thì dòng chữ đó sẽ bị xóa
      • Arguments
      Một số directive chấp nhận có tham số phía sau được ngăn cách bởi dấu hai chấm :)), như v-bind là một ví dụ điển hình. Directive này mục đích là bind dữ liệu khi ta truyền vào và dựa vào giá trị của dữ liệu sẽ xác định giá trị cho tham số phía sau.

      Mã (Text):
      1. <div id="messageApp">
      2.     <a v-bind:href="href">Bạn sẽ thấy tin nhắn này</a>
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var messageApp = new Vue({
      7.         el : "#messageApp",
      8.         data : {
      9.             href : "https://tbit.vn"
      10.         }
      11.     });
      12. </script>
      Kết quả của đoạn code này sẽ thêm thuộc tính href="https://tbit.vn" vào thẻ a.
      Hay một ví dụ khác đó là v-on directive sẽ có một tham số phía sau đó là tên của sự kiện DOM.
      • Modifier
      Modifier là một hậu tố đặc biệt được được thêm vào bằng dấu chấm, mục đích của modifier là xác định cho directive hoạt động theo một cách đặc biệt nào đó. Ví dụ modifier .prevent chỉ thị cho v-on gọi even.preventDefault() khi sự kiện được kích hoạt.

      Mã (Text):
      1. <form v-on:submit.prevent="onSubmit"></form>
      • Filters
      Filter hoạt động như là một bộ lọc dữ liệu, chính vì vậy ta chỉ có thể sử dụng nó ở hai nơi đó là nằm bên trong cặp dấu ngoặc nhọn {{ }} và bên trong v-bind directive. Bộ lọc sẽ được thêm đằng sau của biểu thức javascript và được ngăn cách bằng dấu gạch đứng |.

      Mã (Text):
      1. <!-- trong cặp ngoặc nhọn -->
      2. {{ message | capitalize }}
      3. <!-- trong v-bind -->
      4. <div v-bind:id="rawId | formatId"></div>
      Lưu ý: Filter chỉ hỗ trợ từ phiên bản 2.1.0 trở về sau.

      Ta sẽ làm một ví dụ đơn giản: Chuyển từ số thành chữ khi hiển thị dữ liệu.

      Mã (Text):
      1. <div id="messageApp">
      2.     {{ message | numberToWord }}
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var messageApp = new Vue({
      7.         el : "#messageApp",
      8.         data : {
      9.             message : "0979306603"
      10.         },
      11.         filters : {
      12.             numberToWord : function(val){
      13.                 var result = '';
      14.                 for (var i = 0; i < val.length; i++){
      15.                     if (val[i] === '0'){
      16.                         result += '-không-';
      17.                     }
      18.                     if (val[i] === '1'){
      19.                         result += '-một-';
      20.                     }
      21.                     if (val[i] === '2'){
      22.                         result += '-hai-';
      23.                     }
      24.                     if (val[i] === '3'){
      25.                         result += '-ba-';
      26.                     }
      27.                     if (val[i] === '4'){
      28.                         result += '-bốn-';
      29.                     }
      30.                     if (val[i] === '5'){
      31.                         result += '-năm-';
      32.                     }
      33.                     if (val[i] === '6'){
      34.                         result += '-sáu-';
      35.                     }
      36.                     if (val[i] === '7'){
      37.                         result += '-bảy-';
      38.                     }
      39.                     if (val[i] === '8'){
      40.                         result += '-tám-';
      41.                     }
      42.                     if (val[i] === '9'){
      43.                         result += '-chín-';
      44.                     }
      45.                 }
      46.                 return result;
      47.             }
      48.         }
      49.     });
      50. </script>[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]


      Chạy lên kết quả sẽ là: -không--chín--bảy--chín--ba--không--sáu--sáu--không--ba-.
      Bạn có thể sử dụng nhiều filter cùng một lúc.

      Mã (Text):
      1. {{ message | filterA | filterB }}
      Hoặc nhận các tham số truyền vào vì bản chất nó là một hàm javascript bình thường, nhưng có một lưu ý là tham số đầu tiên luôn luôn là giá trị cần lọc nên các tham số truyền vào đó sẽ bắt đầu từ vị trí thứ hai.

      Mã (Text):
      1. {{ message | filterA('arg1', arg2) }}
      3. Cú pháp rút gọn
      Theo như trang docs của Vue thì no hỗ trợ cú pháp rút gọn cho hai directive hay sử dụng nhất đó là v-bind và v-on.

      Rút gọn v-bind
      Mã (Text):
      1. <!-- cú pháp đầy đủ -->
      2. <a v-bind:href="url"></a>
      3. <!-- cú pháp rút gọn -->
      4. <a :href="url"></a>

      Rút gọn v-on

      Mã (Text):
      1. <!-- cú pháp đầy đủ -->
      2. <a v-on:click="doSomething"></a>
      3. <!-- cú pháp rút gọn-->
      4. <a @click="doSomething"></a>
      Cú pháp rút gọn nhìn có vẻ không quen nên nếu bạn cảm thấy không thích thì có thể không sử dụng, mình cũng vậy sẽ sử dụng cú pháp đầy đủ để giúp chương trình rõ ràng hơn.

      4. Lời kết
      Như vậy làm mình đã giới thiệu sơ lược xong một số cú pháp căn bản để xử lý template trong Vue, bài này mình chủ yếu tham khảo trên trang chủ của nó nên nếu bạn muốn đọc tiếng Anh thì hãy lên đó đọc nhé, còn muốn đọc tiếng Việt thì có thể ở lại bài này.

      * Tài liệu tham khảo:
      https://vuejs.org/
      https://www.google.com.vn/ ;)
       
      Đang tải...

Chia sẻ trang này

Đang tải...