前端css、js、bootstrap、vue2.x、ajax查漏补缺
在前端开发中，CSS、JavaScript、Bootstrap、Vue 2.x 和 AJAX 是常用的技术。以下是一个简单的例子，展示如何使用这些技术创建一个简单的用户界面，该界面可以通过 AJAX 异步获取数据并显示在表格中。
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: []
},
created() {
this.fetchUsers();
},
methods: {
fetchUsers() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/users',
type: 'GET',
dataType: 'json',
success: (data) => {
this.users = data;
},
error: (error) => {
console.error('Error fetching users:', error);
}
});
}
}
});
</script>
</body>
</html>这段代码首先定义了一个 Vue 实例，在实例被创建时（created 钩子），通过 AJAX 从一个示例用户数据 API 获取用户数据，并将其存储在 Vue 实例的 users 数组中。然后，使用 Vue 的 v-for 指令在表格中迭代 users 数组，将每个用户的信息显示在表格中。这个简单的例子展示了如何将这些技术结合在一起，以创建一个响应用户界面并能够异步获取数据。
评论已关闭