3 phút làm quen với Vue.js

Vue.js là một thư viện Javascript để xây dựng giao diện người dùng. Năm ngoái nó bắt đầu trở nên khá phổ biến đối với các nhà phát triển web. Nhẹ, tương đối dễ học và mạnh mẽ là ưu điểm của nó.

Bài viết này, trang bị cho một số kiến thức để bắt đầu xây dựng các ứng dụng Vue.js cơ bản. Nào cùng tìm hiểu thôi!

Mẫu cú pháp và dữ liệu

Cốt lõi của Vue.js là một cú pháp mẫu đơn giản như sau:

<div id="myApp">
    {{ message }}
</div>

Ghép chúng với đoạn code JavaScript sau:

var myApp = new Vue({
   el: '#myApp',
   data: {
       message: 'Hello world!'
   }
})

Và nó sẽ cho ra kết quả Hello world! Đang được hiển thị trên trang web.

Phần el: #myApp yêu cầu Vue hiển thị ứng dụng bên trong phần tử DOM bằng id của myApp. Đối tượng data là nơi đặt dữ liệu bạn muốn sử dụng trong ứng dụng của mình. Chúng tôi đã thêm một khoá vào đây, message, và tham chiếu trong HTML của chúng tôi như sau:  {{ message }}.

Vue quan tâm liên kết đối tượng data đến DOM, vì vậy nếu dữ liệu thay đổi, trang cũng sẽ được cập nhật.

Đây được gọi là declarative rendering. Bạn chỉ cần chỉ định những gì bạn muốn cập nhật và Vue sẽ biết thực hiện điều đó.

Bạn có thể thay đổi dữ liệu bằng cách này:

myApp.message = 'Some new value';

Directives

Khái niệm tiếp theo bạn sẽ cần phải học là directives. Directives là các thuộc tính HTML có tiền tố v-, thể hiện cách chúng phản ứng với DOM được hiển thị.

Giả sử chúng ta chỉ muốn render một cái gì đó nếu điều kiện là đúng và ẩn nó đi nếu điều kiện đó là sai. Thì chúng ta sẽ sử dụng v-if.

Trong HTML, nó trông như thế này.

<div id="app">
    <p v-if="seen">Now you see me</p>
</div>

Trong JavaScript:

var app = new Vue({
    el: '#app',
    data: {
        seen: true
    }
})

Điều này sẽ dẫn đến việc hiển thị đoạn “Now you see me” nếu thấy trong dữ liệu là đúng. Để ẩn đoạn văn, bạn có thể đặt thành false, như sau:

app.seen = false;

Ngoài ra có rất nhiều directives khác, như v-for, v-on, v-bind và v-model.

Xử lý Input của người dùng

Một directive quan trọng bạn cần phải học là v-on. Nó sẽ nối một event listener vào phần tử DOM, để bạn có thể xử lý Input của người dùng. Bạn chỉ định loại event sau dấu hai chấm. Vì vậy, v-on:click sẽ “lắng nghe” các cú nhấp chuột.

<div id="app">
    <button v-on:click="myClickHandler">Click me!</button>
</div>

myClickHandler đề cập đến khóa có cùng tên trong các đối tượng methods . Không cần phải nói, đó là đối tượng mà bạn đặt các method của ứng dụng. Bạn có thể bao nhiêu method mà bạn muốn.

var app = new Vue({
    el: '#app',
    methods: {
        myClickHandler: function () {
            console.log('button clicked!');
        }
    }
})

Điều này sẽ giúp nút đăng nhập chuyển người dùng đến giao diện điều khiển khi nhấp vào nút.

Kết hợp tất cả lại với nhau

Bây giờ chúng ta hãy tạo ra một ví dụ mà chúng ta sử dụng cả dữ liệu và method, kết hợp những gì chúng ta đã học được cho đến bây giờ.

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="changeMessage">Click me!</button>
</div>

Cùng với JavaScript:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Start message'
    },
    methods: {
        changeMessage: function () {
            this.message = 'The message has changed!'
        }
    }
})

Ban đầu, nó sẽ hiển thị thông báo “Start” trên trang, tuy nhiên sau khi nhấp chuột nó sẽ hiển thị thông báo này đã thay đổi để thay thế.

Từ khóa this đề cập đến trong ví dụ của Vue này chúng tôi gọi là app. Trong trường hợp này, dữ liệu của chúng ta đã tồn tại, vì vậy chúng ta có thể tham khảo dữ liệu message thông qua this.message.

Hy vọng với những kiến thức cơ bản về Vue.js được cung cấp trong bài viết đã đủ để giúp bạn hiểu về Vue.js và có thể bắt đầu tạo các ứng dụng đơn giản với Vue.js.

Tham khảo thêm các việc làm VueJS lương cao tại Topdev.

Nguồn: freeCodeCamp