Chào các bạn đã đến với series VueJS của Wolfactive tụi mình. Sau một hồi tìm tụi mình tìm tòi, và suy nghĩ nên chia sẽ những gì cho các bạn? Thì cuối cùng tụi mình quyết định cho ra mắt một sản phẩm. Đó là, VueJS., một trong những sản phẩm mà mình sẽ chia sẽ sau màn COMEBACK CỰC MẠNH này của tụi mình.
1/ Vậy VueJS là gì?
VueJS là một framework khá nổi tiếng, nó được xây dựng theo mô hình Step by Step, nên khá là tiện và rất đễ sử dụng và phát triển website trên nền Front-end. Vue hỗ trợ khá tốt cho các bạn, nó cũng rất dễ học và xây dựng website hiệu quả, đặc biết là nó sẽ xây dựng website của các bạn theo dạng SPA (Single Page Application) nên cải thiện performance khá là tốt.
2/ Các cách sử dụng Vue
Có 2 cách chính, để chúng ta sử dụng Vue một cách hợp lí nhất:
1 – Chúng ta thể sử dụng Vue, nhằm mục đích kiểm soát nội dung, data,… ở các phần của website một cách tự động hóa và thuận lợi nhất. Ví dụ, bạn hãy tưởng tượng một website của bạn bao gồm các thành phần: Header, body, sidebar, footer. Thì các bạn có thể sử dụng Vue để dynamic các elements trong Sidebar hết mức có thể.
2 – Chúng ta sử dụng Vue, để xây dựng những phần widget cho website. Như khung chat trên website, Sidebar tương tác,… chúng ta có thể sử dụng Vue để làm.
Bên cạnh đó, chúng ta còn có thể sử dụng Vue để render và kiếm soát toàn bộ element trên website. Nhằm hướng đến xây dựng website theo dạng SPA. Tức là sever chỉ render ra duy nhất nhất tất cả các thông tin website trong đúng một page duy nhất.
3/ Xây dựng website với javascript
Bây giờ mình sẽ bắt đầu thử xây dựng một demo nhỏ bằng cách sử dụng Javascript để xử lí nhé. Cụ thể như sau, mình sẽ xây dựng một website demo nhỏ với chức năng add goal và được xử lí bằng javascript.
Đầu tiền mình xây dựng một cấu trúc website như sau trong file html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" />
<button>Add Goal</button>
</div>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>Tiếp đến mình sẽ tiếp tục tạo một file Css và Javascript
style.css
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
#app {
margin: 3rem auto;
max-width: 40rem;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
label, input {
margin-bottom: 0.5rem;
display: block;
width: 100%;
}
label {
font-weight: bold;
}
ul {
list-style: none;
margin: 1rem 0;
padding: 0;
}
li {
margin: 1rem 0;
padding: 1rem;
border: 1px solid #ccc;
}app.js:
const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul');
function addGoal() {
const enteredValue = inputEl.value;
const listItemEl = document.createElement('li');
listItemEl.textContent = enteredValue;
listEl.appendChild(listItemEl);
inputEl.value = '';
}
buttonEl.addEventListener('click', addGoal);Oki, sau khi xây dựng xong như trên bạn sẽ có được một giao diện như sau:
Khi các bạn nhập text và nhấn add Goal. Thì nó sẽ tự động add thêm một element vào bên dưới và tự động làm trống field input của bạn. Như hình dưới
4/ Xây dựng lại website theo Vue
Và bây giờ mình sẽ xây dựng lại website trên, bằng cách sử dụng vue nhé. Trước hết, mình sẽ thay đổi nội dung bên trong body
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" v-model="enteredValue" />
<button v-on:click="addGoal">Add Goal</button>
</div>
<ul>
<li v-for="goal in goals">{{ goal }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>Còn bây giờ là mình sẽ thay đổi lại toàn bộ nội dung code trong file app.js
Vue.createApp({
data() {
return {
goals: [],
enteredValue: ''
};
},
methods: {
addGoal() {
this.goals.push(this.enteredValue);
this.enteredValue = '';
}
}
}).mount('#app');Như vậy là đã xong. Mình đã rebuild lại website bằng cách sử dụng vue.
5/ Vue và Vanila Javascript
Bây giờ ta cùng nhau so sánh với nhau nhé, bằng cách so sánh giữa 2 đoạn code project trên.
Như các bạn đã thấy ở 2 project trên mình đều xây dựng cấu trúc và chức năng như nhau. Với mục đích là add Goal. Đối với project sử dụng Vue, các bạn có thể thấy được là, các key xử lí của Vue được ghi trực tiếp trên element html trong file html của mình. Và nó được xử lý thông qua data và phương thức mình đã tạo ở file app.js. Nhìn vào chúng ta có thể thấy là nó đơn giản hóa code hơn, xử lí vấn đề ổn hơn so với Vanila Javascript. Nhờ vậy mà chúng ta có thể sử dụng vue để xây dựng các website mô hình lớn mà sẽ gặp ít vấn đề cần phải xử lí hơn.
Trong khi đó đối với Vanila Javascript, nếu như chúng ta xây dựng một mô hình website có quy mô lớn hơn, chúng ta sẽ gặp lỗi khó xử hơn và phức tạp hơn. Điều đó cũng khiến cho việc cải thiện performance website nếu chỉ sử dụng mỗi JS là rất khó.
Vì vậy ta có thể sử dụng vue để xử lí các website ở mô hình lớn là hợp lí nhất. Tuy nhiên cái gì thì cũng có 2 mặt cả. Được cái này mất cái kia. nên tùy thuộc vào độ ta sử dụng và kết hợp giữa Vue và Vanila JS để xử lí vấn đề tốt hơn.
6/ Cài đặt môi trường sử dụng Vue.
Việc cái đặt Vue khá đơn giản, các bạn chỉ cần việc copy đường dẫn vue ở app trên và đưa vào website của các bạn. Hoặc các bạn có thể xem thêm cách cài đặt tại vuejs.org.
7/ Kiến thức bạn sẽ được.
Đến với series VueJS của Wolfactive. Các bạn sẽ được tiếp cận kiến thức từ cơ bản đến nâng cao của Vue. Bao gồm:
| Section 1: Giới thiệu và tổng quan về VueJS | Section 2: Khái niệm cơ bản và cốt lỗi, DOM | Section 3: Render nội dung theo kiện |
| Section 4: Course Project Devil Monster Player (Kimetsu no yaiba) | Section 5: Compoment | Section 6: Setup môi trường và workflow với Vue CLI |
| Section 7: giao tiếp với compoment | Section 8: Compoment nâng cao | Section 9: Project – The Learning Resources App |
| Section 10: Forms | Section 11: Http Requests | Section 12: Routing: Xây dựng “Multi-Page” Single Page Applications |
| Section 13: Animations & Transitions | Section 14: Vuex | Section 15: Project: “Find a Coach” Web App |
| Section 16: Vue & Authentication (Xác thực) | Section 17: Optimizing và Deploying Vue Apps | Section 18: Optimizing & Deploying Vue Apps |
| Section 19: Tái sử dụng Function: Mixins & Custom Composition Functions |
8/ Tổng kết
Như vậy mình đã giới thiệu cho các bạn tổng quan về Vue ở bài này. So sánh giữa Vue và JS, Cài đặt môi trường và các kiến thức bạn sẽ nhận được ở series này. Ở bài kế, tụi mình sẽ đi vào section đầu tiên, đó là khái niệm và DOM với Vue. Bên cạnh đó mọi nhớ follow Fanpage của tụi mình tại Wolfactive nhé, Để có thể cập nhật kiến thức nóng hổi vừa thổi vừa code luôn nhé.