Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Tạo ô nhập liệu cho phép người dùng nhập văn bản và hiển thị nội dung đã nhập bằng VueJS 2.
Trong bài tập này, mình sẽ giúp bạn hiểu cách sử dụng tính năng hai chiều của Vue.js thông qua việc tạo một ô nhập liệu. Mình sẽ xây dựng một giao diện người dùng cho phép họ nhập văn bản và hiển thị nội dung đã nhập ngay bên dưới ô nhập liệu đó.
File HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Binding dữ liệu hai chiều với Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label for="textInput">Nhập văn bản:</label>
<input type="text" id="textInput" v-model="userInput" />
<p>Bạn đã nhập: {{ userInput }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
File JavaScript (app.js):
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
el: "#app",
data: {
userInput: "", // Dữ liệu người dùng nhập vào ô nhập liệu
},
});
Trong đoạn mã trên:
- Mình có một
<input>vớiv-model="userInput"để liên kết dữ liệu giữa ô nhập liệu và Vue instance. - Một đoạn <p> dưới ô nhập liệu sử dụng
{{ userInput }}để hiển thị nội dung đã nhập, thể hiện tính chất hai chiều của binding. - Trong Vue instance, mình có userInput để lưu trữ và theo dõi nội dung mà người dùng nhập vào ô nhập liệu.
Điều này tạo ra một ứng dụng đơn giản trong đó nội dung được nhập trong ô nhập liệu sẽ được hiển thị ngay bên dưới ô đó, minh chứng cho việc sử dụng v-model để liên kết dữ liệu hai chiều với Vue.js.
Mình vừa hoàn thành một ứng dụng nhỏ sử dụng Vue.js để tạo một ô nhập liệu văn bản. Qua dự án này, bạn đã được làm quen với tính năng hai chiều của Vue thông qua directive v-model, cho phép liên kết dữ liệu giữa ô nhập liệu và Vue instance.
Thông qua việc nhập văn bản vào ô nhập liệu và thấy nội dung hiển thị ngay lập tức bên dưới, mình thấy rõ sự linh hoạt và tiện ích của Vue.js 2 trong việc quản lý dữ liệu và tương tác với người dùng.
Tiếp tục thực hành và tìm hiểu thêm các tính năng của Vue.js 2 sẽ giúp bạn hiểu rõ hơn về cách framework này làm việc và áp dụng vào các dự án phức tạp hơn.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo trang web hiển thị tên và tuổi của người dùng bằng VueJS 2
- Tạo danh sách các mục và cho phép người dùng thêm mục mới vào danh sách bằng VueJS 2.
- Tạo ô nhập liệu cho phép người dùng nhập văn bản và hiển thị nội dung đã nhập bằng VueJS 2.
- Tạo trang web cho phép người dùng thay đổi một thuộc tính của một đối tượng bằng VueJS 2.
- Tạo ứng dụng cho phép người dùng thay đổi màu sắc của một phần tử trên trang bằng cách sử dụng bindings CSS bằng VueJS 2.
