用vue element ui组件写一个前端网站页面
时间: 2023-12-17 08:02:25 浏览: 67
好的,我们来写一个简单的前端网站页面,使用的是 Vue.js 和 Element UI 组件库。
首先,我们需要在 HTML 文件中引入 Vue.js 和 Element UI 的 CSS 和 JavaScript 文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element UI Example</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
```
接下来,我们来编写 Vue.js 的代码,将 Element UI 的组件添加到页面中。这里我们创建一个简单的表格,并使用 Element UI 的 Table 组件。
```html
<div id="app">
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
```
```javascript
var app = new Vue({
el: '#app',
data: {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
}
});
```
以上代码定义了一个 Vue 实例,并在该实例中定义了一个名为 tableData 的数组,用于存储表格数据。然后,我们将这个数组传递给 Table 组件的 data 属性。
现在,我们可以在浏览器中查看这个页面,看到一个简单的表格。这就是使用 Vue.js 和 Element UI 组件库创建的前端网站页面。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element UI Example</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
}
});
</script>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)