[Series-Vue-03] – Tìm hiểu về Data & Methods trong Vue JS

0
174
học vue js cơ bản
học vue js cơ bản
[Series-Vue-03] – Tìm hiểu về Data & Methods trong Vue JS
5 (100%) 6 votes

Mở đầu

bài trước chúng ta đã tìm hiểu về cú pháp và Vue Instance, code demo minh họa một vài dòng. Trong bài này tiếp tục sẽ đi tới giới thiệu về data methods, 2 cái khá quan trọng và gặp rất nhiều trong code Vue JS.

DATA

Chứa các biến trong Vue, chạy xuyên suốt trong dự án.

Ở bên file app.js, ta sẽ khai báo 2 biến name & website chứa 2 giá trị như sau

var app = new Vue({
    el: "#app",
    data() {
        return {
            name : 'Vue JS demo',
            website : 'aduka.asia'
        }
    }
})

Và bên index.html sẽ hiển thị 2 giá trị đó ra DOM bằng cách cho giá trị vào cặp {{ }}

<div id="app">
    <h1>Name : <b>{{ name }}</b></h1>
    <h2>Website : <b>{{ website }}</b></h2>
</div>
<script src="app.js"></script>

Nó sẽ hiển thị kết quả

METHODS

Chứa các function xử lý sự kiện trong dự án

Viết một đoạn code với methods như sau, trong đó chứa function hello()

var app = new Vue({
    el: "#app",
    data() {
        return {
            name : 'Vue JS demo',
            website : 'aduka.asia'
        }
    },
    methods : {
        hello() {
            return 'OK'
        }
    }
})

Bây giờ cùng show ra kết quả bên phía index.html, thử xem nó có hiện ra cái chữ ‘OK’ kia không nhé.

Nó không hiển thị ra được, bởi vì nó là một function, mà ta lại hiện thị nó như một data, giống như cái name và website. Vậy giờ cần phải sửa lại là {{ hello() }}, thì sẽ cho ra kết quả như mong đợi.

Bây giờ sẽ thay vì cố định chữ ‘OK’, ta truyền tham số vào trong function hello() xem sao. Ở đây mình truyền tham số flag với giá trị mặc định là 'không có gì', thì lúc này nó sẽ hiển thị ra dòng chữ ‘không có gì’.

Ở file index.html, ta sẽ truyền thử một giá trị vào function hello('Em đang học Vue'), giờ thì F5 lại trình duyệt, kết quả sẽ hiển thị là Em đang học Vue.

<div id="app">
    <h1>Name : <b>{{ name }}</b></h1>
    <h2>Website : <b>{{ website }}</b></h2>
    <h3>Methods : {{ hello('Em đang học Vue') }}</h3>
</div>

Vậy là trong quá trình làm việc với methods, ta có thể truyền tham số vào trong function để xử lý cho các mục đích khác nhau. Giờ các bạn có thể truyền giá trị data vào trong methods thử nhé : hello(name), hello(website). Sẽ ra được kết quả của chính data đó.

Tổng kết

Thông qua các ví dụ trên, các bạn đã ít nhiều hiểu về datamethods trong VueJS, khái niệm rất quan trọng và làm việc rất nhiều trong dự án. 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.