Khởi tạo và truy xuất data và methods VueJS

Hi các bạn,

Ở bài trước chắc hẳn bạn đã biết cách tạo ra 1 Vue Instance đơn giản. Và nay ta sẽ sử dụng 2 property trong Vue Instance lúc ta khởi tạo, đó chính là:

• data
• methods

Cả 2 đều là 1 js object nhé (vd data: {}).

Cụ thể đây là một instance cơ bản:

var instance = new Vue({
	el: "#app",
	data: {
		
	},
	methods: {
		
	}
});

Ko giống như các framework JS khác, ta sẽ bỏ các methods và data muốn sử dụng vào 2 property này.

Lợi ích là dễ quản lý và dễ phân biệt, ko có lung tung (vd như AngularJS nó rất bad về vụ này).

Giờ chúng ta sẽ khởi tạo và truy xuất data và methods VueJS nhé 😀

1/ Khỏi tạo data đơn giản

Khai báo thử 1 string và 1 integer number.

var instance = new Vue({
	el: "#app",
	data: {
		number: 10,
		text: "Hello SethPhat"
	}
});

Xuất dữ liệu ra view (dùng  dấu {{ dataName }})

<div id="app">
	<p>Text: {{text}}</p>
	<p>Number: {{number}}</p>
</div>

Các bạn sẽ thấy trên màn hình của mình sẽ ra 2 text như bên dưới hình sau:

Và trong data, bạn có thể define mọi loại data mà bạn muốn như: text, string, array, object,…

2/ Khởi tạo methods đơn giản

Function đơn giản

Tạo một function đơn giản và return về data:

methods: {
		doMath: function() {
			return 10+10;
		}
	}

Chạy function để xuất dữ liệu:

<p>Math result: <b>{{doMath()}}</b></p>

Kết quả:

Function truy cập vào data trong instance hoặc chạy một hàm đã có trong instance:

var instance = new Vue({
	el: "#app",
	data: {
		number: 10,
		text: "Hello SethPhat"
	},
	methods: {
		doMath: function() {
			return 10+10;
		},
		finishMath: function() {
			var result = this.number + this.doMath();
			return result;
		}
	}
});

Chạy function như phía trên để xuất ra dữ liệu xem thử, kết quả:

3/ Kết luận về khởi tạo và truy xuất data và methods VueJS

Đây là cách cơ bản để bạn có thể khởi tạo, sử dụng và truy xuất data & method với VueJS, khá là đơn giản nhỉ? 😀

Bài sau mình sẽ qua các directives của VueJS nhé 😀

Mình sẽ kết thúc bài “Khởi tạo và truy xuất data và methods VueJS” tại đây.

Cám ơn các bạn đã quan tâm.

Tìm hiểu thêm tại: https://vuejs.org/v2/guide/instance.html#Data-and-Methods

Chuyên mục VueJS: https://sethphat.com/sp-category/lap-trinh/vuejs

Bài VueJS trước: https://sethphat.com/sp-660/khoi-tao-mot-vuejs-instance-don-gian