VueJS 2: Template Syntax

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. Ví dụ với Angular thì tiền tố sẽ là ng-, còn Vue thì tiền tố sẽ là v-. 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.

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.

Bài viết này được đăng tại [free tuts .net]

<div id="messageApp">
    {{domain}} <br/>
    {{author}}
</div>


<script language="javascript">
    var messageApp = new Vue({
        el : "#messageApp",
        data : {
            domain : "freetuts.net",
            author : 'Nguyen Van Cuong'
        }
    });
</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.

<div v-bind:id="yourid"></div>

<div id="messageApp">
    <input type='button' v-bind:disabled="isShowButton" value='Button Disabled' />
    <input type='button' v-bind:disabled="!isShowButton" value='Button Enabled' />
</div>


<script language="javascript">
    var messageApp = new Vue({
        el : "#messageApp",
        data : {
            isShowButton : false
        }
    });
</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 mình thấy cơ chế hoạt động không khác gì blade template trong Laravel, 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.

<div id="messageApp">
    {{ isVisible ? "Hiển thị" : "ẩn" }}
</div>


<script language="javascript">
    var messageApp = new Vue({
        el : "#messageApp",
        data : {
            isVisible : true
        }
    });
</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.

{{ 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.

<div id="messageApp">
    <p v-if="seen">Bạn sẽ thấy tin nhắn này</p>
</div>


<script language="javascript">
    var messageApp = new Vue({
        el : "#messageApp",
        data : {
            seen : true
        }
    });
</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.

<div id="messageApp">
    <a v-bind:href="href">Bạn sẽ thấy tin nhắn này</a>
</div>


<script language="javascript">
    var messageApp = new Vue({
        el : "#messageApp",
        data : {
            href : "https://freetuts.net"
        }
    });
</script>

Kết quả của đoạn code này sẽ thêm thuộc tính href="https://freetuts.net" 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.

<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 |.

<!-- trong cặp ngoặc nhọn -->
{{ message | capitalize }}
<!-- trong v-bind -->
<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.

<div id="messageApp">
    {{ message | numberToWord }}
</div>



<script language="javascript">
    var messageApp = new Vue({
        el : "#messageApp",
        data : {
            message : "0979306603"
        },
        filters : {
            numberToWord : function(val){
                var result = '';
                for (var i = 0; i < val.length; i++){
                    if (val[i] === '0'){
                        result += '-không-';
                    }
                    if (val[i] === '1'){
                        result += '-một-';
                    }
                    if (val[i] === '2'){
                        result += '-hai-';
                    }
                    if (val[i] === '3'){
                        result += '-ba-';
                    }
                    if (val[i] === '4'){
                        result += '-bốn-';
                    }
                    if (val[i] === '5'){
                        result += '-năm-';
                    }
                    if (val[i] === '6'){
                        result += '-sáu-';
                    }
                    if (val[i] === '7'){
                        result += '-bảy-';
                    }
                    if (val[i] === '8'){
                        result += '-tám-';
                    }
                    if (val[i] === '9'){
                        result += '-chín-';
                    }
                }
                return result;
            }
        }
    });
</script>

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.

{{ 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.

{{ 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.

<!-- cú pháp đầy đủ -->
<a v-bind:href="url"></a>
<!-- cú pháp rút gọn -->
<a :href="url"></a>

<!-- cú pháp đầy đủ -->
<a v-on:click="doSomething"></a>
<!-- cú pháp rút gọn-->
<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.