Mẫu cú pháp câu lệnh trong Vue.js

Bài viết được sự cho phép của tác giả Kien Dang Chung

Mỗi khi học một ngôn ngữ lập trình mới, việc đầu tiên chúng ta cần là học các cú pháp câu lệnh cơ bản. Với Vue.js thì có khác đi một chút do đây là một framework không phải là ngôn ngữ lập trình. Vue.js như là một ngôn ngữ trung gian, mọi thứ sẽ bạn viết sẽ Vue.js chuyển thành ngôn ngữ HTML kết hợp Javascript và CSS (còn gọi là render, thuật ngữ này sẽ được sử dụng nhiều cho ngắn gọn). Như vậy, về cơ bản Vue.js có thể sử dụng các cú pháp câu lệnh trong HTML, CSS và Javascript. Tuy nhiên, Vue.js cũng có một số các cú pháp riêng sử dụng cho những trường hợp sau:

  • In kết quả biểu thức ra màn hình.
  • Các phần xử lý có kiểm tra điều kiện.
  • Các phần xử lý kiểu vòng lặp.
  • Xử lý theo cách cá nhân hóa, xây dựng các plugin, module…
  • …
  10 kinh nghiệm khi làm việc với các dự án lớn viết bằng Vue.js
  3 phút làm quen với Vue.js

In giá trị đối tượng ra màn hình

Vue.js sử dụng cú pháp {{ }} để in một biểu thức ra màn hình, kiểu cách này giống như Laravel sử dụng. Chúng ta cùng xem lại ví dụ đầu tiên của Vue.js:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ đầu tiên Vue.js - allaravel.com</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model="message">
    </div>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'Xin chào, tôi là Vue.js'
            }
        })
    </script>
</body>
</html>

Trong ví dụ này chúng ta in giá trị của biến message vào thẻ <h1>. Trình biên dịch sẽ thay đối tượng message thành giá trị của nó khi render. Như vậy để in một đối tượng chúng ta chỉ cần đưa chúng vào cú pháp {{ doi_tuong_javascript }}. Chúng ta có một số chú ý khi sử dụng cú pháp {{ }} như sau:

Chú ý 1: Khi render cú pháp {{ }} xử lý dữ liệu dạng text đơn thuần chứ không xử lý các text dạng mã HTML. Ví dụ, nếu đối tượng message chứa dữ liệu dạng text HTML “Xin chào, tôi là <strong>Vue.js</strong>” thì nó vẫn in nguyên giá trị này ra. Nếu muốn trình biên dịch xử lý các biến dạng mã HTML, chúng ta sử dụng câu lệnh v-html. Chúng ta cùng xem sự khác nhau trong ví dụ dưới đây:

<html>
<head>
    <title>In kết quả biểu thức trong Vue.js - allaravel.com</title>
</head>
<body>
    <div id="app">
        <h1 v-html="message"></h1>
        <h1>{{ message }}</h1>
        <input v-model="message">
    </div>
    <!-- <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> -->
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'Xin chào, tôi là <span style="color: #41B883;">Vue</span>.<span style="color: #354B5E;">js</span>'
            }
        })
    </script>
</body>
</html>

Trong Laravel Blade, việc xử lý text đơn thuần hay mã HTML sử dụng các cú pháp tương ứng là {{ }} và {!! !!}.

Chú ý 2: Không sử dụng cú pháp {{ }} trong một thuộc tính của thẻ HTML. Thay vào đó sử dụng câu lệnh v-bind để gán một giá trị vào một thuộc tính trong thẻ HTML. Ví dụ

<img src="{{ imageUrl }}">

không hoạt động mà phải viết lại như sau:

<img v-bind:src="imageUrl">

Câu lệnh v-bind sẽ được giới thiệu chi tiết hơn ở phần cuối bài viết.

In giá trị biểu thức Javascript

Đây là trường hợp tổng quát, nó bao hàm cả trường hợp in giá trị đối tượng ở trên, tức là đối tượng nằm trong {{ }} có thể là một biểu thức Javascript. Chúng có thể là các biểu thức tính toán hoặc một lời gọi một hàm tính toán.

<p> Thành tiền: {{ quantity * price }}đ </p>
<p> Giá trị 2^5 = {{ Math.pow(2,5) }}<p>
<p> Chào {{ (gender == 'male') ? 'Anh' : 'Chị' }}! </p>

Chú ý, nội dung trong {{ }} phải là biểu thức và biểu thức dạng đơn chứ không thể sử dụng các biểu thức kiểu nhiều dòng hoặc các biểu thức dạng điều kiện. Các ví dụ dưới đây sẽ không chạy ra kết quả và báo lỗi:

<!-- đây là một câu lệnh không phải là biểu thức -->
{{ var a = 1 }}

<!-- Câu lệnh điều kiện, rẽ nhánh không được sử dụng -->
{{ if (ok) { return message } }}

Câu lệnh

Trong Vue.js có một khái niệm là directive dùng để đánh dấu các chỉ thị, lệnh hướng dẫn trình biên dịch xử lý các công việc cụ thể và sinh ra mã HTML cuối cùng (render). Trong suốt loạt bài này chúng ta sẽ sử dụng trực tiếp khái niệm directive hoặc câu lệnh cho thuận tiện. Các câu lệnh này bắt đầu bằng chữ v (Vue.js), ví dụ v-if, v-for, v-bind, v-html… và nằm trong các thẻ HTML dưới dạng các thuộc tính của thẻ. Trong ví dụ Hello world! chúng ta có đoạn:

<input v-model="message">

Câu lệnh v-model ở đây trông giống như một thuộc tính của thẻ input, trình biên dịch khi xử lý đoạn mã này nó sẽ biết v-model là câu lệnh nhằm chỉ thị là gán giá trị đối tượng message vào thuộc tính value của thẻ input.

Các câu lệnh có thể có tham số, có thể tham số là một tên một thuộc tính hoặc tên một sự kiện của thẻ HTML. Cú pháp truyền tham số vào câu lệnh là cau_lenh:tham_so.

Ví dụ 1: câu lệnh v-bind có thể có tham số là tên thuộc tính cần gán giá trị. Ví dụ:

<img v-bind:src="imageUrl">

Ở đây src là tham số chính là thuộc tính src của thẻ img. Một ví dụ khác là câu lệnh v-on để xử lý các sự kiện với các phần tử HTML, ví dụ nếu click vào một nút thì sẽ thực hiện một phương thức trong Javascript:

<button v-on:click="doSomething">

thì click là một tham số. Trong Vue.js chỉ có hai câu lệnh có tham số là v-bind và v-on, khi sử dụng các câu lệnh này có thể sử dụng dạng viết tắt tương ứng là : và @. Các ví dụ sử dụng v-bind và v-on có thể được viết lại như sau:

<img v-bind:src="imageUrl">
<img :src="imageUrl">

và

<button v-on:click="doSomething">
<button @click="doSomething">

Kết luận

Qua bài viết chúng ta đã trả lời được Vue.js directive là gì? cách sử dụng để gán dữ liệu hoặc in giá trị đối tượng ra màn hình. Bài viết chỉ dừng lại ở giới thiệu mà chưa đi sâu cụ thể vào từng câu lệnh v-xyz, trong những bài viết tiếp theo, chúng ta sẽ cùng tìm hiểu chi tiết từng câu lệnh của Vue.js.

Bài viết gốc được đăng tải tại allaravel.com

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev