目录
–1,创建Car.vue文件(在src/components里)
一
一,改造登录案例
–1,概述
现在的写法中,出现了SQL注入攻击的现象.
原因是: 用户输入了非法字符#,#在SQL语句里是注释的意思,改变了SQL语义.
是Statement的传输器功能不够强大.要用PreparedStatement替换.
Statement: 不安全,低效,SQL拼接复杂
PreparedStatement: 安全,高效,不需要SQL拼接直接用?作为占位符,再给?设置值–框架也在用
–2,改造
二,HTML
–1，概述
专门用来制作网页的技术,是超文本标记语言.
超文本: 比文本的功能要强大,网页中可以插入 图片 音频视频等...
标记: 也叫标签,用<???> ,不同的标签有不同的功能
- 1
- 2
- 3
–2，入门案例
<!doctype html>
<html>
<head></head>
<body>
he llo html~
hello html~
hello html~ <br>
hello html~
hello html~
hello html~
</body>
</html>
–3，使用Hbuilder
新建项目-选中项目-新建-XX.html文件
三,常用标签
–1,概述
使用不同的标签,实现 在网页中 插入不同类型的元素
–2,常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 6.输入框 -->
<input type="text"/>
<input type="password" placeholder="手机号"/>
<input type="week"/>
<input type="date"/>
<input type="datetime"/>
<input type="number"/>
<input type="email"/>
<input type="radio"/> 男
<input type="checkbox"/> 杨幂
<input type="button" value="点我"/>
<!-- 5.超链接标签a
href指定跳转到哪个网址
target是以什么方式打开(默认是_self当前窗口打开),_blank是新窗口打开
-->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F%E7%A1%AE%E8%AF%8A55%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank">31省区市新增本土确诊55例</a>
<a name="top">我是顶部</a>
<h2>广东富婆通讯录</h2>
<h2>广东富婆通讯录</h2>
<h2>广东富婆通讯录</h2>
<h2>广东富婆通讯录</h2>
<h2>广东富婆通讯录</h2>
<!-- 锚定: 回到一个固定位置 -->
<a href="#top">点我回到顶部</a>
<!-- 1.标题标签: 在网页中 插入标题 h1大~h6小-->
<h1>风雨有我在 人民请放心</h1>
<h2>风雨有我在 人民请放心</h2>
<h3>风雨有我在 人民请放心</h3>
<h4>风雨有我在 人民请放心</h4>
<h5>风雨有我在 人民请放心</h5>
<h6>风雨有我在 人民请放心</h6>
<!-- 2.列表标签: ul(unorderlist)+li 无序列表-->
<ul>
<li>北京严控中高风险地区人员进京</li>
<li>北京严控中高风险地区人员进京</li>
</ul>
<!-- 3.列表标签: ol(orderlist)+li 有序列表-->
<ol>
<li>北京严控中高风险地区人员进京</li>
<li>北京严控中高风险地区人员进京</li>
</ol>
<!-- 4.图片标签img : 通过src属性指定图片的位置
width:修饰了图片的宽度 height:修饰了图片的高度(单位是像素)
-->
<img src="a.png" width="150px" height="50px"/>
<img src="a.png" width="150px" height="50px"/>
</body>
</html>
–3,表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表格标签</title>
</head>
<body>
<!-- 练习表格: th标签比td多了元素加粗的效果
colspan用来合并列 rowspan用来合并行
-->
<table border="1px">
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
</table>
<!-- 1. table向网页中插入表格
tr表示表格里的行元素,td表示行里的列元素
width / height 宽度/高度 border边框 bgcolor是背景颜色 cellspacing单元格间距
合并列 colspan 合并行 rowspan
-->
<table width="300px" height="50px"
border="3px" bgcolor="pink" cellspacing="0px">
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
–4,表单标签form
本质就是一个表格,表单 比表格 多了 数据提交的 功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 创建表单,
下拉框:select(下拉) + option(选项)
文件上传: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注册表单</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<tr>
<td>用户名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<input type="button" value="点我换一张" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述信息...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
- 102
–5,无法提交的问题
步骤:
1,把提交的按钮必须改成submit类型
2,给标签加name属性
3,当提交数据时,会把用户输入的信息jack提交给服务器
http://127.0.0.1:8848/cgb2106/test03.html?user=jack
http://127.0.0.1:8848/cgb2106/test03.html?user=12&abc=123&age=18
4,改造网页文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 创建表单,
下拉框:select(下拉) + option(选项)
文件上传: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注册表单</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd" />
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" name="nick" />
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="mail" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- 想单选就必须设置name属性,而且值必须相同
设置好name属性数据就可以提交了,但是默认提交了on
-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<input type="button" value="点我换一张" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述信息...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
作业
1,完善现在的form表单,能够提交数据
2,练习学生管理系统的表单
二
一,HTML练习
–1,改造用户注册的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 创建表单,
下拉框:select(下拉) + option(选项)
文件上传: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注册表单</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd" />
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" name="nick" />
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="mail" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- 想单选就必须设置name属性,而且值必须相同
设置好name属性数据就可以提交了,但是默认提交了on
-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="like" value="lq"/>篮球
<input type="checkbox" name="like" value="zq"/>足球
<input type="checkbox" name="like" value="ppq"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="imgs/a.png" />
<input type="button" value="点我换一张" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述信息...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,创建学生系统的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习表单标签</title>
</head>
<body>
<!-- 使用h5的播放音频,controls是使用控件,source是文件位置-->
<audio controls="controls">
<source src="res/jay.mp3"></source>
</audio>
<!-- 使用h5的播放视频,controls是使用控件,source是文件位置-->
<video controls="controls" loop="loop">
<source src="res/b.mp4"></source>
</video>
<!-- form 可以提交数据,而且数据默认采用了get方式,就在地址栏中展示的.
http://127.0.0.1:8848/cgb2106/test04.html?user=1&age=123&sex=1&like=ppq&like=ps&edu=2
不好:长度受限,不安全
可以改成post提交数据,而且可以指定,交给哪段程序处理数据action
面试题:get和post提交数据的区别?
get方式:是默认的提交方式,但是不安全(都展示在地址栏),长度受限
post方式:安全,数据不在地址栏展示啦,看不见,提高安全性
-->
<form method="get" action="#">
<table>
<tr>
<td>
<h1>学生信息管理系统MIS</h1>
</td>
</tr>
<tr>
<td>
姓名:
</td>
</tr>
<tr>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>
年龄:
</td>
</tr>
<tr>
<td>
<input type="number" name="age"/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选)
<input type="checkbox" name="like" value="ppq"/>乒乓球
<input type="checkbox" name="like" value="ps"/>爬山
<input type="checkbox" name="like" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
学历:(下拉框)
<select name="edu">
<option value="1">本科</option>
<option value="2">研究生</option>
<option value="3">专科</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:<br />
<input type="date" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="button" value="取消"/>
</td>
</tr>
</table>
</form>
<!-- div p span -->
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
二,CSS
–1,概述
专门用来修饰网页的技术,全称层叠样式表stylesheet
语法: 元素的选择器{ 属性名:属性值; 属性名:属性值; 属性名:属性值; }
用法:
1,行内CSS(在标签上使用css代码)
2,内部CSS(使用style标签,在head里写css代码)
3,外部CSS(把HTML代码和CSS代码分离)
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css</title>
<!-- 写法2:内部css -->
<style>
//语法: 元素的选择器{ 属性名:属性值; }
div{
font-size:30px; /* 修饰div的字号 */
background-color:red;/* 修饰div的背景色 */
}
</style>
</head>
<body>
<!-- 写法1:行内css 修饰div的背景色,优先级最高-->
<div style="background-color:pink;">我是div1</div>
<div style="background-color: pink;">我是div2</div>
</body>
</html>
三,CSS选择器
–1,概述
辅助你选中网页中的元素.
常见的:
1,标签名选择器 : 根据标签的名字选中元素
2,class选择器 : 根据有class属性的选中元素(添加class属性,通过.选中元素)
–2,基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css选择器</title>
<!-- 内部css -->
<style>
/* 1.标签名选择器: 选中网页中所有标签名是div的元素*/
div{
background-color: skyblue;/* 给div加背景色 */
}
span{
font-size: 40px; /* 给span加大字号 */
}
/* 2. class选择器: 给指定元素加class属性 , 通过.获取class的值 ,值可以相同 */
.a{
color: crimson;/* 给第一个span元素,改变字的颜色 */
}
/* 3. id选择器: 给指定的元素加id属性 , 通过#获取id的值 , 值不要相同 */
#b{
font-family: "微软雅黑";/* 字体 */
}
</style>
</head>
<body>
<div id="b">我是div1</div>
<div class="a">我是div2</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<a href="#">点我</a>
</body>
</html>
–3,高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css选择器</title>
<!-- 内部css -->
<style>
/* 1.标签名选择器: 选中网页中所有标签名是div的元素*/
div{
background-color: skyblue;/* 给div加背景色 */
}
span{
font-size: 40px; /* 给span加大字号 */
}
/* 2. class选择器: 给指定元素加class属性 , 通过.获取class的值 ,值可以相同 */
.a{
color: crimson;/* 给第一个span元素,改变字的颜色 */
}
/* 3. id选择器: 给指定的元素加id属性 , 通过#获取id的值 , 值不要相同 */
#b{
font-family: "微软雅黑";/* 字体 */
}
/* 4. 分组选择器: 把多个选择器的结果组成一组,统一设置样式 */
#b,.a{
border:2px solid red; /* 指定宽度,实线,边框颜色 */
border-radius:5px; /* 圆角边框 */
}
/* 5. 属性选择器: 按照指定属性选中元素 */
input[type="text"]{
text-shadow: 5px 5px 5px #FF0000;/* 加阴影 */
text-align:center;/* 文字居中 */
}
</style>
</head>
<body>
<input type="text" placeholder="用户名" />
<input type="text" placeholder="密码" />
<input type="number" placeholder="年龄" />
<div id="b">我是div1</div>
<div class="a">我是div2</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<a href="#">点我</a>
</body>
</html>
四,盒子模型
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css盒子模型</title>
</head>
<body>
<!-- css盒子模型:就是把网页里的所有元素,都看做是一个个的盒子
内边距: padding是指 内容和边框 的距离
外边距: margin是指 盒子和盒子 的距离
边框: border是指边框的效果,宽度 实线 颜色
实线solid 虚线dashed
-->
<input type="radio" style="margin: 20px;"/>男
<input type="radio" style="margin-right: 40px;"/>男
<input type="text" placeholder="用户名" style="padding:20px;border:2px solid #FF0000;"/>
<input type="text" placeholder="密码" style="padding-top: 30px;"/>
<input type="text" placeholder="密码" style="padding-left: 30px;"/>
<input type="text" placeholder="密码" style="padding-bottom: 30px;"/>
</body>
</html>
五,练习
–1,修改学生管理系统的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习表单标签</title>
<style>
/* 修饰输入框 */
.a{
width: 350px;/* 宽度 */
height: 40px;/* 高度 */
padding: 5px;/* 内边距 */
font-size: 15px;/* 字号加大 */
}
/* 修饰保存按钮 */
input[type="submit"]{
width: 60px;/* 宽度 */
height: 30px;/* 高度 */
color: white;/* 字的颜色 */
background-color: blue;/* 背景色 */
border-color: #0000FF;/* 边框颜色 */
font-size: 15px;/* 加大字号 */
}
/* 修饰取消按钮 */
input[type="button"]{
width: 60px;/* 宽度 */
height: 30px;/* 高度 */
color: white;/* 字的颜色 */
background-color: hotpink;/* 背景色 */
border-color: hotpink;/* 边框颜色 */
font-size: 15px;/* 加大字号 */
}
</style>
</head>
<body>
<!-- 使用h5的播放音频,controls是使用控件,source是文件位置-->
<audio controls="controls">
<source src="res/jay.mp3"></source>
</audio>
<!-- 使用h5的播放视频,controls是使用控件,source是文件位置-->
<video controls="controls" loop="loop">
<source src="res/b.mp4"></source>
</video>
<!-- form 可以提交数据,而且数据默认采用了get方式,就在地址栏中展示的.
http://127.0.0.1:8848/cgb2106/test04.html?user=1&age=123&sex=1&like=ppq&like=ps&edu=2
不好:长度受限,不安全
也可以改成post提交数据,而且可以指定,交给哪段程序处理数据action
面试题:get和post提交数据的区别?
get方式:是默认的提交方式,但是不安全(都展示在地址栏),长度受限
post方式:安全,数据不在地址栏展示啦,看不见,提高安全性
-->
<form method="post" action="#">
<table>
<tr>
<td>
<h1>学生信息管理系统MIS</h1>
</td>
</tr>
<tr>
<td>
姓名:
</td>
</tr>
<tr>
<td>
<input class="a" type="text" name="user" placeholder="请输入姓名..."/>
</td>
</tr>
<tr>
<td>
年龄:
</td>
</tr>
<tr>
<td>
<input class="a" type="number" name="age" placeholder="请输入年龄..."/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选)
<input type="checkbox" name="like" value="ppq"/>乒乓球
<input type="checkbox" name="like" value="ps"/>爬山
<input type="checkbox" name="like" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
学历:(下拉框)
<select name="edu">
<option value="1">本科</option>
<option value="2">研究生</option>
<option value="3">专科</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:<br />
<input type="date" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="button" value="取消"/>
</td>
</tr>
</table>
</form>
<!-- div p span -->
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
–2,用户注册的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 HTML CSS综合案例</title>
<style>
/* 1. 修饰输入框 */
.a{
width: 350px;/* 宽度 */
height: 40px;/* 高度 */
}
/* 2. 修饰提示的文字 */
.b{
font-size:2px; /* 字号变小 */
color: darkgray; /* 字的颜色 */
font-family: "宋体"; /* 字体 */
padding: 10px;/* 边距 */
}
/* 3. 修饰注册按钮 */
#btn{
color: white; /* 字的颜色 */
font-size: 20px; /* 字号加大 */
background-color: orangered; /* 背景色 */
border-color: orangered; /* 边框颜色 */
}
/* 4.修饰我已阅读 */
#readme{
padding: 30px;/* 外边距 */
}
</style>
</head>
<body>
<!-- 默认是get方式提交数据,都在地址栏里展示 -->
<form>
<table>
<tr>
<td>
<h2 style="text-align: center;">用户注册</h2>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用户名" name="user"/>
</td>
</tr>
<tr>
<td class="b" >
支持中文、字母、数字、“-”、“_”的组合，4-20个字符
</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="设置密码" name="pwd"/>
</td>
</tr>
<tr>
<td class="b" >
建议使用数字、字母和符号两种以上的组合，6-20个字符
</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="确认密码" name="repwd"/>
</td>
</tr>
<tr>
<td class="b" >
两次密码输入不一致
</td>
</tr>
<tr>
<td>
<input class="a" type="number" placeholder="验证手机" name="tel"/>
或
<a href="#">验证邮箱</a>
</td>
</tr>
<tr>
<td id="readme">
<input type="checkbox"/>
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<input id="btn" class="a" type="submit" value="立即注册" />
</td>
</tr>
</table>
</form>
</body>
</html>三
一,模拟服务器解析数据
package cn.tedu.test;
public class TestUrl {
public static void main(String[] args) {
String url="http://127.0.0.1:8848/cgb2106/test04.html?" +
"user=1&age=123&sex=1&like=ppq&like=ps&edu=2";
// 1,把字符串按照?切割split("?"),得到数组a,两个字符串
String[] a = url.split("\\?");
// 2,重点解析a[1],得到user=1&age=123&sex=1&like=ppq&like=ps&edu=2
String s = a[1];
// 3,把字符串按照&切割split("&"),得到数组b
String[] b = s.split("&");
//[user=1,age=123,sex=1,like=ppq,like=ps]
// 4,遍历数组,再按照=切割,又得到数组c
for(String str : b){
String[] c =str.split("=");
// 5,只获取c[1]就是用户从浏览器输入的数据
String data = c[1];
System.out.println(data);
}
// TODO 6,利用jdbc把数据入库/查库
}
}
二,实现CSS代码和HTML代码的分离
–1,新建css文件
/* 1.标签名选择器: 选中网页中所有标签名是div的元素*/
div{
background-color: skyblue;/* 给div加背景色 */
}
span{
font-size: 40px; /* 给span加大字号 */
}
/* 2. class选择器: 给指定元素加class属性 , 通过.获取class的值 ,值可以相同 */
.a{
color: crimson;/* 给第一个span元素,改变字的颜色 */
}
/* 3. id选择器: 给指定的元素加id属性 , 通过#获取id的值 , 值不要相同 */
#b{
font-family: "微软雅黑";/* 字体 */
}
/* 4. 分组选择器: 把多个选择器的结果组成一组,统一设置样式 */
#b,.a{
border:2px solid red; /* 指定宽度,实线,边框颜色 */
border-radius:5px; /* 圆角边框 */
}
/* 5. 属性选择器: 按照指定属性选中元素 */
input[type="text"]{
text-shadow: 5px 5px 5px #FF0000;/* 加阴影 */
text-align:center;/* 文字居中 */
}
–2,在HTML网页文件中,引入css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css选择器</title>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<input type="text" placeholder="用户名" />
<input type="text" placeholder="密码" />
<input type="number" placeholder="年龄" />
<div id="b">我是div1</div>
<div class="a">我是div2</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<a href="#">点我</a>
</body>
</html>
三,JS
–1,概述
js全称是JavaScript, 只能在浏览器被执行
基于对象的事件驱动的脚本语言
特点 : 弱类型 , 直译式
好处 : 增强了用户的交互性 , 相对安全 , 跨平台
位置: 行内js , 内部js , 外部js
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的语法</title>
<!-- 2. 内部js -->
<script>
alert(666);
</script>
</head>
<body>
<!-- 1. 行内js
事件驱动: 必须触发才会执行JS的动态效果
-->
<a href="#" onclick="alert(100)">onclick单击</a>
<a href="#" ondblclick="alert(200)">ondblclick双击</a>
<a href="#" onmouseenter="alert(300)">鼠标划入</a>
<a href="#" onmouseout="alert(400)">鼠标划出</a>
</body>
</html>
–3,基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS的语法</title>
<!-- 内部js -->
<script>
// 1. JS的数据类型: 是弱类型的语言,也有几种:number string boolean null undefined
var a = 10 ;
a = 1.9+2.6 ;
a = 1.9+2.1 ;
a = "hello js" ;
a = 'hello js';
a = true ;
a = null ;
alert("a的值:"+a) ;
var b = '123'+'456'; //JS也可以拼串
alert("b的值:"+b);//只定义而不赋值的变量,会得到提示undefined
// 2. JS的运算符
// % ++ --
var c = 10%3 ;
c = c++;
alert(c); //1
//alert(++c);
var d = 1;
//d = d+1;
d += 1 ;
alert(d);
var e = 1 ;
var f = '1' ;
alert(e==f); //数据的值,true
alert(e===f); //数据的值+类型,false
//三元运算符: 比较两个数里的大值
var g = prompt("输入数字") ; //从浏览器输入的值
var h = prompt("输入数字") ;
alert(g>h?1:0);
//typeof: 获取数据的类型
alert(typeof 100);//number
alert(typeof '100');//string
</script>
</head>
<body>
</body>
</html>
–4,js的语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS语句</title>
<!-- HTML中引入JS代码 -->
<script>
// 3. while
//需求: 如果给你1个亿,每天花一半,能花多少天
var c = 0 ;//记录天
var d = 100000000 ;//记录钱
while(d > 1){
d = d/2 ; //每天花一半
c++; //天数++
}
console.log("总共花几天: "+c);
// 2. for
// 打印1~10
for(var i=1;i<11;i++){
console.log(i);//在浏览器用f12打开控制台
}
//计算1~100里4的倍数的和
var sum = 0;
for(var i=1;i<101;i++){
if(i % 4 == 0){
sum += i ;
}
}
console.log("总和是: "+sum);
// 1. if...else
var a = prompt("请输入名字");
if(a == 'wyf' ){
//alert("大碗牢饭");
console.log("大碗牢饭");
}else{
alert("大碗宽面");
}
// 例子: 接收用户输入的成绩，判断成绩所属的等级
var b = prompt("请输入成绩");
if(b>=80 && b<=100){
alert("优秀");
}else if(b>=60 && b<80){
alert("中等");
}else if(b>=0 && b<60){
alert("不及格");
}else{
alert("输入有误");
}
</script>
</head>
<body>
</body>
</html>
–5,js的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试js的数组</title>
<script>
// 1.定义数组
var a = new Array();
//js是弱类型的语言,对数据的类型要求并不高.可以存各种类型的数据,在java里要用Object[]
var b = new Array(1, 1.1, true, null, 'jack' );
var c = [ ] ;
//js里的数组,长度可以随时改变
c = [1, 1.1, true, null, 'jack'];
console.log(c); //获取数组的数据
console.log(c.length); //获取数组的长度
console.log(c[2]);
// 2.遍历数组
for(var i = 0 ; i < c.length ;i++){
console.log(i + "---" + c[i] ); //下标 和 根据下标获取数据
}
// 3.for ... in
for(var i in c){ //i是下标
console.log(i+"~"+c[i]);
}
</script>
</head>
<body>
</body>
</html>
–6,JS的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的函数</title>
<script>
// 语法: function 函数名(参数列表){ 函数体 }
//方式1:
//1, 定义函数
function a(){ //不需要参数
console.log(100);
}
function a2(a,b){//需要参数
console.log(a+b);
}
function a3(a){//有返回值的函数
return a ;//通过return返回结果
}
//2, 调用函数
var v = a3('jack');
console.log(v+'你好');
a2(1, 1.2);
a2('jack', 10);
a();
//方式2:
//1, 定义函数
var b = function(){
console.log(1000);
}
var b2 = function(a,b){
console.log(a*b);
}
var b3 = function(a){
return 'hello js' ;
}
//2, 调用函数
var va = b3(10);
console.log(va);
b2(2,10);
b();
</script>
</head>
<body>
</body>
</html>四
一,JS对象
–1,内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 对象</title>
<script>
<!-- Window对象 -->
//当整个网页都加载完,才会被执行的功能
window.onload = function(){
console.log(typeof 100);
}
//弹出框
window.alert(100);
//确认框
window.confirm("你说对吗?");
//输入框
var a = window.prompt("请输入数字");
console.log(typeof a); //string
//string类型的数字转成number类型的数字
var b = parseInt(a);
console.log(typeof b); //number
//window.document返回document对象,代表整个网页文件.
window.document.write('hello js');
window.document.getElementById();
window.document.getElementsByTagName();
window.document.getElementsByClassName();
window.document.getElementsByName();
</script>
</head>
<body>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
–2,自定义对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 对象</title>
<script>
/* 2.自定义JS对象 方式2:*/
var p = {
//动态的绑定属性,逗号隔开多个属性
name : "jack" ,
age : 10 ,
//动态的绑定函数
eat : function(){
// this用来调用这个对象的资源
console.log(this.name);
}
}
console.log(p);
console.log(p.name);//调用属性
p.eat(); //调用函数
/* 2.自定义JS对象 方式1:*/
function Car(){}//声明对象
var c = new Car();//创建对象
//动态的绑定属性
c.color='red';
c.price=9.9;
console.log(c.color); //调用属性
console.log(c.price);
//动态的绑定函数
c.back=function(){
console.log("back....");
}
c.back(); //调用函数
console.log(c);
</script>
</head>
<body>
</body>
</html>
二,DOM
–1,概述
本质就是把网页文件看做一个Document文档对象. 提供了一套API, 可以操作网页中的所有元素
Document文档对象:
提供方法:
getElementById(id属性的值)—只能获取到一个
getElementsByName(name属性的值)—获取到多个,并存入数组
getElementsByClassName(class属性的值)—获取到多个,并存入数组
getElementsByTagName(标签名的值)—获取到多个,并存入数组
write(想要浏览器展示的数据)
提供属性:innerHTML–获取内容
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM解析网页文件</title>
<script>
function fun(){
// 1. 通过id的值,获取元素
var x = document.getElementById("a");
console.log(x);//打印了元素
console.log(x.innerHTML); //获取内容
x.innerHTML = "我变了"; //设置内容
// 2. 通过class的值,获取元素
var y = document.getElementsByClassName("b");
console.log(y); //得到数组
console.log(y[1].innerHTML); //根据下标获取元素里的内容
y[2].innerHTML=' hello dom';//根据下标修改元素里的内容
//TODO 3. 通过name的值,获取元素
//TODO 4. 通过标签名,获取元素
}
</script>
</head>
<body>
<div onclick="fun()"> 我是div1 </div>
<div> 我是div2 </div>
<span id="a"> 我是span </span>
<p class="b"> 我是p1 </p>
<p class="b"> 我是p2 </p>
<p class="b"> 我是p3 </p>
<a name="c"> 我是a1 </p>
<a name="c"> 我是a2 </p>
</body>
</html>
三,JSON
–1,概述
本质就是一个字符串,用来规定了 服务器 和 浏览器 之间数据交互的格式.
JSON是一个轻量级的数据交换格式.
格式: {“name”:“jack”,“age”:“18”}
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 json字符串</title>
<script>
//3. 定义json数组
var c = '[{"name":"rose","age":"20"},{"name":"jack","age":"26"}]' ;
//4. 把json字符串和js对象互转---JSON工具
//4.1 json字符串 转成 js对象:::为了方便的调用属性,函数
var jsobj = JSON.parse(c);
console.log(jsobj);
console.log(jsobj[1].age);//获取对象身上的属性值
console.log(jsobj[0].name);//获取对象身上的属性值
//4.2 js对象 转成 json字符串:::为了对字符串进行操作,给服务器发送数据
var json2 = JSON.stringify(jsobj);
console.log(json2);
console.log(json2.concat(123));
console.log(c);
console.log(c.substr(5));//按照下标截取字符串
//2. 定义json对象
var b = '{"name":"jack","age":"18"}' ;//是JSON字符串,用来交互数据的格式
var b2 = {name:"jack",age:18} ;//是JS对象,封装了属性函数
console.log(b);
console.log(b.length);//获取长度
console.log(b.concat(10000));//拼接字符串
//1. 定义json字符串
var a = '"name":"张三"';
console.log(a);
console.log(a.length);//获取长度
console.log(a.concat(123));//拼接字符串
console.log(a.substr(3));//按照下标截取字符串
</script>
</head>
<body>
</body>
</html>
四,把HTML代码和JS代码分离
–1,创建js文件
//3. 定义json数组
var c = '[{"name":"rose","age":"20"},{"name":"jack","age":"26"}]' ;
//4. 把json字符串和js对象互转---JSON工具
//4.1 json字符串 转成 js对象:::为了方便的调用属性,函数
var jsobj = JSON.parse(c);
console.log(jsobj);
console.log(jsobj[1].age);//获取对象身上的属性值
console.log(jsobj[0].name);//获取对象身上的属性值
//4.2 js对象 转成 json字符串:::为了对字符串进行操作,给服务器发送数据
var json2 = JSON.stringify(jsobj);
console.log(json2);
console.log(json2.concat(123));
console.log(c);
console.log(c.substr(5));//按照下标截取字符串
//2. 定义json对象
var b = '{"name":"jack","age":"18"}' ;//是JSON字符串,用来交互数据的格式
var b2 = {name:"jack",age:18} ;//是JS对象,封装了属性函数
console.log(b);
console.log(b.length);//获取长度
console.log(b.concat(10000));//拼接字符串
//1. 定义json字符串
var a = '"name":"张三"';
console.log(a);
console.log(a.length);//获取长度
console.log(a.concat(123));//拼接字符串
console.log(a.substr(3));//按照下标截取字符串
–2,修改html文件,引入js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 json字符串</title>
<!-- 引入外部的js文件 -->
<script src="1.js"></script>
</head>
<body>
</body>
</html>
五,Vue
–1,概述
Vue是一个渐进式的前端框架. 渐进式是指按需配置
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的入门案例</title>
<!-- 1, 导入vue.js,用vue的功能 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
<div id="app"> {{msg}} </div>
<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
<script>
// 3.1, 准备数据(js对象)
var a = {
msg :"hello vue~"
}
//3.2, 把数据渲染到挂载点
var com = {
// el属性是用来描述元素(挂载点), data属性是具体要展示的数据
el : "#app" , //通过css提供的id选择器,选中了id=app的元素
data : a //即将把a的数据渲染在挂载点
}
//3.3, 准备Vue对象
new Vue(com);
</script>
</body>
</html>
–3,总结
–4,改造入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的入门案例</title>
<!-- 1, 导入vue.js,用vue的功能 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
<div id="app"> {{msg}} </div>
<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
<script>
//准备Vue对象, 把数据渲染到挂载点
new Vue({
// el属性是用来描述元素(挂载点), 通过css提供的id选择器,选中了id=app的元素
el : "#app" ,
// data属性是具体要展示的数据,即将把数据渲染在挂载点
data : {
msg :"hello vue~"
}
});
</script>
</body>
</html>
–5，总结
五
一,Vue的基础语法
–1,运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的运算符</title>
<!-- 1. 导入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2. 准备数据渲染区 , 使用插值表达式获取数据 -->
<div id="app">
插值表达式获取值: {{a}} {{b}}
加减乘除: {{a+b}} {{a-b}} {{a*b}} {{a/b}} {{a%b}}
三元表达式: {{a>b?a:b}}
字符串的操作: {{c}} {{c.length}} {{c.concat(123)}} {{c.replace('l','857')}}
</div>
<!-- 3. 创建Vue对象 -->
<script>
new Vue({
el: "#app", //挂载点:数据的渲染区
data: { //即将要展示的数据
a : 10 ,
b : 20,
c : "hellovue"
}
})
</script>
</body>
</html>
–2,定义函数
先在methods定函数,然后使用插值表达式调用函数 ()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的函数</title>
<!-- 导入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 准备数据渲染区 -->
<div id="app">
调用vue的函数:{{show()}} {{add(1,2)}}
</div>
<!-- 创建Vue对象 , 添加自定义函数 -->
<script>
new Vue({
el:"#app", //挂载点
data:{ //要被渲染的数据
name:"jack"
},
methods : { //自定义的函数
//函数名 : 定义函数的语法
show : function(){
console.log("hello vue")
},
add : function(a,b){
console.log(a)
}
}
})
</script>
</body>
</html>
–3,Vue解析各种形式的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue解析 对象和数组</title>
<!-- 1.导入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<!-- 解析对象保存的数据语法: 对象名.属性名 -->
解析对象的数据:
name属性的值是:{{ a.name }} , age属性的值是:{{a.age}}
name属性的值是:{{ b.name }} , age属性的值是:{{b.age}}
调用函数: {{a.show()}}
解析数组里的数据(利用下标): {{c[1].fristname}}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el : "#app", //挂载点
data:{ //数据区
//对象名 : 对象信息
a : { //自定义对象
name:"jack",
age:20,
show:function(){
alert(100)
}
},
b : {
name : "rose",
age : 30
},
c : [//数组::::[ { k:v , k:v} ,{ k:v , k:v } ]
{
fristname : "jack",
lastname : 123
},
{
fristname : "rose",
lastname : 456
}
]
}
})
</script>
</body>
</html>
–4,Vue中data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 data的三种写法</title>
<!-- 引入js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 准备数据渲染区 -->
<div id="app"> {{msg}} </div>
<!-- 创建Vue对象 -->
<script>
new Vue({
el : "#app",
data(){ //新语法
return{
msg:"hello"
}
}
// data : function(){
// return{
// msg : "hello vue"
// }
// }
})
</script>
</body>
</html>
二,Vue的指令
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的指令</title>
<script src="vue.js"></script>
<style>
/*css语法: 选择器{属性名:属性值} */
[v-cloak]{ //不展示闪现的效果
display: none;
}
</style>
</head>
<body>
<!-- 2. v-cloak解决闪现的问题:在浏览器上显示了插值表达式 使用v-cloak属性,使用css隐藏效果 -->
<div id="app" v-cloak>
{{msg}} {{msg}} {{msg}} {{msg}} {{msg}}
<!-- 1. v-model双向绑定 -->
<input type="text" v-model="msg" />
<!-- 3. v-if用来判断的,满足了条件才展示 -->
{{age}}
<!-- v-if和v-show的区别? 都可以判断,但是后者即使不满足条件也会被网页加载只是隐藏了 -->
<span v-if="age>=18">成年人</span>
<span v-show="age>=18">成年人</span>
<!-- v-if v-else-if v-else 组合的判断条件-->
<span v-if="age>=60">老年人</span>
<span v-else-if="age>=30">青壮年</span>
<span v-else>少年</span>
<!-- 4. v-for用来循环的 -->
用下标获取数组里的元素 : {{arr[0]}} {{arr[1]}} {{arr[2]}}
<!-- o代表取到的数据,arr是数组名,相当于增强for循环 -->
用v-for获取数组里的元素 : <h1 v-for="o in arr"> {{o}}</h1>
<!-- o代表取到的数据,i代表下标,arr是数组名,相当于普通for循环 -->
用v-for获取数组里的元素 : <h1 v-for="o,i in arr">下标是{{i}},数据是{{o}}</h1>
<!-- 5. v-on用来绑定事件,点击按钮时触发函数,@是一种简写形式简化了 v-on: -->
<button v-on:click="show()">点我1</button>
<button v-on:dblclick="show()">点我2</button>
<button @click="show()">点我3</button>
<button @dblclick="show()">点我4</button>
<!-- 6. v-bind:用来获取变量的值, 可以简写成冒号的形式 -->
<a href="{{url}}">链接1</a> <!-- 错的,把整个的插值表达式当做字符串了 -->
<a v-bind:href="url">链接2</a><!-- 获取了变量的值 -->
<a :href="url">链接3</a>
</div>
<script>
new Vue({
el:"#app",
data:{
msg : "hello vue",
age : 16,
arr : [ "杨幂" ,"迪丽热巴" ,"Anglelababa"] ,
url : "https://www.baidu.com"
},
methods:{
show : function(){
console.log('迪丽热巴还爱你')
}
}
})
</script>
</body>
</html>六
一,Vue脚手架
–1,执行以下命令安装并检验
C:\Users\Administrator>node -v
C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
C:\Users\Administrator>npm config get registry
C:\Users\Administrator>npm install vue-cli -g
C:\Users\Administrator>vue -V
C:\Users\Administrator>where vue
–2,创建Vue项目的过程
1,指定workspace: 最好别放c盘
2,在这个workspace指定的位置: 执行cmd 回车,执行了命令
3,初始化了一个vue项目: vue init webpack 项目名称,回车,正确的选择yes/no
4,此时需要一定的时间去下载vue的项目结构
二,自定义组件
–1,创建Car.vue文件(在src/components里)
<template>
<h1>
{{msg}}
</h1>
</template>
<script>
/* 支持导出的自定义组件*/
export default{
name : 'Car',
data(){
return{
msg : "hello componets~~"
}
}
}
</script>
<style>
</style>
–2,修改App.vue文件,注册自定义组件
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 3,使用自定义组件,本质上就是一个标签 -->
<Car></Car>
</div>
</template>
<script>
// 1,导入自定义组件
import Car from './components/Car.vue'
export default {
name: 'App',
//2, 添加指定的组件
components:{
Car
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
–3,测试
启动服务器: npm run dev
打开浏览器访问:http://localhost:8080
三,ElementUI
-1,安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
-2,修改main.js,引入ElementUI
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/* 为了优化网页的颜值,使用了ElementUI,参考官网*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
-3,测试,修改Car.vue文件
<template>
<h1>
{{msg}}
<!-- 1.图标的效果-->
<i class="el-icon-delete-solid"></i>
<i class="el-icon-phone-outline"></i>
<i class="el-icon-phone-outline"></i>
<!--
2.layout栅栏的效果
el-row是一行,一行默认是24列,el-col是一列,:span可以自定义合并的列数
-->
<el-row>
<el-col :span="24">hello</el-col>
</el-row>
<el-row>
<el-col :span="8">hello</el-col>
<el-col :span="8">hello</el-col>
<el-col :span="8">hello</el-col>
</el-row>
<!--
3.el-button按钮的效果
type可以修饰按钮的颜色,icon按钮也可以加图片,circle是一个圆形
-->
<el-button type="primary">按钮1</el-button>
<el-button icon="el-icon-share" circle type="warning"></el-button>
<!--
4.el-input输入框的效果
placeholder是提示信息,v-model体现了双向绑定,clearable可清空,show-password密码输入框
-->
<el-input placeholder="请输入用户名" v-model="msg" ></el-input>
<el-input placeholder="请输入用户名" v-model="msg" show-password></el-input>
<el-input placeholder="请输入用户名" v-model="msg" clearable></el-input>
<!--
5.el-table表格的效果
el-table-column 表格里的列,label是列名
想要给表格准备数据,数据必须放data里
:data是要获取啥数据 ,prop是要获取哪个属性的值
stripe实现斑马纹的表格
-->
<el-table :data="arr" stripe>
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="品牌" prop="pinpai"></el-table-column>
<el-table-column label="描述" prop="desc"></el-table-column>
</el-table>
</h1>
<!-- <i class="el-icon-edit"></i> 只能有一个根元素-->
</template>
<script>
/* 支持导出的自定义组件*/
export default{
name : 'Car',
data(){
return{
msg : "hello componets~~",
// 给表格准备多个数据
arr : [
{
id : '001',
pinpai : '蜜雪冰城',
desc : '你爱我我爱你蜜雪冰城甜蜜蜜'
},
{
id : '002',
pinpai : '鸿星尔克',
desc : 'to be no.1'
}
]
}
}
}
</script>
<style>
</style>
-4,测试
四,ElementUI的表单
–1,测试
<template>
<h1>
{{msg}}
<!-- el-form表单 ,用于提交数据,:model用来获取指定的数据-->
<el-form :model="goods">
<!--el-form-item表单项,label是名称 -->
<el-form-item label="标题">
<!-- el-input是输入框,placeholder是提示信息,v-model双向绑定-->
<el-input placeholder="请输入标题" v-model="goods.title"></el-input>
</el-form-item>
<el-form-item label="卖点">
<el-input placeholder="请输入卖点" v-model="goods.sell"></el-input>
</el-form-item>
<el-form-item label="价格">
<el-input placeholder="请输入价格" v-model="goods.price"></el-input>
</el-form-item>
<el-form-item label="详情">
<el-input placeholder="请输入详情" v-model="goods.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save()">保存</el-button>
</el-form-item>
</el-form>
<!-- el-link超链接,href设置网址,target设置打开方式,type就是颜色-->
<el-link href="#" target="_blank" type="success">超链接</el-link>
<!-- el-radio单选框,v-model是双向绑定,是指把label的值交给msg去存-->
<el-radio v-model="msg" label="1">单选框</el-radio>
<!-- 1.图标的效果-->
<i class="el-icon-delete-solid"></i>
<i class="el-icon-phone-outline"></i>
<i class="el-icon-phone-outline"></i>
<!--
2.layout栅栏的效果
el-row是一行,一行默认是24列,el-col是一列,:span可以自定义合并的列数
-->
<el-row>
<el-col :span="24">hello</el-col>
</el-row>
<el-row>
<el-col :span="8">hello</el-col>
<el-col :span="8">hello</el-col>
<el-col :span="8">hello</el-col>
</el-row>
<!--
3.el-button按钮的效果
type可以修饰按钮的颜色,icon按钮也可以加图片,circle是一个圆形
-->
<el-button type="primary">按钮1</el-button>
<el-button icon="el-icon-share" circle type="warning"></el-button>
<!--
4.el-input输入框的效果
placeholder是提示信息,v-model体现了双向绑定,clearable可清空,show-password密码输入框
-->
<el-input placeholder="请输入用户名" v-model="msg" ></el-input>
<el-input placeholder="请输入用户名" v-model="msg" show-password></el-input>
<el-input placeholder="请输入用户名" v-model="msg" clearable></el-input>
<!--
5.el-table表格的效果
el-table-column 表格里的列,label是列名
想要给表格准备数据,数据必须放data里
:data是要获取啥数据 ,prop是要获取哪个属性的值
stripe实现斑马纹的表格
-->
<el-table :data="arr" stripe>
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="品牌" prop="pinpai"></el-table-column>
<el-table-column label="描述" prop="desc"></el-table-column>
</el-table>
</h1>
<!-- <i class="el-icon-edit"></i> 只能有一个根元素-->
</template>
<script>
/* 支持导出的自定义组件*/
export default{
name : 'Car',
data(){
return{
//给表单准备数据
goods :{
title: '华为Meta50',
sell: '便宜,5G',
price: '9.9',
desc: '麒麟2000'
}
,
msg : "hello componets~~",
// 给表格准备多个数据
arr : [
{
id : '001',
pinpai : '蜜雪冰城',
desc : '你爱我我爱你蜜雪冰城甜蜜蜜'
},
{
id : '002',
pinpai : '鸿星尔克',
desc : 'to be no.1'
}
]
}
}
,
methods:{//定义函数
save(){
alert("保存成功");
}
}
}
</script>
<style>
</style>
-
–2,效果
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
