1.HTML和CSS
-
HTML(HyperText Markup Language):超文本标记语言
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
- 标记语言:由标签构成的语言
- HTML标签都是预定义好的。例如:使用 <h1> 标签展示标题,使用<a>展示超链接,使用<img>展示图片,<video>展示视频。
- HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
-
CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。
-
HTML基础结构:
-
<html> <head> <title></title> </head> <body> </body> </html>
-
-
HTML标签特点:
- HTML标签不区分大小写
- HTML标签的属性值,采用单引号、双引号都可以
- HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)
1.1 HTML基础标签
-
图片标签 <img>
- 图片标签:<img>
- 常见属性:
- src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
- width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
- height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
- width 和 height 可以只指定一个,另一个等比缩放
- 使用方式:
<img src="路径" width="..." height="...">
- 路径:
- 绝对磁盘路径:C:\Users\Administrator\Desktop\HTML\img\news_logo.png
- 绝对网络路径:ht/tps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
- 相对路径:
- ./ : 当前目录 , ./ 可以省略的
- …/: 上一级目录
-
标题标签
-
标题标签:<h1> - <h6>
-
效果:h1为一级标题,字体最大;h6为六级标题,字体最小
-
使用方式:
<h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6>
-
-
水平分页线标签 <hr>
- 标签:<hr>
- 效果:水平分页线
-
超链接
- 标签: <a href=“…” target=“…”>央视网</a>
- 属性:
- href: 指定资源访问的url
- target: 指定在何处打开资源链接
- _self: 默认值,在当前页面打开
- _blank: 在空白页面打开
- 使用方式:
<a href="..." target="...">AAA</a>
-
视频音频标签
- 标签:<video>
- 属性:
- src: 规定视频的url
- controls: 显示播放控件
- width: 播放器的宽度
- height: 播放器的高度
- 用法:
<video src="..." controls width="..." height="..."></video>
- 属性:
- 音频标签: <audio>
- 属性:
- src: 规定音频的url
- controls: 显示播放控件
- 用法:
<audio src="..." controls></audio>
- 属性:
- 标签:<video>
-
段落标签
- 段落:<p>
- 用法:
<p>一个段落</p>
- 用法:
- 段落:<p>
-
文本格式标签
效果 标签 标签(强调) 加粗 b strong 倾斜 i em 下划线 u ins 删除线 s del -
表格标签
-
标签:
- <table> : 用于定义整个表格, 可以包裹多个 <tr>
- <tr> : 表格的行,可以包裹多个 <td>
- <td> : 表格单元格(普通),可以包裹内容 , 如果是表头单元格,可以替换为 <th>
-
属性:
- border:规定表格边框的宽度
- width:规定表格的宽度
- cellspacing: 规定单元之间的空间
-
用法:
-
<table border="1px" cellspacing="0" width="600px"> <tr> <th>序号</th> <th>品牌Logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr> <td>1</td> <td> <img src="img/huawei.jpg" width="100px"> </td> <td>华为</td> <td>华为技术有限公司</td> </tr> <tr> <td>2</td> <td> <img src="img/alibaba.jpg" width="100px"> </td> <td>阿里</td> <td>阿里巴巴集团控股有限公司</td> </tr> </table>
-
1.2 CSS
-
CSS引入方法
- 三种引入方法:
- 行内样式:在标签内使用style属性,属性值是css属性键值对
- 用法:
<h1 style="xxx:xxx;">中国新闻网</h1>
- 用法:
- 内嵌样式:定义<style>标签,在标签内部定义css样式,一般写在<head>内
- 用法:
<style> h1 {...} </style>
- 用法:
- 外联样式:定义<link>标签,通过href属性引入外部css文件,企业常用
- 用法:
<link rel="stylesheet" href="css/news.css">
- 用法:
- 行内样式:在标签内使用style属性,属性值是css属性键值对
- 三种引入方法:
-
颜色标识
- 三种表示方式:
- 关键字:预定义的颜色名
- 取值:red、green、blue…
- rgb表示:红绿蓝三原色,每项取值范围:0-255
- 取值:rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
- 十六进制表示:#开头,将数字转换成十六进制表示
- 取值:#000000、#ff0000、#cccccc,简写:#000、#ccc
- 关键字:预定义的颜色名
- 三种表示方式:
-
元素选择器
-
选择器的名字必须是标签的名字
-
作用:选择器中的样式会作用于所有同名的标签上
-
用法:
元素名称 { css样式名:css样式值; } ----------- p{ color: red; } ------- <p> Red... </p>
-
-
类选择器
-
选择器的名字前面需要加上 .
-
作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上,可以是多个
-
用法:
.class属性值 { css样式名:css样式值; } ------------ .cls{ color: green; } ------ <p class=".cls"> Green... </p>
-
-
id选择器
-
选择器的名字前面需要加上#
-
作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签(由于id是唯一的)
-
用法:
#id属性值 { css样式名:css样式值; } ------------- #p1 { color: blue; } ------------- <p id="p1"> Blue... </p>
-
-
CSS其他常用属性
- text-indent: 设置段落的首行缩进
- line-height: 设置行高
- text-align: 设置对齐方式, 可取值为 left / center / right
- font-size: 用来设置字体的大小,单位px不可省略
- HTML占位符
-
在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符( ;)来生成空格,如果需要多个空格,就使用多次占位符。
-
那在HTML中,除了空格占位符以外,还有一些其他的占位符,如下:
-
显示结果 描述 占位符 空格 < 小于号 < > 大于号 > & 和号 & " 引号 " ’ 撇号 '
-
1.3 页面布局
- 盒子模型:
-
盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
-
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
- 布局标签:
-
布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
-
标签:<div> <span>
-
特点:
-
div标签:
- 一行只显示一个(独占一行)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高(width、height)
-
用法:
<div>...</div>
-
span标签:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
-
用法:
<span>...</span>
-
-
布局实现:
- 需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来,方便通过css设置内容占用的宽度,比如:65%。
- 通过css为该div设置外边距,auto可以自动计算
1.4 表单标签
-
表单场景: 表单就是在网页中负责数据采集功能的,如:注册、登录的表单。
-
表单标签: <form>
-
表单属性:
- action: 规定表单提交时,向何处发送表单数据,表单提交的URL。
- method: 规定用于发送表单数据的方式,常见为: GET、POST。
- GET:表单数据是拼接在url后面的, 如: xxxxxxxxxxx?username=Tom&age=12,url中能携带的表单数据大小是有限制的。
- POST: 表单数据是在请求体(消息体)中携带的,大小没有限制。更安全
-
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项,通过type属性控制输入形式
- type取值
- text:默认值,定义单行的输入字段
- password:密码字段
- radio:单选按钮
- checkbox:复选框
- file:文件上床按钮
- date/time/datetime-local:日期/时间/日期时间
- number:数字输入框
- emall:邮件输入框
- hidden:隐藏域
- submit/reset/button:提交/重置/可点击按钮
- type取值
- select: 定义下拉列表,<option>定义列表项
- textarea: 定义文本域
- input: 定义表单项,通过type属性控制输入形式
-
用法:
<!-- value: 表单项提交的值 lable表示一整个区域都可选中--> <form action="" method="post"> 姓名: <input type="text" name="name"> <br><br> 密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男 <label><input type="radio" name="gender" value="2"> 女 </label> <br><br> 爱好: <label><input type="checkbox" name="hobby" value="java"> java </label> <label><input type="checkbox" name="hobby" value="game"> game </label> <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br> 图像: <input type="file" name="image"> <br><br> 生日: <input type="date" name="birthday"> <br><br> 时间: <input type="time" name="time"> <br><br> 日期时间: <input type="datetime-local" name="datetime"> <br><br> 邮箱: <input type="email" name="email"> <br><br> 年龄: <input type="number" name="age"> <br><br> 学历: <select name="degree"> <option value="">----------- 请选择 -----------</option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select> <br><br> 描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br> <input type="hidden" name="id" value="1"> <!-- 表单常见按钮 --> <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> <br> </form>
2.JavaScript
1.引入方式
-
内部脚本:将 JS 代码定义在 HTML 页面中
-
JavaScript代码必须位于<script></script>标签之间
-
在HTML文档中,可以在任意地方,放置任意数量的<script>
-
一般会把脚本置于<body>元素的底部,可改善显示速度
<body> </body> <script> alert("Hello");//可不加分号,但是建议加,好看 </script>
-
-
外部脚本:JS代码定义在外部 JS 文件中,然后引入 HTML 页面中
-
外部JS文件中,只包含JS代码,不包含 <script>标签
-
引入外部js的<script>标签,必须是双标签
BB.js文件 ------------- alert("Hello"); -------------- AA.html(同目录下) ---------------- <head> <script src = "BB.js"></script> </head>
-
2.基础语法
-
语法规则:
-
区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
-
大括号表示代码块
-
注释:
- 单行注释:// 注释内容
- 多行注释:/* 注释内容 */
-
-
变量声明:
- var :声明变量,可以是任意类型
- let :只在代码块内生效
- const :声明常量,不可修改
- 声明规则:
- JavaScript 是一门弱类型语言,变量可以存放不同类型的值 。
- 变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
-
三种输出语句实例:
- window.alert() :警告框
- document.write() :在HTML输出内容
- console.log() :写入浏览器控制台
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-基本语法</title> </head> <body> </body> <script> /* window.alert()可缩写为alert("JS"); */、 //var全局变量,作用域大 var a = 10; //let局部变量,局部生效 { //let不能重复定义 let a = "张张"; //let a = "lili"; alert(a);//张张 } //const常量,改变有错但不报错,运行会终止 const pi = 3.14; //pi = 3.15; alert(pi);//3.14 alert(a);//10 //方式一: 弹出警告框 // window.alert(a); // //方式二: 写入html页面中 // document.write(a); //方式三: 控制台输出 console.log(a); </script> </html>
3.数据类型运算符
-
分为原始类型和引用类型,typeof可以返回变量的数据类型:
数据类型 描述 number 数字(整数、小数、NaN(Not a Number)) string 字符串,单双引皆可 boolean 布尔。true,false null 对象为空 undefined 当声明的变量未初始化时,该变量的默认值是 undefined - 0,null,undefined,“”,NaN都理解为false
- NaN : 表示非数字,不能运算比较
-
运算符(形如Java):
-
注意
- = :赋值运算符
- == :判断值相等,但会进行类型转化
- === :判断值和类型相等,不会进行类型转换
-
类型转换:
- parseInt()将其他类型转换为数值类型
-
-
流程控制语句if,switch,for等和java保持一致
运算规则 运算符 算术运算符 + , - , * , / , % , ++ , – 赋值运算符 = , += , -= , *= , /= , %= 比较运算符 > , < , >= , <= , != , == , === 不会进行类型转换 逻辑运算符 && , || , ! 三元运算符 条件表达式 ? true_value: false_value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-运算符</title>
</head>
<body>
</body>
<script>
//原始数据类型
alert(typeof 3); //number
alert(typeof 3.14); //number
alert(typeof "A"); //string
alert(typeof 'Hello');//string
alert(typeof true); //boolean
alert(typeof false);//boolean
alert(typeof null); //object
var a ;
alert(typeof a); //undefined
var age = 20;
var _age = "20";
var $age = 20;
alert(age == _age);//true ,只比较值
alert(age === _age);//false ,类型不一样
alert(age === $age);//true ,类型一样,值一样
</script>
</html>
4.函数
-
两种定义格式:
-
第一种:
function 函数名(参数1,参数2..){ 要执行的代码 }
- 形式参数不需要声明类型,并且JavaScript中不管什么类型都是let或者var去声明,加上也没有意义。
- 返回值也不需要声明类型,直接return即可
-
第二种:
-
通过var去定义函数的名字,具体格式如下:
var functionName = function (参数1,参数2..){ //要执行的代码 }
在JavaScript中,函数的调用只需要名称正确即可,参数列表个数不管的。
-
-
5.对象
5.1 Array对象
-
Array对象时用来定义数组的。通过索引获取数组中的值。
-
特点:长度可以变化,可以存储任意数据类型的值,
-
常用语法格式有如下2种:
- 方式1:
- var 变量名 = new Array(元素列表);
- 方式2:
- var 变量名 = [ 元素列表 ];
- 方式1:
-
属性方法:
-
属性:
- length:设置或返回数组中元素数量
-
方法:
- forEach():遍历数组中每个有值的元素,并调用一次传入函数
- push():将新元素添加到数组末尾,返回新的长度
- splice():从数组中删除元素
<script> var arr = [1,2,3,4]; arr[10] = 50; for(let i = 0; i < arr.length; i++){ console.log(arr[i]); //1,2,3,4,undefined,50 } arr.forEach(function(e){ console.log(e);//1,2,3,4,50 })//可简写为以下形式 arr.forEach((e)=>{ console.log(e); }) arr.push(7,8,9); console.log(arr);//1,2,3,4,50,7,8,9,length = 14 splice(2,2); console.log(arr);//1,2,50,7,8,9,length = 12 </script>
-
5.2 String对象
-
语法格式:
- 创建方式1:
- var 变量名 = new String(“…”) ;
- 创建方式2:
- var 变量名 = “…” ;
- 创建方式1:
-
属性方法:
- 属性:
- length:字符串长度
- 方法:
- charAt():返回指定位置字符
- indexOf():检索字符串
- trim():去除字符串两边空格
- substring():提取字符串中两个指定的索引号之间的字符
<body> </body> <script> //创建字符串对象 //var str = new String("Hello String"); var str = " Hello String "; console.log(str); //length console.log(str.length);//18 //charAt console.log(str.charAt(4));//l //indexOf console.log(str.indexOf("lo"));//5 //trim var s = str.trim(); console.log(s.length);//12 //substring(start,end) --- 开始索引, 结束索引 (含头不含尾) console.log(s.substring(0,5));//Hello </script> </html>
- 属性:
5.3 JSON对象
-
自定义对象语法规格:
-
其语法格式如下:
var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){} };
我们可以通过如下语法调用属性:
对象名.属性名
通过如下语法调用函数:
对象名.函数名()
-
-
json对象:JavaScript Object Notation,JavaScript对象标记法。是通过JavaScript标记法书写的文本。
-
语法格式:
-
其格式如下:
{ "key":value, "key":value, "key":value }
其中,key必须使用引号并且是双引号,value可以是任意数据类型。
-
-
json数据常用于作为前后台交互的数据载体
<script> var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; alert(jsonstr.name);//undefined var obj = JSON.parse(jsonstr);//将jsonstr字符串转换为json对象 alert(obj.name); alert(JSON.stringify(obj)); </script>
-
5.4 BOM对象
-
BOM对象:Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能,可以通过操作BOM对象的相关属性或者函数来完成。
-
提供的对象描述:
-
Window:浏览器窗口对象
-
Nacigator:浏览器对象
-
Screen:屏幕对象
-
History:历史记录对象
-
Location:地址栏对象
-
-
Window对象
- 属性:
- history :用于获取history对象
- location :用于获取location对象
- Navigator :用于获取Navigator对象
- Screen :用于获取Screen对象
- 函数:
- alert() :显示带有一段消息和一个确认按钮的警告框。
- comfirm() :显示带有一段消息以及确认按钮和取消按钮的对话框。
- setInterval(fn,毫秒值) :按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setTimeout(fn,毫秒值) :在指定的毫秒数后调用函数或计算表达式。
- 属性:
-
Location对象:浏览器地址栏对象,常用href属性
- 属性:
- href :获取或设置浏览器的地址信息
- 属性:
5.5 DOM对象
-
DOM对象:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- 封装的对象分为
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- 封装的对象分为
-
获取DOM对象(Element对象,标签)
函数 描述 document.getElementById() 根据id属性值获取,返回单个Element对象 document.getElementsByTagName() 根据标签名称获取,返回Element对象数组 document.getElementsByName() 根据name属性值获取,返回Element对象数组 document.getElementsByClassName() 根据class属性值获取,返回Element对象数组 -
操作对象:
- innerHTML : 修改标签内容传入HTML
<body> <img id="h1" src="img/off.gif"> <br><br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 </body> <script> //1. 获取Element元素 //1.1 获取元素-根据ID获取 // var img = document.getElementById('h1'); // alert(img); //1.2 获取元素-根据标签获取 - div // var divs = document.getElementsByTagName('div'); // for (let i = 0; i < divs.length; i++) { // alert(divs[i]); // } //1.3 获取元素-根据name属性获取 // var ins = document.getElementsByName('hobby'); // for (let i = 0; i < ins.length; i++) { // alert(ins[i]); // } //1.4 获取元素-根据class属性获取 // var divs = document.getElementsByClassName('cls'); // for (let i = 0; i < divs.length; i++) { // alert(divs[i]); // } //2. 查询参考手册, 属性、方法 var divs = document.getElementsByClassName('cls'); var div1 = divs[0]; div1.innerHTML = "传智教育666"; </script> </html>
5.6 事件
-
事件绑定:
-
方式1:通过html标签中的事件属性进行绑定
- 例如一个按钮,我们对于按钮可以绑定单机事件,可以借助标签的onclick属性,属性值指向一个函数。
-
方式2:通过DOM中Element元素的事件属性进行绑定
- html中的标签被加载成element对象,可以通过element对象的属性来操作标签的属性。
<body> <input type="button" id="btn1" value="事件绑定1" onclick="on()"> <input type="button" id="btn2" value="事件绑定2"> </body> <script> function on(){ alert("按钮1被点击了..."); } document.getElementById('btn2').onclick = function(){ alert("按钮2被点击了..."); } </script> </html>
-
-
常见事件:
事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开
3.Vue
1.概述
-
Vue:构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
-
MVVM:是Model-View-ViewModel的缩写,有3个单词,具体释义如下:
- Model: 数据模型,特指前端中通过请求从后台获取的数据
- View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
- ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上
-
使用方式:
-
1.在<head>区域使用<script>标签引入vue.js文件
-
2.js代码区定义vue对象
-
3.在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上的
<body> <div id="app"> <input type="text" v-model="message"> {{message}} </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ message: "Hello Vue" } }) </script>
-
-
vue常用属性:
- el: 用来指定哪儿些标签受 Vue 管理。 该属性取值
#app
中的app
需要是受管理的标签的id属性值 - data: 用来定义数据模型
- methods: 用来定义函数。
- el: 用来指定哪儿些标签受 Vue 管理。 该属性取值
2.Vue指令
-
常用指令:
指令 作用 v-bind 为HTML标签绑定属性值,如设置 href , css样式等 v-model 在表单元素上创建双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染 v-else v-else-if v-show 根据条件展示某元素,区别在于切换的是display属性的值 v-for 列表渲染,遍历容器的元素或者对象的属性 -
v-bind 和 v-model
<body> <div id="app"> <!-- v-bind中v-bind可以省略但 : 不能 v-model 双向绑定可以获取表单的值然后提交给服务器 v-on 给html标签绑定事件,可以简写为@ v-if 是条件性渲染,判断为true才渲染 v-show 根据条件展示元素,切换的是展示的display属性值 v-if和v-show浏览器呈现的效果是一样的,但是浏览器中html源码不一样。 <标签 v-for="(变量名,索引变量) in 集合模型数据">如果不需要索引可以省去, 索引变量是从0开始,所以要表示序号的话,需要手动的加1 {{索引变量 + 1}} {{变量名}} </标签> > <a v-bind:href="url">链接1</a> <a :href="url">链接2</a> <input type="text" v-model="url"> <input type="button" value="点我一下" v-on:click="handle()"> <input type="button" value="点我一下" @click="handle()"> 年龄<input type="text" v-model="age">经判定,为: <span v-if="age <= 35">年轻人(35及以下)</span> <span v-else-if="age > 35 && age < 60">中年人(35-60)</span> <span v-else>老年人(60及以上)</span> 年龄<input type="text" v-model="age">经判定,为: <span v-show="age <= 35">年轻人(35及以下)</span> <span v-show="age > 35 && age < 60">中年人(35-60)</span> <span v-show="age >= 60">老年人(60及以上)</span> <div v-for="addr in addrs">{{addr}}</div> <hr> <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}} </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ url: "https://www.baidu.com" age: 20 addrs:["北京", "上海", "西安", "成都", "深圳"] }, method:{ handle: function(){ alert("你点我了一下..."); } } }) </script>
3.生命周期
vue的生命周期:指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示:
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
- mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。一般用于页面初始化自动的ajax请求后台数据
- mounted声明周期的钩子函数,与methods同级,例:
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
},
mounted () {
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
4.Vue项目开发
-
对于vue项目,index.html文件默认是引入了入口函数main.js文件,我们找到src/main.js文件,其代码如下:
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
上述代码中,包括如下几个关键点:
- import: 导入指定文件,并且重新起名。例如上述代码
import App from './App.vue'
导入当前目录下得App.vue并且起名为App - new Vue(): 创建vue对象
- $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。
- router: 路由,详细在后面的小节讲解
- render: 主要使用视图的渲染的。
- import: 导入指定文件,并且重新起名。例如上述代码
-
打开App.vue, .vue结尾的都是vue组件。而vue的组件文件包含3个部分:
- template: 模板部分,主要是HTML代码,用来展示页面主体结构的
- script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
- style: css样式部分,主要通过css样式控制模板的页面效果得
<template> <div id="app"> {{message}} </div> </template> <script> export default { data(){ return { "message":"hello world" } } } </script> <style> </style>
5.组件库Element
5.1 引入
-
Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。
-
链接:https://element.eleme.cn/#/zh-CN
-
使用方式:
-
-
安装ElementUI组件库
-
在main.js这个入口js文件中引入ElementUI的组件库
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
-
创建一个vue组件文件,组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法,
<template> </template> <script> export default { } </script> <style> </style>
-
-
5.2 组件
-
Table表格
- 组件属性:
- data: 主要定义table组件的数据模型
- prop: 定义列的数据应该绑定data中定义的具体的数据模型
- label: 定义列的标题
- width: 定义列的宽度
- 组件属性:
-
Pagination分页
-
属性:
- background: 添加北京颜色,也就是上图蓝色背景色效果。
- layout: 分页工具条的布局,其具体值包含
sizes
,prev
,pager
,next
,jumper
,->
,total
,slot
这些值 - total: 数据的总数量
-
事件:
- size-change : pageSize 改变时会触发
- current-change :currentPage 改变时会触发
- size-change : pageSize 改变时会触发
-
-
Dialog对话框
- 属性:
- visible.sync :是否显示 Dialog
- visible属性绑定的dialogTableVisble属性一开始默认是false,所以对话框隐藏;然后我们点击按钮,触发事件,修改属性值为true,然后对话框visible属性值为true,所以对话框呈现出来。
- visible.sync :是否显示 Dialog
- 属性:
-
Form表单
<template>
<div>
<!-- Button按钮 -->
<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>
<!-- Table表格 -->
<el-table
:data="tableData"
style="width: 100%">
<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>
<br>
<!-- Pagination分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
layout="sizes,prev, pager, next,jumper,total"
:total="1000">
</el-pagination>
<br><br>
<!--Dialog 对话框 -->
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<br><br>
<!-- Dialog对话框-Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
//表单案例的提交事件
onSubmit() {
console.log(this.form); //输出表单内容到控制台
this.dialogFormVisible=false; //关闭表案例的对话框
}
},
data() {
return {
//表单案例的数据双向绑定
form: {
name: '',
region: '',
date1: '',
date2:''
},
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false, //控制form表单案例的对话框
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 弄'
}]
}
}
}
</script>
<style>
</style>
5.异步加载
-
通过import命令导入axios,代码如下:
import axios 'axios';
页面加载完成,自动加载,使用之前的mounted钩子函数,并且我们需要将得到的员工数据要展示到表格,所以数据需要赋值给数据模型tableData,所以我们编写如下代码:
mounted(){ axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list") .then(resp=>{ this.tableData=resp.data.data; //响应数据赋值给数据模型 }); }
<template> : 用于自定义列的内容
- slot-scope: 通过属性的row获取当前行的数据
<template>
<div>
<!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
<el-container style="height: 700px; border: 1px solid #eee">
<el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
<el-container>
<el-aside width="230px" style="border: 1px solid #eee">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
<el-menu-item index="1-1">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!-- 表单 -->
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchForm.gender" placeholder="性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="入职日期">
<el-date-picker
v-model="searchForm.entrydate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="image" label="图像" width="180">
<template slot-scope="scope">
<img :src="scope.row.image" width="100px" height="70px">
</template>
</el-table-column>
<el-table-column prop="gender" label="性别" width="140">
<template slot-scope="scope">
{{scope.row.gender==1?"男":"女"}}
</template>
</el-table-column>
<el-table-column prop="job" label="职位" width="140"></el-table-column>
<el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
<el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
<el-table-column label="操作" >
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>
<!-- Pagination分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
layout="sizes,prev, pager, next,jumper,total"
:total="1000">
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import axios 'axios'
export default {
data() {
return {
tableData: [
],
searchForm:{
name:'',
gender:'',
entrydate:[]
}
}
},
methods:{
onSubmit:function(){
console.log(this.searchForm);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
mounted(){
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
.then(resp=>{
this.tableData=resp.data.data;
});
}
}
</script>
<style>
</style>
6.路由
-
前端路由:URL中的hash(#号之后的内容)与组件之间的对应关系,
-
vue官方提供了路由插件Vue Router,其主要组成如下:
-
VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
-
<router-link>:请求链接组件,浏览器会解析成<a>
-
<router-view>:动态视图组件,用来渲染展示与路由路径对应的组件
-
-
原理:
-
VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
然后我们页面提供一个组件,用户点击,发出路由请求;
接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;
最后VueRouter会切换中的组件,从而进行视图的更新
-
-
使用步骤:
- 在src/router/index.js文件中定义路由表,根据其提供的模板代码进行修改
- 在main.js中,引入了router功能
- 路由基本信息配置好了,路由表已经被加载,修改页面按钮为router-link
- 在内容展示区域即App.vue中定义route-view,作为组件的切换
4.Ajax
1.Ajax
-
Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。其作用有如下2点:
- 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
-
数据交互作用:
- 前端可以通过Ajax技术,向后台服务器发起请求,后台服务器接受到前端的请求,从数据库中获取前端需要的资源,然后响应给前端,前端在通过我们学习的vue技术,可以将数据展示到页面上。
-
异步交互:
- 在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。
-
同步:
- 浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
-
异步:
- 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。
-
客户端Ajax请求代码的步骤:
-
第一步:创建.html的文件,提供如下代码,主要是按钮绑定单击事件,我们希望点击按钮,来发送ajax请求
<body> <input type="button" value="获取数据" onclick="getData()"> <div id="div1"></div> </body> <script> function getData(){ } </script> </html>
第二步:创建XMLHttpRequest对象,用于和服务器交换数据,也是原生Ajax请求的核心对象,提供了各种方法。代码如下:
//1. 创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest();
第三步:调用对象的open()方法设置请求的参数信息,例如请求地址,请求方式。然后调用send()方法向服务器发送请求,代码如下:
//2. 发送异步请求 xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list'); xmlHttpRequest.send();//发送请求
第四步:我们通过绑定事件的方式,来获取服务器响应的数据。
//3. 获取服务响应数据 xmlHttpRequest.onreadystatechange = function(){ //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应, 200表示这是一个正确的Http请求,没有错误 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ document.getElementById('div1').innerHTML = xmlHttpRequest.responseText; } }
-
2.Axios
-
Axios是对原生的AJAX进行封装,简化书写。
-
基本使用:
-
引入Axios文件
<script src="js/axios-0.18.0.js"></script>
-
使用Axios发送请求,并获取响应结果,官方提供的api很多,此处给出2种,如下
-
发送 get 请求
axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){ alert(resp.data); })
-
发送 post 请求
axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); });
axios()是用来发送异步请求的,小括号中使用 js的JSON对象传递请求相关的参数:
- method属性:用来设置请求方式的。取值为 get 或者 post。
- url属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2。
- data属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以获取到响应的数据。
-
-
-
请求方法别名:
-
Axios还针对不同的请求,提供了别名方式的api,具体如下:
方法 描述 axios.get(url [, config]) 发送get请求 axios.delete(url [, config]) 发送delete请求 axios.post(url [, data[, config]]) 发送post请求 axios.put(url [, data[, config]]) 发送put请求 可以将get请求代码改写成如下:
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => { console.log(result.data); })
post请求改写成如下:
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => { console.log(result.data); })
-