关于vue2使用element样式不显示
本帖最后由 ∫護着妳佉遠方 于 2022-1-4 15:19 编辑各位大佬，这个错误在哪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格组件</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
label="操作"
width="180">
<el-button type="warning">编辑</el-button>
<el-button type="danger">删除</el-button>
</el-table-column>
</el-table>
</template>
</div>
</body>
<!--引入Vue-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#div',
date: {
tableData: [{
date: '2016-05-02',
name: '张三',
address: '上海市普陀区金沙江路 15180 弄'
}, {
date: '2016-05-04',
name: '李四',
address: '上海市普陀区金沙江路 15171 弄'
}, {
date: '2016-05-01',
name: '王二',
address: '上海市普陀区金沙江路 15192 弄'
}, {
date: '2016-05-03',
name: '麻子',
address: '上海市普陀区金沙江路 15163 弄'
}]
}
})
</script>
</html>
问题：不能显示数据，可以显示表格，引入的vue和element应该没有错展示https://seikim.com/i/2022/01/04/p3wx4f.png
现在都不用html了 你用vue的话直接上npm吧一般不会你这样引用的 你第一个引用路径错了，建议你参考官网的hello word，第二个 网络引入css 也没有引入 你放的位置好像也有问题。这里面https://element.eleme.cn/#/zh-CN/component/installation 有一个hello word复制粘贴一下然后再去研究吧
element 的 index.js 文件要在 vue的js文件引入之后再引入 element的ui是使用vue的组件进行封装的 所以要先引入vue.js 照着element的示例写就好了 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<!-- 切记：先引用 Vue2.js 文件 -->
<script src="../Vue/vue2.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>
<button>一个按钮</button>
<br>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el: "#app",
});
</script>
</html>
错误1：引用顺序出错，应该先引用 vue2.js，再引用 elementUI
错误2：引用 element 时，少了个符号 " lifeixue 发表于 2022-1-4 14:43
感谢你的回复，已解决 像6楼一样代码贴好看点人家会更乐意帮你，前端基本的审美还是要有的 Richex 发表于 2022-1-4 15:14
像6楼一样代码贴好看点人家会更乐意帮你，前端基本的审美还是要有的
我刚想问，你们是怎么把代码贴的这样的，可以直接按照格式复制，还有行数 楼上的都说错了。
new Vue({
el: '#div',
date: {
tableData: [{
这一块实例化vue的时候应该是data，而不是date，单词写错了。另外建议使用
data() {
return {
tableData: []
}
}
页:
[1]
2