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:
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 created và mounted 😀 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
One thought on “Khởi tạo một VueJS instance đơn giản”