Vue.js sử dụng các cú pháp mẫu trong HTML để bind và render DOM thành các tag HTML và tất cả các vue.js template này đều phải tuân thủ theo các tag HTML chuẩn.

Trong phần này mình cũng sẽ không trình bày nhiều về khái niệm mà sẽ chủ yếu nó về thực hành. Vì dịch các thuật ngữ này ra tiếng việt rất khó để giải thích.

1, Interpolation.

-Intercalation là một thuật ngữ trong Vue.js. Đây là quá trình thêm một văn bản, nội dung, attribute ,.. vào các thẻ HTML bằng Vue.js.

Text

- Để bind một đoạn văn bản vào trong một tag HTML thì bạn sử dụng cú pháp sau:

{{ avariable }}

Trong đó, avariable là tên thuộc tính mà chúng ta đã khai báo ở vue instance.

Chú ý: Khi bind data dưới dạng này thì dữ liệu được bind sẽ luôn luôn ở dạng thô (tức là văn bản, giống hàm text trong jquery hay innerText trong javascript) mà không được append HTML

VD: sử dụng vue.js để bind data dưới dạng dữ liệu thô vào thẻ HTML.

<div id="app">
    <h1 class="text-red" style="text-align: center">{{ slogan }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
        },
        
    });
</script>

-Và trong cặp dấu {{}} thì bạn cõ thể sử dụng các hàm của javascript.

VD: Bind dữ liệu ra tag HTML và đồng thời chuyển đổi data đó thành in hoa.

<div id="app">
    <h1 class="text-red" style="text-align: center">{{ slogan.toUpperCase() }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
        },
    });
</script>

Raw HTML

-Nếu như bạn muốn hiển thị dữ liệu ra dưới dạng append cả HTML code (như hàm html trong jquery hoặc innerHTML trong javascript) thì bạn có thể sử dụng cú pháp sau:

<tag v-html="data"></tag>

Trong đó:

• tag là các tag trong HTML.
• data là dữ liệu mà bạn muốn bind vào tag đó (dữ liệu này thường được khai báo trong data scope của vue.js).

VD: Bind data vào tag h1 đồng thời append các thẻ HTML vào tag h1.

<div id="app">
    <h1 class="text-red" style="text-align: center" v-html="slogan"></h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            slogan: 'Chào mừng bạn đã đến với website: <font color="orange">toidicode.com</font>'
        },
    });
</script>

Tuy nhiên bạn phải hết sức cẩn thận khi thực hiện cách này, vì nó có thể dẫn đến lỗi XSS   

Attributes

-Để có thể thêm các attribute vào tag HTML bằng dữ liệu trong vue.js thì bạn sử dụng cú pháp sau:

<tag v-bind:attributeName="data"></tag>

Trong đó:

• attributeName là tên của attribute mà bạn muốn thực hiện binding.
• data là data mà bạn đã thiết lập trong vue.js.

VD: Bind class name vào thẻ h1.

<div id="app">
    <h1 v-bind:class="className" style="text-align: center" v-html="slogan"></h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            slogan: 'Chào mừng bạn đã đến với website: <font color="orange">toidicode.com</font>',
            className: 'text-red',
        },
    });
</script>

VD: Bind CSS style vào trong tag h1.

<div id="app">
    <h1 v-bind:class="className" v-bind:style="styleData" v-html="slogan"></h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            slogan: 'Chào mừng bạn đã đến với website: <font color="orange">toidicode.com</font>',
            className: 'text-red',
            styleData: 'text-align: center',
        },
    });
</script>

Using JavaScript Expressions

-Như mình đã có nói ở trên là chúng ta có thể sử dụng code javascript trong cặp dấu  {{}}, nhưng các bạn cần chú ý là chúng ta chỉ có thể sử dụng các scope đã được khai báo mặc định trong JavaScript thôi còn các biến hay object,.. mà người dùng tự định nghĩa thì sẽ không thể sử dụng được.

VD: Sử dụng các toán tử và câu lệnh điều kiện trong cặp dấu {{}}.

<div id="app">
    <p>Tuổi tiếp theo: {{ age + 1 }}</p>
    <p>Tuổi có là số chẵn: {{ age % 2 == 0 ? 'Chẵn' : 'Lẻ' }}</p>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            age : 22
        },
    });
</script>

2, Directives.

-Directives trong vue.js là các attribute được thiết lập bằng các tiền tố v-. Giá trị của các attribute này thường là các biểu thức javascript duy nhất, chỉ trừ v-for ( khái niệm này mình sẽ giải thích ở các bài sau).

VD: 

<div id="app">
    <h1 v-if="publish" v-bind:class="className" v-bind:style="textCenter">Chào mừng các bạn đã đến với website: toidicode.com</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            className : "text-red",
            textCenter: "text-align: center",
            publish: true,
        },
    });
</script>

- Ví dụ này các bạn chỉ cần xem thôi :D, phần sau mình sẽ có 1 bài nói về câu lệnh điều kiện và vòng lặp trong vue.js.

Arguments

- Trong một số các directives nó sẽ cho phép các bạn truyền tham số vào. Để truyền tham số vào các directive này thì bạn chỉ cần ngăn giữa directives và tham số bằng dấu : .

VD: Như v-bind attribute ở phần 1.

<div id="app">
    <img v-bind:>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            logoUrl : "https://toidicode.com/upload/images/logo.png"
        },
    });
</script>

-Hoặc bạn cũng có thể thêm các event trên DOM bằng directives v-on trong Vue.js.

VD: Thêm sự kiện click vào button.

<div id="app">
    <p>Click vào button để xem kết quả</p>
    <button v-on:click="showAlert">Click</button>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            showAlert : function () {
                alert('bạn vừa click vào button');
            }
        }
    });
</script>

Modifiers

-Directives dạng này cho phép bạn định nghĩa một hành động đặc biệt khi thực hiện directives đó. Các modifiers này được ngăn cách với directives bởi dấu .

VD: Thêm sự kiên submit cho form và kèm theo đó là preventDefault.

<div id="app">
    <form action="https://toidicode.com" v-on:submit.prevent="submitForm">
        <input type="text" name="name" placeholder="Nhập vào tên">
        <input type="submit" value="Gửi">
    </form>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            submitForm: function () {
                alert('Bạn vừa submit form');
            }
        }
    });
</script>

-Ở trong ví dụ trên, mình đã thêm sự kiện onsubmit cho form và đồng thời xác định modifier prevent cho form đó. Modifier này sau khi được render thì nó sẽ thành event.preventDefault()

3, Filters.

- Như mình đã nói ở trên thì trong cặp dấu {{}} thì chúng ta có thể sử dụng các biểu thức trong JavaScript, dựa vào điều này thì chúng ta cũng có thể sử dụng filter t

VD:

{{ name | uppercase }}

-Bên cạnh điều này thì vue.js còn hỗ trợ filter trong các directive v-bind và cũng sử dụng cú pháp tương tự.

VD:

<h1 v-bind:class="OldClass | newClass"></h1>

Filter trong v-bind chỉ đươc hỗ trợ từ phiên bản vue.js từ phiên bản 2.1.0. Nhưng với các biến đổi phức tạp hơn thì nên sử dụng computed

VD: Mình sẽ viết một filter để chuyển đổi chữ thường thành chữ hoa trong Vue.js.

<div id="app">
    <h1 class="text-red">{{ name | strUpperCase }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'vu thanh tai'
        },
        filters : {
            strUpperCase : function (data) {
                return data.toUpperCase();
            }
        }
    });
</script>

-Và nếu như bạn muốn sử dụng nhiều filters cùng một lúc  thì bạn cứ ngăn cách nó với nhau bởi dấu |.

VD: 

{{ name | strUpperCase | lastWord }}

-Hoặc bạn cũng có thể truyền thêm các tham số vào trong filter, nhưng tham số truyền vào tiếp theo sẽ được tính từ tham số thứ 2.

VD:

<div id="app">
<h1 class="text-red">{{ name | strUpperCase |sliceString(9) }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'vu thanh tai'
        },
        filters : {
            strUpperCase : function (data) {
                return data.toUpperCase();
            },
            sliceString : function (data, num) {
                return data.slice(num); 
            }
        }
    });
</script>

3, Shorthands.

-Tiên tố v- phục vụ như một trực quan để đánh dấu sử dụng vue.js so với các framework khác, ví dụ như angular dùng ng- . Chính vì thế nên vue.js cũng có cung cấp cho chúng ta 2 cách viết ngắn gọn hơn với 2 dạng directive là v-bind và v-on như sau:

v-bind

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

v-on

<!-- cú pháp đầy đủ -->
<a v-on:click="doSomething"></a>
<!-- cú pháp ngắn gọn -->
<a @click="doSomething"></a>

-Tuy rằng, viết kiểu ngắn gọn như này nó hơi khác biệt hơn so với bình thường nhưng nhìn chung thì @ và : đều là các ký tự hợp lệ khi đặt tên cho atrribute trong HTML và nó cũng được hỗ trợ bởi các trình duyệt. Và khi vue.js render nó thì nó sẽ không hiển thị hai kí tự này ngoài trình duyệt.

4, Lời kết.

-Bài này chúng ta kết thúc ở đây thôi nhé, có thể nội dung câu chữ nó sẽ hơi lủng củng một chút, Bởi một số thuật ngữ tiếng anh rất khó dịch ra tiếng việt cho dễ hiểu.