GIỚI THIỆU
CĂN BẢN
NÂNG CAO
VUEJS 2X CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

VueJS 2: Tìm hiểu Methods

Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình hướng đối tượng phải không nào,  nó là những hàm đặc biệt thể hiện cho những hành động của một đối tượng. Vậy trong VueJS cách trình bày methods như thế nào để đúng chuẩn thì trong bài này chúng ta cùng tìm hiểu nhé.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Methods trong VueJS

Việc phân chia từng phần trong VueJS giúp việc quản lý của nó trở nên đơn giản hơn, ví dụ với dữ liệu thì bạn sẽ lưu trữ trong key data.

Ví dụ
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Chào mừng đến với freetuts.net',
        author : "thehalfheart@gmail.com"
    }
});

Nếu chúng ta muốn tạo một hàm để xử lý dữ liệu thì có thể tạo nó ngay trong data luôn.

Code RUN
<div id="example">
    <p>"{{ showMessage() }}"</p>
</div>
<script language="javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Chào mừng đến với freetuts.net',
            showMessage : function(){
                return  "[" + this.message + "]";
            }
        }
    });
</script>

Cách làm này không thực sự hay lắm, vì vậy VueJS tạo ra một  key methods để chúng ta tạo các hàm ở bên trong đó. Như ở ví dụ trên thì mình sẽ viết lại như sau.

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

Code RUN
<div id="example">
    <p>"{{ showMessage() }}"</p>
</div>
<script language="javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Chào mừng đến với freetuts.net'
        },
        methods : {
            showMessage : function(){
                return  "[" + this.message + "]";
            }
        }
    });
</script>

Việc phân chia nơi lưu trữ data và methods giúp cho chương trình sáng hơn, quản lý code dễ hơn.

Lưu ý: Việc xử lý của các methods sẽ không được cached, vì vậy cho dù bạn gọi một method nhiều lần thì nó cũng sẽ tính toán lại từ đầu. Ví dụ bạn có một method tính tổng hai số A và B và bạn gọi method này 2 lần thì nó sẽ thực hiện phép toán cộng hai lần, điều này khác hoàn toàn với computed.

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Xử lý Custom Events trong VueJS 2

Top