1.HTML和CSS
-
HTML(HyperText Markup Language)：超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签构成的语言
- HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
-
CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）。
-
HTML基础结构：
-
java"><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.***/dy/deco/2012/0613/yo***20120613img01/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、#*********，简写：#000、#***c
- 关键字：预定义的颜色名
- 三种表示方式：
-
元素选择器
-
选择器的名字必须是标签的名字
-
作用：选择器中的样式会作用于所有同名的标签上
-
用法：
元素名称 { 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-***patible" 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-***patible" 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() ：显示带有一段消息和一个确认按钮的警告框。
- ***firm() ：显示带有一段消息以及确认按钮和取消按钮的对话框。
- setInterval(fn,毫秒值) ：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout(fn,毫秒值) ：在指定的毫秒数后调用函数或计算表达式。
- 属性：
-
Location对象：浏览器地址栏对象，常用href属性
- 属性：
- href ：获取或设置浏览器的地址信息
- 属性：
5.5 DOM对象
-
DOM对象：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- 封装的对象分为
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- ***ment：注释对象
- 封装的对象分为
-
获取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.***" 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.***/#/zh-***
-
使用方式：
-
-
安装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="su***ess">成功按钮</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.***/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.***/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.***/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.***/mock/169327/emp/list").then(result => { console.log(result.data); })post请求改写成如下：
axios.post("http://yapi.smart-xwork.***/mock/169327/emp/deleteById","id=1").then(result => { console.log(result.data); })
-
