JSD-2204-Vue-ElementUI-Day06

最新推荐文章于 2023-11-03 14:45:49 发布
最新推荐文章于 2023-11-03 14:45:49 发布
阅读量473 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheNewSystrm/article/details/125606905
版权

1.Vue

1.1显示隐藏相关指令

  • v-if="变量"; 让元素是否显示和变量进行绑定,true显示 false 删除元素
  • v-else; 让元素是否显示和上面元素v-if的状态相反
  • v-show="变量"; 让元素是否显示和变量进行绑定, true显示, false 隐藏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<!-- v-if:让元素是否显示和变量进行绑定，不显示时元素被删除 -->
			<p v-if="isShow">紫罗兰的永恒花园</p>
			<p v-else>某科学的超电磁炮</p>
			<!-- v-show：让元素是否显示和变量进行绑定，不显示时元素被隐藏
			 （需要频繁进行显示隐藏状态切换时使用）-->
			<p v-show="isShow">狐妖小红娘</p>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				isShow:true
			}
		})
	</script>
</html>

1.2vue小练习

1.2.1员工列表练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工列表</title>
	</head>
	<body>
		<div>
			<input type="text" placeholder="姓名" v-model="name">
			<input type="text" placeholder="工资" v-model="salary">
			<input type="text" placeholder="工作" v-model="job">
			<input type="button" value="添加" @click="f()">
			<table border="1">
				<caption>员工列表</caption>
				<tr>
					<th>姓名</th>
					<th>工资</th>
					<th>工作</th>
				</tr>
				<tr v-for="emp in arr">
					<td>{{emp.name}}</td>
					<td>{{emp.salary}}</td>
					<td>{{emp.job}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				name:"",
				salary:"",
				job:"",
				arr:[
					{name:"坂田",salary:5000,job:"万事屋"},
					{name:"神乐",salary:3000,job:"万事屋"},
					{name:"冲田",salary:2333,job:"冲田组"}
				]
			},
			methods:{
				f(){
					/* 创建一个新对象，吧用户输入的信息封装到数组中 */
					let emp = {name:v.name,salary:v.salary,job:v.job}
					//吧创建的对象添加到数组中
					v.arr.push(emp);
				}
			}
		})
	</script>
</html>

1.2.2个人信息练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<table border="1">
						<tr>
							<td>照片:</td>
							<td><img :src="user.pic" alt=""></td>
						</tr>
						<tr>
							<td>姓名:</td>
							<td>{{user.name}}</td>
						</tr>
						<tr>
							<td>年龄:</td>
							<td>{{user.age}}</td>
						</tr>
						<tr>
							<td>好友:</td>
							<td>
								<ul>
									<li v-for="name in user.friends">{{name}}</li>
								</ul>
							</td>
						</tr>
					</table>
					<input type="button" value="请求数据" @click="f()">
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				user:{pic:"",name:"",age:"",friends:[]}
			},
			methods:{
				f(){
					let user = {
							pic:"q.jpg",
							name:"坂田银时",
							age:"25",
							friends:["眼睛男","神乐","定春","洞爷湖"]
					};
					v.user = user;
				}
			}
		})
	</script>
</html>

2.ElementUI

官网地址: http://element.eleme.cn

2.1HelloElementUi

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
		
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      }
    })
  </script>
</html>

注意：后续使用ElementUi需要以上述模板为开始

2.2ElementUi中的组件

2.2.1按钮组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <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>
		
		<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>
		
		<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>
		
		<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>
		
		<el-button type="success" plain>查看详情</el-button>
		
		
		
		<h1>图标</h1>
		<i class="el-icon-s-opportunity"></i>
		<i class="el-icon-help"></i>
		<i class="el-icon-edit"></i>
		<i class="el-icon-share" style="color: greenyellow;"></i>
		<i class="el-icon-delete" style="font-size: 30px;"></i>
		<el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      }
    })
  </script>
</html>

2.2.2图片组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
	  
		<div class="demo-image">
		  <div class="block" v-for="fit in fits" :key="fit">
		    <span class="demonstration">{{ fit }}</span>
		    <el-image
		      style="width: 100px; height: 100px"
		      :src="url"
		      :fit="fit"></el-image>
		  </div>
		</div>
		<h1>图片宽高100*100</h1>
		<!-- 1.图片完整显示并且保证原始宽高比 -->
		    <el-image
		      style="width: 100px; height: 100px"
		      src="a.jpg"
		      fit="contain">
			</el-image>
			<el-image
			  style="width: 100px; height: 100px"
			  src="a.jpg"
			  fit="cover">
			</el-image>
			<el-image
			  style="width: 100px; height: 100px"
			  src="a.jpg"
			  fit="fill">
			</el-image>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
		}
      }
    })
  </script>
</html>

2.2.3消息提示组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
		
		<template>
		  <el-button :plain="true" @click="open2">成功</el-button>
		  <el-button :plain="true" @click="open3">警告</el-button>
		  <el-button :plain="true" @click="open1">消息</el-button>
		  <el-button :plain="true" @click="open4">错误</el-button>
		</template>
		
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      },
	  methods: {
	        open1() {
	          this.$message('这是一条消息提示');
	        },
	        open2() {
	          // this.$message({
	          //   message: '恭喜你，这是一条成功消息',
	          //   type: 'success'
	          // });
			  v.$message.success("成功消息");
	        },
	  
	        open3() {
	          this.$message({
	            message: '警告哦，这是一条警告消息',
	            type: 'warning'
	          });
	        },
	  
	        open4() {
	          this.$message.error('错了哦，这是一条错误消息');
	        }
	      }
    })
  </script>
</html>

2.2.4下拉菜单组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
	  .el-dropdown-link {
	      cursor: pointer;
	      color: #409EFF;
	    }
	    .el-icon-arrow-down {
	      font-size: 12px;
	    }
  </style>
</head>
<body>
  <div id="app">
		
		<!-- @command给下拉菜单添加点击菜单项的事件，框架内部调用handleCommand方法时
		 会将菜单项里面的command属性的值传递过去-->
		<el-dropdown @command="handleCommand">
		  <span class="el-dropdown-link">
		    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
		    <el-dropdown-item command="黄金糕">黄金糕</el-dropdown-item>
		    <el-dropdown-item command="狮子头">狮子头</el-dropdown-item>
		    <el-dropdown-item command="双皮奶">螺蛳粉</el-dropdown-item>
		    <el-dropdown-item command="双皮奶" disabled>双皮奶</el-dropdown-item>
		    <el-dropdown-item command="蚵仔煎" divided>蚵仔煎</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
		<h1>显示自己数组中的数据</h1>
		
		<el-dropdown @command="handleCommand">
		  <span class="el-dropdown-link">
		    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
		    <el-dropdown-item v-for="name in arr" :command="name">{{name}}</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			arr:["刘备","刘逼逼","刘玄德"]
		}
      },
	  methods: {
	        handleCommand(command) {
	          this.$message.success(command);
	        }
	      }
    })
  </script>
</html>

2.2.5导航菜单组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		  <el-menu-item index="1">处理中心</el-menu-item>
		  <el-submenu index="2">
		    <template slot="title">我的工作台</template>
		    <el-menu-item index="2-1">选项1</el-menu-item>
		    <el-menu-item index="2-2">选项2</el-menu-item>
		    <el-menu-item index="2-3">选项3</el-menu-item>
		    <el-submenu index="2-4">
		      <template slot="title">选项4</template>
		      <el-menu-item index="2-4-1">选项1</el-menu-item>
		      <el-menu-item index="2-4-2">选项2</el-menu-item>
		      <el-menu-item index="2-4-3">选项3</el-menu-item>
		    </el-submenu>
		  </el-submenu>
		  <el-menu-item index="3" disabled>消息中心</el-menu-item>
		  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
		</el-menu>
		<div class="line"></div>
		<el-menu
		  :default-active="activeIndex2"
		  class="el-menu-demo"
		  mode="horizontal"
		  @select="handleSelect"
		  background-color="#545c64"
		  text-color="#fff"
		  active-text-color="#ffd04b">
		  <el-menu-item index="1">处理中心</el-menu-item>
		  <el-submenu index="2">
		    <template slot="title">我的工作台</template>
		    <el-menu-item index="2-1">选项1</el-menu-item>
		    <el-menu-item index="2-2">选项2</el-menu-item>
		    <el-menu-item index="2-3">选项3</el-menu-item>
		    <el-submenu index="2-4">
		      <template slot="title">选项4</template>
		      <el-menu-item index="2-4-1">选项1</el-menu-item>
		      <el-menu-item index="2-4-2">选项2</el-menu-item>
		      <el-menu-item index="2-4-3">选项3</el-menu-item>
		    </el-submenu>
		  </el-submenu>
		  <el-menu-item index="3" disabled>消息中心</el-menu-item>
		  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
		</el-menu>
		<h1>自己的导航菜单</h1>
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		  <el-menu-item v-for="(name,i) in arr" :index="i+1+''">{{name}}</el-menu-item>
		</el-menu>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			activeIndex: '1',
			activeIndex2: '1',
			arr:["首页","免费课","直播课","线上课","精品课"]
		}
      },
	   methods: {
	        handleSelect(key, keyPath) {
	          console.log(key, keyPath);
	        }
	    }
    })
  </script>
</html>

2.2.6表格组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
		<template>
			<!-- data设置显示的数据 -->
		    <el-table
		      :data="tableData"
		      style="width: 100%">
			  <!-- prop=property属性 ,设置这一列显示的数据-->
		      <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>
		  </template>
		
		<h1>员工列表</h1>
		<template>
			<!-- data设置显示的数据 -->
		    <el-table
		      :data="arr"
		      style="width: 100%">
			  <!-- prop=property属性 ,设置这一列显示的数据-->
		      <el-table-column
		        prop="name"
		        label="姓名"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="salary"
		        label="工资"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="job"
		        label="岗位">
		      </el-table-column>
			  <el-table-column label="操作">
			        <template slot-scope="scope">
			          <el-button
			            size="mini"
			            type="danger"
			            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			        </template>
			      </el-table-column>
		    </el-table>
		  </template>
		  <h1>女友列表</h1>
		  <template>
		  	<!-- data设置显示的数据 -->
		      <el-table
		        :data="nvarr"
		        style="width: 100%">
		  	  <!-- prop=property属性 ,设置这一列显示的数据-->
		        <el-table-column
		          prop="name"
		          label="姓名"
		          width="180">
		        </el-table-column>
		        <el-table-column
		          prop="relation"
		          label="关系"
		          width="180">
		        </el-table-column>
		        <el-table-column
		          prop="job"
		          label="工作">
		        </el-table-column>
		  	  <el-table-column label="操作">
		  	        <template slot-scope="scope">
		  	          <el-button
		  	            size="mini"
		  	            type="danger"
		  	            @click="girlfriendDelete(scope.$index, scope.row)">删除</el-button>
		  	        </template>
		  	      </el-table-column>
		      </el-table>
		    </template>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        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 弄'
			          }],
			arr:[
				{name:"张三",salary:3000,job:"销售"},
				{name:"李四",salary:5000,job:"经理"},
				{name:"王五",salary:100000,job:"老板"}
				
				],
			nvarr:[
				{name:"拉姆",relation:"老婆1号",job:"女仆"},
				{name:"雷姆",relation:"老婆2号",job:"女仆"},
				{name:"艾米利亚",relation:"老婆3号",job:"魔法师"}
				
				]	
		}
      },
	  methods:{
		  handleDelete(index, row) {
		      console.log(index+"员工对象:"+row.name);
			  v.arr.splice(index,1);
		  },
		  girlfriendDelete(index, row) {
		      console.log(index+"员工对象:"+row.name);
		  			  v.nvarr.splice(index,1);
		  }
	  }
    })
  </script>
</html>

2.2.7布局组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
	  .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    .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 id="app">
		<el-row>
		  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
		  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		</el-row>
		<div style="width: 1000px;margin: 0 auto;">
			<el-row>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			</el-row>
			
		</div>
		<div style="width: 1200px;margin: 0 auto;">
			<el-row :gutter="30">
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
		</div>
		<el-row>
			<!-- :offset设置偏移的分栏数量 -->
		  <el-col :span="20" :offset="4"><div class="grid-content bg-purple"></div></el-col>
	
		</el-row>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      }
    })
  </script>
</html>

2.2.8布局容器组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>
</head>
<body>
  <div id="app">
		<el-container>
		  <el-header>Header</el-header>
		  <el-main>Main</el-main>
		  <el-footer>Footer</el-footer>
		</el-container>
		<el-container>
		  <el-header>Header</el-header>
		  <el-container>
		    <el-aside width="200px">Aside</el-aside>
		    <el-container>
		      <el-main>Main</el-main>
		      <el-footer>Footer</el-footer>
		    </el-container>
		  </el-container>
		</el-container>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      }
    })
  </script>
</html>

2.2.9分割线组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
		<template>
		  <div>
		    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
		    <el-divider></el-divider>
		    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
		  </div>
		</template>
		<template>
		  <div>
		    <span>头上一片晴天，心中一个想念</span>
		    <el-divider content-position="left">少年包青天</el-divider>
		    <span>饿了别叫妈, 叫饿了么</span>
		    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
		    <span>为了无法计算的价值</span>
		    <el-divider content-position="right">阿里云</el-divider>
		  </div>
		</template>
		<template>
		  <div>
		    <span>雨纷纷</span>
		    <el-divider direction="vertical"></el-divider>
		    <span>旧故里</span>
		    <el-divider direction="vertical"></el-divider>
		    <span>草木深</span>
		  </div>
		</template>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      }
    })
  </script>
</html>

2.2.10卡片组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
	  <el-card><h1>四大神仙</h1></el-card>
	  <el-divider></el-divider>
		<el-row :gutter="20">
			<el-col :span = "6"><el-card><h1>刘德华</h1></el-card></el-col>
			<el-col :span = "6"><el-card><h1>张学友</h1></el-card></el-col>
			<el-col :span = "6"><el-card><h1>郭富城</h1></el-card></el-col>
			<el-col :span = "6"><el-card><h1>老逼灯</h1></el-card></el-col>
		</el-row>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return { //在这里面定义变量
			
		}
      }
    })
  </script>
</html>

注意：上述代码都是可以去ElemenUi上面复制的，ElementUi上面的组件还有很多

           可以去自行查看， 官网地址: http://element.eleme.cn

程序猿 Monkey
关注
JSD-2204-酷莎商城-ElementUI-Day07
TheNewSystrm的博客
07-05 765
JSD-2204-酷莎商城-ElementUI-Day07
JSD-2204-创建csmall项目-Day02
TheNewSystrm的博客
08-21 635
JSD-2204-创建csmall项目-Day02
block代码块的使用
st646889325的博客
10-15 385
block 代码块功能类似于 delegate 代理。即也用来由 B 对象代理完成 A 对象的事件。 区别 1、不用定义协议（协议名称、协议方法、代理）； 2、实现方法比较直观（实现代码比较紧凑，即代码块方法，紧接在对象实例化之后，避免多行空隔设置） 3、定义 block 属性对象时，应用 copy 类型，而定义 delegate 对象时应用 assign 类型 4、
ElementUI从unpkg.com下载到本地方法指南以及配置Nginx本地服务器镜像
卡农的魔笛
05-17 2万+
element-ui 是一款非常好用的前端框架。 我们今天谈的是不用前端构建框架，而直接引用 element-ui。 在官网指南中，官方建议使用 cdn 来使用：https://element.eleme.cn/#/zh-CN/component/installation <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!--
vue中引入element-ui的方法
qq_36507046的博客
08-03 2412
vue中引入element-ui的方法
Element-UI-快速入门（极简教程）
热门推荐
qq_33820545的博客
09-11 3万+
文章目录4. ElementUI4.1 ElementUI介绍4.2 常用组件4.2.1 Container 布局容器4.2.2 Dropdown 下拉菜单4.2.3 NavMenu 导航菜单4.2.4 Table 表格4.2.5 Pagination 分页4.2.6 Message 消息提示4.2.7 Tabs 标签页4.2.8 Form 表单 4. ElementUI 4.1 ElementUI介绍 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快
【Element UI通用后台管理系统】（一）项目搭建
io_123io_123的博客
07-10 5224
Yarn的使用、如何在Vue脚手架中使用Element ui进行项目开发
JSD-2204-使用Idea启动Nacos-创建csmall项目-Dubbo-Day03
TheNewSystrm的博客
08-22 776
JSD-2204-使用Idea启动Nacos-创建csmall项目-Dubbo-Day03
JSD-2204-WebServer(项目)-Day13
TheNewSystrm的博客
06-16 469
JSD-2204-WebServer(项目)-Day13
JSD-2204-WebServer(项目)-Day12
TheNewSystrm的博客
06-15 489
JSD-2204-WebServer(项目)V6-V9-Day11
js页面使用element-ui
最新发布
qq_47793359的博客
11-03 1625
js手写样式很麻烦，表格，表单画的很头疼，想用ui框架怎么办？别慌~~~下面分享下个人以element-ui在js项目里面使用的一些浅薄的经验。。。
html下载链接引入element-ui
一个包子的成长的博客
01-17 3068
html下载element-ui引入element-ui
elementUI安装和引入方法（通用）
qq_43985785的博客
03-11 1万+
1.npm安装 官网推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S 安装完可以在根目录下的package.json里找到deoendencies查看element的安装版本 2.CDN（在页面上引入 js 和 css 文件即可开始使用） 优势：可以直接获取到最新版本的资源 劣势：element升级时可能会遇到兼容性问题，推荐引入 Element 的用户在链接地址上锁定版本（我应该不会用它所以不写了，官网有） <!-- 引入样式
vue 里面通过v-for循环出来多个相同样式的div,根据index作为对象的属性的参数拼接取值
是大林的林吖-博客
07-23 3312
一、[ ] 和 . 的区别 1、 . 是要对象存在该属性才可赋值取出 2、 [ ] 即使对象不存在该属性也可以赋值和取出 二、v-for循环 通过 v-for=“index of number” ，number为自定义的一个数字 三、.后面不能让字符串与index进行拼接，而[ ] 里面是可以让字符串与index进行拼接。即 对象[“字符串”+index] 四、代码实现 <div class="battery" style="margin-top: 10px; margin-left: 30px"&
CSS3 object-fit 和 object-postion 实现图片居中缩放
司马懿的西山居
02-25 2354
object-fit 值 描述 fill contain cover none scale-down &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp
HTML项目中引入Element-UI
shihan175的博客
06-18 1108
HTML项目中引入Element-UI
elementui的使用和我们的日常应用 elementui的使用
m0_62491932的博客
05-04 250
demo01_elementui模板。demo06_布局容器实例。demo04_响应式布局。demo03_分栏间隔。demo05_布局容器。demo13_分页查询。demo08_对话框。demo09_确认框。demo09_确认框。demo11_表格1。
element-ui 使用
kjs--的博客
05-16 594
element-ui 使用(1) 记录近期所使用element-ui组件的过程 使用过程中用到的element文档 https://element.eleme.cn/#/zh-CN/component/installation 一.element-ui的团队 Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。 二.安装 npm 安装 官方都推荐使用 npm 的方式安装，它能更好地和 webpack 打
Vue项目上线打包步骤
qq_46034942的博客
05-15 6389
Vue项目打包上线
【题目编号】jsd-01-101-1003【知识点】JAVA基础-JAVA语言基础-字符串【难易程度】60 《100家互联网大公司...
# 100家互联网大公司Java笔试题汇总 ## 题目描述 编译运行以下程序后，关于输出结果的说明...jsd-01-101-1002 ## 知识点 Java基础-Java语言基础-运算符和表达式-转义字符 ## 难易程度 80 以上是所给论述的总结。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值