Data flow trong VueJS Component

Khởi tạo một VueJS instance đơn giản

Hi các bạn,

Nay mình sẽ khởi tạo một chuyên mục mới, chính là VueJS. Một trong những framework JS đang rất nổi hiện tại nhờ do cái performace tốt của nó, lightweight và đơn giản, dễ tiếp cận, hỗ trợ nhiều browser, trong đó có IE.

Theo số Stars tại Github thì VueJS đã vượt mặt qua rất nhiều so với ReactJS.

Nó là một framework đã khắc phục và tối ưu hơn với những framework cũ như AngularJS.

Vậy nên, mình sẽ tìm hiểu dần về VueJS và tìm hiểu một số tricks, tips của VueJS nhé :D.

1/ Import VueJS

Để import VueJS vào site, ta sử dụng source sau:

<script src="https://unpkg.com/[email protected]/dist/vue.js" type="text/javascript"></script>

Tương lai mình sẽ qua các khác nữa, đây là cách mình sử dụng Vue trên một page và không cần phải build script.

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

Chỉ đơn giản, vài dòng như sau:

var vueInstance = new Vue({
    el: "#content-body",
});

3/ Structure của VueJS instance

Mình sẽ giới thiệu kỹ hơn về Vue Instance, như sau:

var vueInstance = new Vue({
	el: "#content-body",
	components: {
		// your components goes here
		'show-title': TitleComponent // <show-title></show-title>
	}
	data: {
		// data goes here
		title: "", // define
	},
	methods: {
		// method function goes here
		setTitle: function(name) {
			this.title = name;
		}
	},
	computed: {
		// computed data method
		upperTitle: function() {
			return this.title.toUpperCase();
		}
	},
	created: function() {
		// when Vue instance just created - learn more in vue life cycle
	},
	mounted: function() {
		// when Vue instance mounted into page - learn more in vue life cycle
	}
});

Đây là những property cơ bản mà ta sử dụng trong Vue khi tạo ra instance.

Ngoài ra, mounted, created nó có liên quan tới Vue Life Cycle, cụ thể như sau:

VueJS instance

Với diagram này, ta có thể thấy được tất cả các hàm “HOOKS” vào cái cycle của VueJS từ đầu đến cuối. Ta có thể define ra và sử dụng nếu cần thiết. Đa sốứng dụng thì vẫn tập trung sử dụng nhiều hàm createdmounted 😀 vì nó khá là đủ 😀

4/ Kết luận

Với bài này, ta sẽ đơn giản biết được cách khởi tạo VueJS instance rồi nhé 😀

Ở bài sau, mình sẽ nói tới về data và method, cũng như một số directives của VueJS 😀

Tham khảo thêm về VueJS instance tại: https://vuejs.org/v2/guide/instance.html

Cám ơn các bạn đã quan tâm theo dõi!

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

facebook
Seth Phát

Seth Phát

Mình là Phát - biệt danh Seth Phát. Hiện đang là một Sr. Full-Stack Engineer. Mình là một người yêu thích và đam mê lập trình và hiện tại đang theo về phần Web là chủ yếu. Mạnh Back-end và khá Front-end, vẫn đang theo đều cả 2 :v. Còn gì bằng khi được làm những thứ mà mình yêu thích, đam mê ;)

One thought on “Khởi tạo một VueJS instance đơn giản

Leave a Reply

Your email address will not be published. Required fields are marked *

Bình luận qua Facebook