页面展示效果
一、页面结构
分为三个部分 head body 以及script
一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择器 ,还有类选择器进行 定义
script 标签体中引入的是一些常见的组件库
LIink 标签体中引入的是一些CSS样式
body中一般是书写页面的结构 , 也就是定义一个DIV , 然后在其中书写书写页面中的各种元素
最后就是script 这里首先通过ID选中DIV , new Vue({ }); 通过el 选中id , data 中书写需要的数据 , methods 里面书写函数方法 , 也就是各种事件
下面是一些简单的html结构 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--这是引入的组件库-->
<script src="js/vue.js"></script>
<!--这是引入的样式-->
<link rel="stylesheet" href="fonts/element-icons.ttf">
</head>
<body>
<!--这里一般书写页面的结构-->
<div id="app">
<h1>我是首页中的标题</h1>
<button @click="dianji">点点我</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
dianji:function (index) {
alert('如果不是为了装逼 ,那么一切将毫无意义!');
}
}
});
</script>
</html>
二、涉及到的技术知识
1、页面布局
<div id="one" align="center"> </div>
2、导航菜单
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" align="center">
//这是子菜单选项
<el-menu-item index="1"><font color="#000000">首页</font></el-menu-item>
</el-menu>
3、表单
<el-form align="center"> </el-form>
4、Button按钮
<el-button type="primary" @click.native.prevent="update" :loading="addLoading">确定</el-button>
5、Pagination分页
<el-pagination layout="prev,pager,next" :total="50"> </el-pagination>
6、弹框
<el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body="true">
</el-dialog>
7、V-model 展示数据
<el-input v-model="form.id" autocomplete="off"></el-input>
8、表格中展示数据
table 中展示的数组中的整体数据 用的是:data
column展示的每一个集合中某一点属性 用的是prop
<el-table :data="newsList" style="width:100%" align="center">
<el-table-column prop="id" label="公司代号" width="180"></el-table-column>
</el-table>
9、最难点
按钮的功能是最难实现的部分 , 就是一些事件执行的函数功能 , 也就是一些算法 ;
这一部分在第五大项集中进行讲解
三 、如何去书写一个页面结构
首先 , 最外层肯定是一个DIV , 然后DIV中去书写一个el -form , 然后用el-row去分很多行 , 每一行中去书写自己需要的内容 ,可以是图片 , 也可以是按钮 , 也可以是一段文字 ,然后呢书写结构以后 ,样式 事件 , 都是在标签体中去进行定义 ;
四、易错点
1、首先必须引入组件库 , 以及常用的样式
你创建一个文件夹 ,然后把这些 后缀名为js css的文件给导入进去
2、你的html页面必须直接创建在根目录文件下 ,不要自己手动创建一个文件夹 ,然后在里面进行书写 ,不然你的组建组不起作用
3、弹框也是非常的费劲
五、难点
最难的点永远都是算法的知识 , 这一部分知识 你会就是会 ,不会给你再多时间也没用 , 就是增加、删除、修改、查询几个按钮功能的实现
1、弹框部分
1.1 这一段是就是 ,就是你执行按钮操作之前出现的提示信息 , 就是相当于询问你是否确定这样做
记住关键字this.$confirm就行,格式自己复制粘贴就行
this.$confirm('确认进行添加','是否继续?','提示',{
confirmButtonText:'确定',
confirmButtonText:'取消',
}
1.2 下面这一段是操作完成之后的提示信息 ; 提示你是执行成功了还是没有
记住关键字this.$message就行 ,格式自己复制粘贴就行
this.$message({
type: 'success',
message:'添加成功',
})
1.3 这是编辑的弹框部分
<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true">
<!--这就是一个表格-->
<el-form :model="form" >
<!--公司ID-->
<el-form-item label="公司ID">
<el-input v-model="form.id" autocomplete="off"></el-input>
</el-form-item>
<!--公司名称-->
<el-form-item label="公司名称">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<!--公司地址-->
<el-form-item label="公司地址">
<el-input v-model="form.adress" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<!--确定, 取消 按钮-->