Bài 2: Mở rộng ứng dụng hello world với input nhập vào

Code tiếp từ Bài 1

1. code ở file html

- thêm thẻ input để người dùng nhập vào chữ tùy ý.

- Thẻ input có khai báo directive trong vuejs như sau:
v-on:input="changeTitle"
- Lưu ý là thẻ input này nằm trong thẻ div có id là app
- với directive v-on:input thì mỗi lần người dùng nhập gì trong ô input thì vuejs sẽ lắng nghe sự kiện nhập này và binding giá trị.
- changeTitle: là function bạn muốn gọi khi người dùng nhập vào ô input, bạn có thể đặt tên tùy ý, phù hợp với ngữ cảnh cần xử lý.

2. code ở file javascript

- Nếu bạn đã đọc Bài 1, thì ở đây tôi thêm tiếp 1 property cho đối tượng này là methods
- Trong property methods này, tôi code 1 method có tên là changeTitle (tên này tôi đã định nghĩa khi thêm thẻ input ở file html)
- changeTitle - tôi truyền vào 1 event (event người dùng nhập vào ô input), bạn có thể đặt tên khác event cũng được
- Tại đây tôi gọi title để thay đổi nội dung title theo người dùng nhập vào. Ở đây tôi dùng this.title - vì title đang thuộc đối tượng hiện tại nên bạn có thể dùng this.title

Note:

những từ khóa như el, data, methods mà bạn đã thấy là các properies khi khai báo 1 đối tượng Vuejs.

3. kết quả

Happy coding!

thelam92