Đúng như tiêu đề của bài viết ” học Javascript – Jquery – Vue js qua từng bài tập ” thì mình sẽ xây dựng các bài tập từ căn bản đến thực tế. Mục đích của loạt bài hướng dẫn này là mình muốn tạo nên một loạt bài viết chất lượng. Trong một bài tập thì mình sẽ áp dụng Javascript thuần, library Jquery và Framework Vue js để thực hiện một bài tập bằng 3 cách.
Yêu cầu:
- Nắm được Javascript căn bản củ thể là phần JS HTML DOM, tất nhiên thì chưa nắm vững cũng không sao.
- Khi đọc xong một bài viết bắt tay vào thực hành với bài tập đó.
- Nếu như trong quá trình làm bài tập gặp phải một vấn đề gì đó thì bạn nên hỏi google. Nếu không tìm được câu trả lời thì mới để lại comment. Bạn nên nhớ google là một kĩ năng không thể thiếu của Dev.
Bài tập căn bản 01: hello world !
Click vào đây để xem demo.
Mô tả bài tập
- Khi user nhập vào ô input nội dung tiêu đề sẽ thay đổi
- Nội dung của tiêu đề liên kết với ô input
# Javascript
Mình sẽ code và giải thích chi tiết ngay phía dưới.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Example 01</title>
<style>
#app {
margin-top: 5rem;
}
h2 {
text-align: center;
}
input {
text-align: center;
padding: 5px 20px;
}
form {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2>hello world !</h2>
<form>
<input type="text" value="hello world !">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>Chúng ta sẽ sử dụng chung file index.html này cho cả javascript, jquery và vue js. Ở trên thì mình đã thêm một số style để căn giữa.
script.js
document.addEventListener('DOMContentLoaded', function() {
let content = document.querySelector('h2');
let input = document.querySelector('input');
input.addEventListener('keyup', function() {
let text = input.value;
content.innerText = text;
})
})document.addEventListener('DOMContentLoaded', function() { })bắt sự kiện document loadded. Tức là nếu như html đã loaded thì blog code bên trong sẽ được thực hiện.- Truy xuất 2 element
h2vàinput - Bắt sự kiện
keyuplấy value của input thay thế cho nội dung của tiêu đềh2.
Vậy là mình đã thực hiện xong bài tập này bằng javascript. Tiếp theo thì chúng ta sẽ thực hiện nó bằng Jquery.
# Jquery
jquery.js
Với jquery thì mình sẽ viết bằng 2 cách
C1.
$(document).ready(function() {
let content = $('h2');
let input = $('input');
input.on('keyup', function() {
let text = input.val();
content.text(text);
})
})
Ý tưởng giống với Javascript thuần chỉ cách viết khác đi vì chúng ta sử dụng đối tượng Jquery.
$(document).ready(function() {})ở đây cũng là bắt sự kiện document loaded- Tiếp theo thì mình cũng truy xuất 2 element kia
- Và cuối cùng cũng là bắt sự kiện
keyuplấy value của input thay thế cho nội dung của tiêu đềh2.
C2.
$('input').keyup(() => {$('h2').text($('input').val());
- Chỉ cần một dòng 😀 , ý tưởng thì nó không khác gì cách trên nhưng ở đây mình không bắt sự kiện document loaded và mình cũng không tạo ra 2 biến để chứa 2 element kia. Mà truy xuất trực tiếp khi sự kiện keyup xảy ra
- Chúng ta nên tạo ra 2 biến để truy xuất từng element vì làm như c2 thì cứ mỗi lần gõ một phím thì Jquery lại phải truy xuất lại từng element đó.
Nói chung thì Jquery sẽ đỡ khổ hơn Javascript thuần rồi :D. Và sau đây là tận cùng của sự sung sướng
# Vue js
index.html
<div id="app">
<h2>{{content}}</h2>
<form>
<input type="text" value="hello world !" v-model="content">
</form>
</div>Với vue thì mình phải sửa lại code html một chút, để sử dụng template của nó ta cần đặt root element bao quanh template. Ở đây là <div id="app"> và mình có sử dụng một số directive của vue {{content}} , v-model.
vue.js
let app = new Vue({
el: "#app",
data: {
content: 'hello world !'
}
})Chúng ta chẳng cần phải truy xuất element hay bắt sự kiện nào cả chỉ cần thiết lập các giá trị cho đối tượng app và khai báo các thuộc tính đó trong html thì đã có thể thực hiện xong bài tập này. Vue Js nó đã làm những thao tác đó cho chúng ta rồi. Chúng ta sẽ tìm hiểu Vue js trong những bài tập tiếp theo.
Xem bài viết tiếp theo tại đây
Để lại một bình luận