西宁网站建设 哪家好,装修网站vr全景图怎么做,全国工程信息查询平台,wordpress略缩图插件黑马程序员JavaWeb开发教程 文章目录 一、快速入门#xff08;1#xff09;什么是Element#xff08;2#xff09;快速入门 二、常见组件1、表格2、分页#xff08;Pagination#xff09;3、表单 三、案例#xff08;1#xff09;根据页面原型完成员工管理页面开发1什么是Element2快速入门 二、常见组件1、表格2、分页Pagination3、表单 三、案例1根据页面原型完成员工管理页面开发并通过Axios完成数据异步加载 一、快速入门
1什么是Element
Element是饿了么团队研发的一套为开发者、设计师和产品经理之魂被的基于Vue2.0的桌面端组件库组件组成网页的部件例如 超链接、按钮、图片、表格、表单、分页条等等官网https://element.eleme.cn/#/zh-CNListener
2快速入门
安装ElementUI组件库在当前工程的目录下在命令行执行命令npm install element-ui2.15.3
ctrlc 终止当前程序 点击导航栏上的 查看 - 终端在终端中输入上边的命令默认安装位置是node_modules目录下【注如果在VSCode终端下载没有再node_modules目录下出现的话那就使用winr 输入cmd 打开命令行进行下载】
引入ElementUI组件库
在main.js的适当位置加入以下三行
访问官网复制组件代码调整
在 views 目录下新建一个目录 element 存放element的以下组件并在element 目录下新建 ElemView.vue【采用驼峰命名否则可能会报错】在观望中复制代码下来粘贴到对应的文件中即 ElemView.vue之后修改App.vue 文件中的内容使页面能够显示 ElemView.vue 中的样式ElemView.vue 代码
// 编写htm的代码是模板部分
templatedivel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row/div
/template// 定义vue当中的数据模型和方法
script
export default {};
/script// 定义CSS的样式
style/styleApp.vue 代码
templateelement-view/element-view
/template
script
import ElementView from ./views/element/ElementView.vue
export default {components: { ElementView },
}
/scriptstyle/style浏览器结果
二、常见组件
其实这里的组件使用就是到官网去找到自己想使用的组件将代码复制过来即可
1、表格
ElementView.vue 中的代码
!-- HTML代码 --
template!-- h1{{ message }}/h1 --div!-- 按钮组件 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-rowbr!-- 表格组件 --el-table :datatableData border stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column/el-tablebr/div/template!-- vue数据 --
script
export default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}},methods: {}}
/script!-- CSS样式 --
style/style2、分页Pagination
当数据量过多时使用分页分解数据
3、表单
注意其实对组件的是用都是直接使用Element官网提供的代码自己在做调整即可有不明白的属性等都可以到网页的最下方关于组件的属性以及事件都有详细的说明
三、案例
1根据页面原型完成员工管理页面开发并通过Axios完成数据异步加载
Vue项目中使用Axios 在项目目录下安装axiosnpm install axios;需要使用axios时导入axiosimport axios from ‘axios’;
