- 现在流行数据与视图分离，就像安卓开发里布局文件里控件的text属性不建议使用硬编码数据，而建议使用字符串资源文件里
strings.xml定义的字符串变量。
一、提出任务
- 编写代码，显示如下表格
二、完成任务
- 在网页里显示一个表格，数据可以写死在表格单元里，也可以表格与数据分离，数据通过脚本来设置。
（一）利用DOM来给表格设置数据
- 创建
test01.html文件
<!DOCTYPE html>
<html>
<head>
<title>test01</title>
</head>
<body>
<div id='student'>
<table border='1' cellpadding='5'>
<tr>
<td>学号</td>
<td id="id"></td>
</tr>
<tr>
<td>姓名</td>
<td id="name"></td>
</tr>
<tr>
<td>性别</td>
<td id="gender"></td>
</tr>
<tr>
<td>年龄</td>
<td id="age"></td>
</tr>
<tr>
<td>专业</td>
<td id="major"></td>
</tr>
<tr>
<td>电话</td>
<td id="telephone"></td>
</tr>
</table>
</div>
<script>
document.querySelector('#id').innerText = '20220101';
document.querySelector('#name').innerText = '萌萌哒';
document.querySelector('#gender').innerText = '男';
document.querySelector('#age').innerText = '20';
document.querySelector('#major').innerText = '大数据技术';
document.querySelector('#telephone').innerText = '13934345678';
</script>
</body>
</html>
- 在默认浏览器里打开
（二）利用jQuery来给表格设置数据
- 创建
test02.html文件
<!DOCTYPE html>
<html>
<head>
<title>test02</title>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>
<body>
<div id='student'>
<table border='1' cellpadding='5'>
<tr>
<td>学号</td>
<td id="id"></td>
</tr>
<tr>
<td>姓名</td>
<td id="name"></td>
</tr>
<tr>
<td>性别</td>
<td id="gender"></td>
</tr>
<tr>
<td>年龄</td>
<td id="age"></td>
</tr>
<tr>
<td>专业</td>
<td id="major"></td>
</tr>
<tr>
<td>电话</td>
<td id="telephone"></td>
</tr>
</table>
</div>
<script>
$('#id').html('20220101');
$('#name').html('萌萌哒');
$('#gender').html('男');
$('#age').html('20');
$('#major').html('大数据技术');
$('#telephone').html('13934345678');
</script>
</body>
</html>
- 在浏览器里打开
- 利用DOM和jQuery给表格设置数据，本质上是一样的，都是获取每个页面元素，然后对每个元素设置属性值，数据是分散的，没有打包成一个数据集合体，比如json，而Vue采用的方式就是打包提供数据的方式。
（三）利用Vue来给表格设置数据
- 创建
test03.html文件
- Vue常量
Student提供了一个data()函数，返回JSON数据 - 打包的一组键值对数据 - Vue基于常量
Student创建Vue实例或应用，调用mount()函数，绑定页面元素，然后页面元素里就可以通过{{key}}的方式获取data()函数返回的JSON数据
<!DOCTYPE html>
<html>
<head>
<title>test03</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id='student'>
<table border='1' cellpadding='5'>
<tr>
<td>学号</td>
<td>{{ id }}</td>
</tr>
<tr>
<td>姓名</td>
<td>{{ name }}</td>
</tr>
<tr>
<td>性别</td>
<td>{{ gender }}</td>
</tr>
<tr>
<td>年龄</td>
<td>{{ age }}</td>
</tr>
<tr>
<td>专业</td>
<td>{{ major }}</td>
</tr>
<tr>
<td>电话</td>
<td>{{ telephone }}</td>
</tr>
</table>
</div>
<script>
const Student = {
data() {
return {
id: 20220101,
name: '萌萌哒',
gender: '男',
age: 20,
major: '大数据技术',
telephone: '13934345678'
}
}
}
Vue.createApp(Student).mount('#student')
</script>
</body>
</html>
- 在浏览器里打开
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
