郑州网站推广服务,公司怎么做网站推广,想学服装设计,网络推广方法与技巧Element#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库#xff0c;用于快速构建网页。
Element 提供了很多组件#xff08;组成网页的部件#xff09;供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮#…Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。
Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮上图右边的是 Element 提供的页面效果效果一目了然。 我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改官网网址是 https://element.eleme.cn/#/zh-CNhttps://element.eleme.cn/#/zh-CN 进入官网能看到如下页面 2.1 快速入门 创建页面并在页面引入Element 的css、js文件 和 Vue.js
!-- 引入vue --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
!-- 引入样式 --
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
!-- 引入组件库 --
script srchttps://unpkg.com/element-ui/lib/index.js/script
2.创建Vue核心对象
Element 是基于 Vue 的所以使用Element时必须要创建 Vue 对象
scriptnew Vue({el:#app})
/script 官网复制Element组件代码 在左菜单栏找到 Button 按钮 然后找到自己喜欢的按钮样式点击 显示代码 在下面就会展示出对应的代码将这些代码拷贝到我们自己的页面即可。
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappel-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-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row
/div!-- 引入vue --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
!-- 引入样式 --
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
!-- 引入组件库 --
script srchttps://unpkg.com/element-ui/lib/index.js/scriptscriptnew Vue({el:#app})
/script/body
/html
浏览器页面显示效果如下 2.2 Element 布局
Element 提供了两种布局方式分别是 Layout 布局 Container 布局容器
2.2.1 Layout 布局
通过基础的 24 分栏迅速简便地创建布局。也就是默认将一行分为 24 栏根据页面要求给每一列设置所占的栏数。 在左菜单栏找到 Layout 布局 然后找到自己喜欢的按钮样式点击 显示代码 在下面就会展示出对应的代码显示出的代码中有样式有html标签。将样式拷贝我们自己页面的 head 标签内将html标签拷贝到 div idapp/div 标签内。
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}/style
/head
body
div idappel-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col/el-rowel-rowel-col :span12div classgrid-content bg-purple/div/el-colel-col :span12div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple-light/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col/el-rowel-rowel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-col/el-row
/div
script srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el:#app})
/script
/body
/html 通过浏览器打开该页面可以看到如下页面 现在需要添加一行要求该行显示8个格子通过计算每个格子占 3 栏具体的html 代码如下
!--
添加一行8个格子 24/8 3
--
el-rowel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-colel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-colel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-colel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-col
/el-row
通过浏览器打开该页面可以看到如下页面 2.2.2 Container 布局容器
用于布局的容器组件方便快速搭建页面的基本结构。如下图就是布局容器效果。
如下图是官网提供的 Container 布局容器实例 该效果代码中包含了样式、页面标签、模型数据。将里面的样式 style 拷贝到我们自己页面的 head 标签中将html标签拷贝到 div idapp/div 标签中再将数据模型拷贝到 vue 对象的 data() 中。
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}/style
/head
body
div idappel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-submenu index2-1template slottitle选项1/templateel-menu-item index2-1-1选项1-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-main/el-container/el-container
/div
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappel-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-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row
/div!-- 引入vue --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
!-- 引入样式 --
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
!-- 引入组件库 --
script srchttps://unpkg.com/element-ui/lib/index.js/scriptscriptnew Vue({el:#app})
/script/body
/htmlscriptnew Vue({el:#app,data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(20).fill(item)}}})
/script
/body
/html 通过浏览器打开该页面可以看到如下页面
