前端内容整理-CSDN博客

本文链接：https://blog.csdn.net/weixin_60589160/article/details/121342894

文章目录

前端内容整理

前端内容整理

一.HTML概述

是超文本标记语言.用来完成一个静态网页
结构:由大量的标签组成的.标签都是成对儿出现的

(一).基本结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		<!-- 正文内容 -->
	</body>
</html>

(二).标记分类

按照是否柚子元素或内容
- 单标记:<标记名称>
- 双标记:<标记名称></标记名称>
按照是否自动换行划分
- 行元素:不自动换行,宽度是文本宽度
- 块元素:自动换行,宽度是父级的100%

(三).注释

<!–注释内容–> 快捷键:Ctrl+"/"

(四).文本标记

加粗<b></b>
倾斜<i></i>
下划线<u></u>
删除线<s></s>
上标<sup></sup>
下标<sub></sub>
文本标记<font></font>
- 文本标记的属性:颜色color=" “, 大小size=” “, 字体face=” ".

(五).块元素

段落<p></p> 属性:align=“left|center|right”
标题字<h1_6></h16> 属性:align=“left|center|right”
分割线<hr> 属性:color=" “, size=” “, width=” ", align=“left|center|right”
强制换行<br>

(六).实体

大于号: > 小于号: < 双引号: "
单引号: ' 空格:   连接符(&): &
版权符号: © 注册商标符号: ®

(七).列表

无序列表实心圆|空心圆|实心方块
- <ul type=“disc|circle|square”>
  
  <li></li>
  
  </ul>
有序列表
- <ol type=“1|a|A|i|I” start=“数字”>
自定义列表
- <dl>
  
  <dt></dt>
  
  <dd></dd>
  
  </dl>

(八).图片

<img src=“图片路径”>
- 属性:图片不显示提示信息: alt=" “, 宽度: width=” ",
- 图片显示鼠标停留: title=" “,高度: height=” “,边框: border=” ".

(九).路径

绝对路径
- 例1:协议名称://主机名称/文件夹/文件全称
- 例2:http://www.baidu.com/aa/01.jpg
相对路径
1. 同级: (./文件名)
2. 下一级:(文件夹/文件名)
3. 上一级:(…/文件名)

(十).超链接

作用:实现页面之间的跳转
链接元素:文字,图片
格式:<a href=“跳转页面路径”>文字说明</a>
属性:窗口打开方式 target="_self(自身)|_blank(新窗口)"
链接形式:
1. 链接到网页或图片
2. 空链接(置顶): <a href="#">置顶</a>
3. 下载资源: <a href=“压缩文件路径”>压缩文件</a>
4. 发送邮件: <a href=“mailto:邮箱地址”>发送邮件</a>
5. 锚点连接:
  - 创建锚点: <a name=“锚点名称”></a>
  - 使用锚点:
    1. <a href="#锚点名称">跳转到锚点</a>
    2. <a href=“页面路径#锚点名称”>跳转到锚点</a>
6. 链接到JS
  - 警告框:<a href=“javascript:alert(‘内容’)”></a>
  - 警告对话框:(是否确定删除?) <a href=“javascript:confirm(‘内容’)”></a>
  - 信息提示输入框:(留言建议) <a href=“javascript:prompt(‘内容’)”></a>

(十一).表格

<table>属性: 边框border, 边框颜色bordercolor, 宽度width, 外边距cellspacing, 内边距cellpadding, 高度height, 水平对齐方式align,背景颜色bgcolor, 背景图片background.
<tr>属性: 高度height, 背景颜色bgcolor, 背景图片background. 水平对齐方式align, 垂直对齐方式valign=“top|middle|bottom”
<td>属性: 宽度width, 背景颜色bgcolor, 背景图片background. 水平对齐方式align, 垂直对齐方式valign=“top|middle|bottom”, 行合并rowspan, 列合并colspan.

(十二).表单

格式:<form action=“提交页面地址” method提交方式=“get/post”>表单控件</form>
- get:不安全,传输数据量小,一般不超过2kb
- post:安全,传输数据量大,理论上没有限制
表单控件:
1. 单行文本框:<input type=“text” name=" ">
  - 属性:提示信息placeholder=" “, 最大长度maxlength=” “, 默认值value=” ".
2. 密码框: <input type=“password” name=" "> 属性同上
3. 单选框: <input type=“radio” name=" " value=" ">属性:默认选中checked=checked.
4. 多选框: <input type=“checkbox” name=" " value=" ">
5. 提交按钮:<input type=“submit”>
6. 重置按钮: <input type=“reset”>
7. 浏览框: <input type=“file” name=" ">
8. 多行文本框: <textarea name=" “> </textarea> 属性:行高rows=” “, 列宽cols=” “, 提示信息placeholder=” ", 只读readonly=“readonly”, 禁用disabled=“disabled”.
9. 下拉列表框:
  - <select name=" " size=" ">
  - <optgroup label=“分组名称”>
  - <option value=" "> </option>
  - </optgroup>
  - </select>
10. 图片提交按钮: <input type=“image” src=" "> 属性:宽度width, 高度height.
11. 自定义按钮:<input type=“button” value=" ">
12. 隐藏域: <input type=“hidden” name=" " value=" ">

二.CSS概述

(一).CSS概述

什么是CSS:[Cascading Style Sheets]层叠样式表
CSS的作用: 用来修饰网页元素(HTML标记)的外观(字体大小,颜色等),W3C规定尽量使用CSS样式替代HTML属性
CSS和HTML的关系: HTML制作网页结构,CSS用来修饰网页外观
CSS的使用:
1. 内联样式:(写在标记上)
  
  <标记名称 style=“CSS代码”></标记名称>
2. 内部样式:(写在head标记中)
  
  <style type=“text/css”> CSS代码 </style>
3. 外部样式:(CSS样式写到单独页面中,然后连接此页面)
  - <link type=“text/css” rel=“stylesheet” href=“css文档路径地址” media=“all”>
  - 说明:
    1. type:目标文档的类型
    2. rel:当前文档和目标文档的关系
    3. href:CSS文档的URL
    4. media:根据不同媒介(设备),可实现不同的CSS样式
4. 优先级
  - 内联样式优先级最高,内部样式和外部样式优先级相同,一旦冲突后面的样式覆盖前面的样式

(二).选择器

通配选择器

*{样式:值;} eg: *{color:red;}
标记选择器

标记{样式:值;} eg: b{color:red;}
类选择器

.类{样式:值;} eg: .b1{color:red;} <b class=“b1”>加粗</b>
id选择器

#id名{样式:值;} eg: #a{color:red;} <b id=“a”>加粗</b>
群组选择器

类,类{样式:值;} eg: b,.b1{color:red;} 用,号隔开
子代选择器

标记>标记{样式:值;} eg: p>b{color:red;}
后代选择器

标记标记{样式:值;} eg: p u{color:red;} 两标记直接用空格隔开
选择器的优先级
- 继承<通配<标记<class<id<内联

(三).伪类选择器

针对超链接
- 元素未访问 :link
- 元素访问过 :visited
- 鼠标滑过 :hover
- 鼠标激活 :active
针对表单

获取焦点 :focus
其他
- 元素前 :before
- 元素后 :after
- eg: p:after{contrnt:“内容” url(图片路径);}

(四).文本样式

字体颜色 clor:red;
字体大小 font-size:20px;
字体 font-family;
水平对齐方式 text-align:left|center|right;
加粗 font-weight:bold;
倾斜 font-style:italic;
修饰线 text-decoration:underline|overline|line-thriugh|none
缩进 text-indent:2em;
行高 line-height:40px;

(五).盒子模型

没有实际意义的块元素:<div>文本</div>
没有实际意义的行元素:<span>文本</span>
说明:只能给块元素和有宽高属性的标记设置宽高,行元素不能设置宽高

(六).内边距(只能是正数)

上内边距 padding-top
右内边距 padding-right
下内边距 padding-bottom
左内边距 padding-left
padding:值; 四个方向
padding:值值; 上下左右
padding:值值值; 上左右下
padding:值值值值; 上右下左

(七).外边距

margin 格式同内边距一样
可以是正数, 负数,auto
盒子水平居中: margin:0 auto;
全局样式: *{margin:0; padding:0;}
兄弟关系:上下冲突取大值,左右相加
前台关系: 子元素设置上下外边距会传递给父元素,并且冲突取大值

(八).边框

border:宽度样式颜色
例:border-top|right|bottom|left:2px solid red;
宽度计算:外边距+边框+内边距+宽度

(九).布局

布局的分类:文档流布局(默认布局), 浮动布局, 定位布局
浮动布局:float:left|right;
1. 脱离文档流不占位
2. 无论是左浮动还是右浮动都会靠在另一个浮动元素上或有边框的边界上才会停止
3. 浮动的块元素:没有设置宽度,宽度是文本宽度
4. 浮动的行元素:设置宽高
5. 浮动的元素对后面元素的影响是能够实现文本环绕效果
布局显示
1. display:none(不占位隐藏), inline(块元素变行元素), block(行元素变块元素), inline-block(内联块)
2. visibility:hidden(占位隐藏)
清除浮动
1. 解决高度塌陷问题:父元素没设置高度,子元素全部浮动
2. 万能清除浮动:
  1. 给父元素加class=“clear”
  2. css代码.clear{clear:both;zoom:1;}

(十).模拟服务器解析浏览器发送来的数据

package cn.tedu.test;

public class TestURL {
    public static void main(String[] args) {
        //1.接受用户发来的数据
        String url="http://127.0.0.1:8848/cgb2107/student.html?user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03";
        //2.按照?切割字符串,由于?在java里是特殊符号所以使用\\转义符号
        String[] a = url.split("\\?");
        /**
         * 将url切割为两部分
         * 第一部分:http://127.0.0.1:8848/cgb2107/student.html
         * 第二部分:user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03
         */
        //3.只获取数组里的第二部分
        String data= a[1];
        //4.继续切,按照&切割
        String[] b = data.split("&");
        /**
         * 切割后得到结果:
         * [user=jack,age=18,sex=1,hobby=1,hobby=2,hobby=3,xueli=2,day=2021-09-03]
         */
        //5.循环遍历b数组
        for (String s:b) {
            //6.将遍历结果按照=号继续切割,只取下标为1的部分
            String datas = s.split("=")[1];
            //7.打印结果
            System.out.println(datas);
        }
    }
}

三.JS概述(JavaScript)

(一).JS概念

JS是弱类型的语言，是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性

基于对象：JS和Java一样，也有对象的概念，也提供了一些内置的对象，也可以自定义对象
事件驱动：JS里有很多事件，当事件被触发时才执行JS代码，常用的事件：鼠标滑过/单击/双击/鼠标悬停
脚本语言：JS是一个弱类型，被浏览器执行的语言，只要有浏览器的地方都可以执行JS

JS的优势：
1. 是直译式的语言，直接执行的就是源代码，省去了编译的过程，增强了用户和浏览器之间的交互性
2. JS是一门弱类型的语言，没有严格的数据类型
3. 良好的交互性
4. 一定的安全性
5. 跨平台性
注释：单行：// 多行：/**/
JS的变量：变量类型变量名=变量值 var a=0;
1. 在JS中是通过 var 关键字来声明一个变量
2. 在JS中声明的变量是不区分类型的，可以指向任意的数据类型
JS的运算符: JS中的运算符和Java中的运算符大致相同
1. 算术运算符: +，-，*，/，%，++，–
2. 赋值运算符: =，+=，-=，*=，/=，%=
3. 比较运算符: ==，!=, =，!, > ，< ，>=，<=
4. 位运算符: & ， |
5. 逻辑运算符: &&，||
6. 前置逻辑运算符: ! (not)
7. 三元运算符: ? :

(二).JS的使用位置

使用的位置：
1. 行内JS：只能作用在一行
2. 内部JS：通常在head标签里，使用script标签，把JS的代码包起来
3. 外部JS：松耦合，单独创建一个js文件，可以被引入到各种网页中.(例如: <script src=“1.js”></script>)
行内JS
- 单击div时弹出100
  <div οnclick=“alert(100)”>我是div</div>
  <div οnclick=“alert(‘你好’)”>我是div</div>
- 双击事件，div时弹出1000
  <div οndblclick=“alert(1000)”>我是div</div>
- 鼠标进入事件，div弹出200时
  <div οnmοuseenter=“alert(200)”>我是div</div>
内部JS：无条件执行
<script>alert(‘我来了’)</script>
number类型的运算会自动转换

(三).JS的运算

JS的数据类型：number string null boolean undefined
===是JS里特有的运算符，比较的是值和类型
b*=2 //正确，复合赋值运算符会自动类型转换
b=b*2 //错误，需要强转byte b=(byte)(b*2)
typeof:用于返回变量或者表达式的数据类型
三目运算符var i=e>f?(e>h?e:h):(f>h?f:h);//比较三个数的大小
if…else判断语句
switch…case语句
for循环
定义常量的关键字const ,必须得赋初始值，值不可改变. const m=1;consloe.log(m);

(四).JS数组

JS数组:用于在单个的变量中存储多个值
JS数组中可以存放任意的数据类型
JS数组中的长度可以被改变
第一种方式：
var a=new Array(‘asd’,true,1);
console.log(a);
第二种方式：推荐！！免去了创建对象的麻烦
var b=[ ];
b=[“qwe”,false];
console.log(b);
遍历数组(普通for循环）
for (var i = 0; i <b.length ; i++) {
console.log(b[i]);
}
JS里的高效for循环（JS里的for…in）
for(var o in b){
console.log(b[o]);
}
java里的高效for循环for(object o:b)

(五).JS函数

JS通过function关键字来声明函数
语法一：function 函数名(参数列表){函数体}
例：定义JS函数 function add(a,b){console.log(a+b);}
语法二：声明：var 函数名称 =function（[参数列表]）｛函数体｝
区别：第二种方式不能把调用方法写在前面，否则会报错
VUE.JS 作用域插槽: 一般在表格数据中可能展现的数据不全.如果需要获取全部信息,则一般使用作用域插槽的用法.
- 基本语法:

 <template slot-scope="scope">
         {{scope.row}}
 </template>
其中 {{scope.row}} 代表当前行的全部数据信息.

(六).JS对象

JS对象，利用function关键字声明对象，用new关键字创建对象
js的内置对象–String/Arrary/Number/Math/JSON
window对象–代表浏览器中一个打开的窗口
1. window.alert(‘123’);
2. window.confirm(‘请选择’);
3. window.prompt(‘请输入’);
4. window.document
string对象:例如:alert(‘1234’.length);
number对象:
1. toFixed();约束小数位数,参数是小数位数
2. parseInt():把字符串转成数字
自定义对象
1. 方式一
  1. 声明对象: function Person(){}
  2. 创建对象: var p=new Person();
  3. 动态的给对象绑定属性: p.name=“zhangsan”;p.age=18;
  4. 动态的给对象绑定函数:
    p.run=function(){
    alert(this.name+":"+this.age);
    }
    console.log§;
  5. 调用函数: p.run();
2. 方式二
  1. var p={
  2. 绑定属性k v(属性k可以省略双引号,v不能省略,但可以使用单引号)
    “pname”:“李四”,
    “page”:100,
  3. 绑定函数 psay:function(){
    console.log(100);
    }
    }
    p.psay();
    console.log§;

(七).DOM技术

DOM概述:全称是文档对象模型，用来利用document对象提供的各种属性和方法，方便快速的定位网页中的所有元素,与HTML网页API接口
获取对象：window.document
常用方法
1. getElementById(“元素的id的属性的值”)-返回1个元素
2. getElementsByName(“元素的name属性的值”)-返回多个元素（数组）
3. getElementsByClassName(“元素的class属性的值”)–返回多个元素（数组)
4. getElementsByTagName(“元素的标签名的值”)–返回多个元素（数组）
5. write()–直接向网页输出，向文档写HTML表达式或JavaScript代码
常用属性
1. title–返回网页的标题
2. id–设置或返回元素的id
3. innerHTML–设置或返回元素的内容0
innerHTML和innerText相同之处：都可以获取，修改元素.
区别：innerHTML可以解析HTML代码，innerText则不行
DOM树结构图

(八).JSON

概述:
- 就是一个字符串，作用就是用来完成浏览器和服务器之间的交换
- 规定了浏览器和服务器之间的轻量级的数据格式: ’ “name”:“jack” ’
- 三种方式:
  1. ’ “name”:“jack” ’
    例：var a=’ “name”:“jack” ’
  2. JSON对象：var a=’{ “firstName”:“John” , “lastName”:“Doe” }’
  3. JSON数组：var a = ‘[{ “firstName”:“Bill” , “lastName”:“Gates” },{ “firstName”:“George” , “lastName”:“Bush” }]’;
JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译

JSON对象：可以把json字符串和JS对象互转

json字符串转成js对象：方便的通过对象，调用属性
- JSON.parse(json字符串)，接收一个json字符串作为参数，返回js对象
js对象转成json字符串：方便对字符串操作（拼接，长度，截取。）
- JSON.stringify(js对象)：接收一个js对象，返回一个json字符串

JSON加深小练习

//1.1.创建字符串
	var a='{"name":"zhangsan","age":18}';
	var b='[{"name":"lisi","age":16},{"name":"wangwu","age":15}]';
//1.2.解析a里name属性的值
	var c=JSON.parse(a);//把一个字符串转成对象
	console.log(c.name);
//1.3.需求：利用dom技术，把解析到的name属性的值，展示在id="d2"位置
	document.getElementById("d2").innerHTML=c.name;
//1.4.//获取b里的wangwu
	var e=JSON.parse(b);
	console.log(e[1].name);

//2.1js对象转换成json字符串:目的是方便的操作字符串,也可以发送给服务器
//2.2创建js对象
	var obj={ name:"jack", age:20};
	var jsonstr=JSON.stringify(obj);//js对象转成json字符串
	console.log(jsonstr);//得到json字符串
	console.log(jsonstr.length);//获取字符串长度
	console.log(jsonstr.concat('hello'));//拼接字符串

(九).小结

DOM的用途?
- 通过JS代码快速的去定位网页中的元素,然后DOM本质会把每个元素当做树状结构上的一个节点,通过不同方式获取到网页中的元素,获取到后可以对元素进行各种操作.
JS的用途?
- 增加用户和浏览器之间的交互性
JSON对象的用途?
- 完成JSON字符串和JS对象的互转,
- json字符串转成js对象：方便的通过对象，调用属性,方法.
- js对象转成json字符串：方便对字符串操作（拼接，获取长度，截取。）
JSON字符串和JS对象的区别?
1. 语法不同.
  - JSON: ‘{“name”:“jack”,“age”:“20”}’
  - JS: {name:“jack”,age:“20”}
2. 作用不同
  - JSON:可以存储数据,本质上就是字符串,只能进行对字符串的一些操作(比如:拼接,截取,获取长度)
  - JS:也可以存储类似的数据,类似java中的对象,可以直接通过对象调用属性.

四.Git的使用

(一).Git概述

是一个开源的分布式的版本控制产品，可以上传开源项目，上传到Gitee服务器上，很方便的管理代码，还可以下载
上传：
- 工作空间：用来保存资源的一个文件夹
- 本地索引：给即将上传的资源，设置索引，提高传输效率
- 本地仓库：是指你自己电脑里的一个文件夹，已经存好了要提交的资源
- 远程仓库：是指在Gitee的服务里，创建了一个文件夹，保存了你提交的资源
下载：只从远程仓库下载资源到自己的电脑里

(二).常用命令

add：从工作空间把要上传的资源添加到本地索引
commit：从本地索引提交到本地仓库
push：从本仓库把资源推送到远程仓库
clone/pull：从远程仓库下载到本地

(三).创建本地仓库

git config --global user.name "用户名" #配置注册时的用户名
git config --global user.email "邮箱@qq.com"  #配置注册时的邮箱
git config --list 				#检查配置信息
mkdir aaa 						#创建文件夹aaa
cd aaa							#进入aaa文件夹
git init								#初始化git(产生了一个隐藏文件.git)
在本地仓库中,创建文件1.txt
git add 1.txt						#新增文件到git中处理
git commit -m "first commit"			#提交(本地索引到本地仓库)，设置说明信息
git remote add origin https://gitee.com/aaa/aaa.git	#建立本地仓库和远程仓库的连接
git push -u origin master #把本地仓库的资源 提交给Git服务器

(四).拉取/下载

把远程仓库中的内容下载到本地：

$ git pull										#从服务器拉取最新内容

(五).组成结构图

五.VUE

(一).VUE概述

概述：是一个基于JavaScript的轻量级渐进式的前端框架
特点
1. 一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
2. 是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
3. 原生html页面是通过js 操作的是dom，而vue.js操作的是数据
4. 和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据
5. 优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api
Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。
- 可以只使用核心vue.js
- 可以只使用核心vue.js + components组件
- 可以只使用核心vue.js + components组件 + router路由
- 可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
- 构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

(二).VUE的使用

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">
			<h1>vue入门案例:{{msg}}</h1>
			<h2>点赞:{{number}}</h2>
			<button @click="addNum">增加</button>
		</div>
		<!-- 3.使用Vue准备数据 -->
		<script>
			//4.创建Vue对象
		new Vue({
			//el指的是element的简称,即将把准备好的数据渲染到指定区域 --挂载点
			//#app 是利用CSS的id选择器,选中了一个HTML元素
				el:"#app",
				data:{
					msg:"~模拟点赞",
					number:100
				},
				methods:{
					addNum(){this.number++}
				}
			})			
		</script>		
	</body>
</html>

基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的基础语法</title>
		<!-- 1.导入vue.js文件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.数据渲染区,利用插值表达式获取Vue准备好的数据 {{}}-->
		<div id="app">
			Vue运算符:
			加法:{{3+2}}
			减法:{{3-2}}
			乘法:{{3*2}}
			除法:{{3/2}}
			取余:{{3%2}}
			三元运算符:{{  1 > 2 ? 'yes':'no' }}
			<!-- 字符串操作: 求长度,拼接,截取 -->
			字符串:{{name}} 
			长度:{{name.length}} 
			拼接:{{name.concat(666)}}
			截取:{{name.substring(2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app",//指定挂载点,把数据展示在指定位置(利用了css选择器)
				data:{ //准备要展示的数据
					name:"jack"
				}
			})
		</script>
	</body>
</html>

数据的三种写法：数据的三种写法:标准写法
1. 第一种形式
  data : {
  msg : “hello vueeee~~~”
  }
2. 第二种形式:定义函数,返回对象
  data:function(){
  return {
  msg:“hi~vue”
  }
  },
3. 第三种形式:定义函数,es6的简写法
  data(){
  return {
  msg:“vue hi~”
  }
  }
引入外部文件的路径问题
1. 如果你想要的引入资源，和你在同级目录，直接写vue.js
2. 如果你想要的引入资源，和你不在同级目录，就先写同级的目录，在继续写资源名称

(三).MVVM框架

MVVM：实现把数据和页面分离，同时实现自动化，数据变化，页面随之变化，无需写代码
1. M是Modle，用来封装数据的模型层
2. V是View，视图,用来展示数据
3. VM是Vue对象，把M和V连接起来
4. 好处：实现了代码的松耦合

(四).vue指令，高级用法：v-命令

指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
使用方式：就是在HTML的标签上，加一些v-的指令
常见Vue指令:v-if v-for v-on v-bind v-model v-cloak

v-model:实现数据驱动，双向绑定

数据驱动，双向绑定：改Model会哦影响View，改View会影响Model
v-model是Vue的指令，实现了双向绑定的功能,把值绑定到指定属性上
v-cloak指令解决插值表示的闪现问题(闪现:刷新网页时,先快速展现插值表达式,然后展示网页内容)
v-if指令用来做判断,条件满足才展示,不满足就不展示
v-show指令也用来做判断,不满足的话,利用css代码隐藏控制着style=“display: none;”
v-else指令,组成顺序依次 if…else if…else
v-for指令用来循环,可以循环数组,类似于JS里的for…in语法
v-on指令用来给HTML元素添加Vue事件, 用:指定事件的触发方式v-on:可以简写成一个@
v-bind指令用来获取变量的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue指令</title>
		<!-- 1.引入vue.js -->
		<script src="js/vue.js"></script>
		<!-- v-clock操作 -->
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
        
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app" v-cloak>
			{{msg}} <br />
			{{msg}} <br />
			<!-- 
				2.1.  v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上
				数据驱动,双向绑定: 改Model会影响View,改View会影响Model 
			-->
			<input type="text" v-model="msg" />
			<!-- 2.2. v-html指令可以解析数据,并识别HTML代码 -->
			<p v-html="msg"></p>
			<!-- 2.3. v-cloak指令解决插值表示的闪现问题 -->
			<!-- 2.4. v-if指令用来做判断,条件满足才展示,不满足就不展示 -->
			<p v-if="person.age>=18">成年人</p>
			<!-- 2.5. v-show指令也用来做判断,不满足的话,利用css控制着style="display: none;" -->
			<p v-show="person.age>=18">成年人</p>
			<!-- 2.6. v-else指令,组成顺序依次 if...else if...else -->
			<p v-if="type === 'A'">优秀</p>
			<p v-else-if="type === 'C'">中等</p>
			<p v-else-if="type === 'B'">良好</p>
			<p v-else>错误</p>
			<!-- 2.7. v-for指令用来循环,可以循环数组,类似于JS里的for...in语法,
				i表示遍历得到的数据,index是下标
			  -->
			<ol>
				<li v-for="i in arr">{{i}}</li>
			</ol>
			<ul>
				<li v-for="i,index in arr">数据是:{{i}} -> 下标是:{{index}}</li>
			</ul>
            <!-- 1. v-on指令用来给HTML元素添加Vue事件,
					用:指定事件的触发方式v-on:可以简写成一个@
			 -->
            <button v-on:click="show()">点我1</button>
			<button @click="say('hi bro')">点我2</button>
			<button v-on:dblclick="say('hi vue')">点我3</button>
            <!-- 练习:计数器,点一次按钮就把次数++ -->
			<button v-on:click="count++">赞{{count}}</button>
			
			<!-- 2. v-bind指令用来获取变量的值-->
			<a href="{{url}}">点我跳转1无效</a>  <!-- 错的 -->
			<a v-bind:href="url">点我跳转2有效</a> <!-- 对的 -->
			<a :href="url">点我跳转3简写</a> <!-- 简写 -->
                    
		</div>
		<!-- 3.创建Vue对象 -->
        
        <!-- 使用步骤:
			 1.导入js.文件
			 2.准备根标签
			 3.创建vue对象,并且实现挂载.
			 4.定义属性.实现数据动态取值
			 知识补充: new Vue({}) 函数式编程
			 
			 关于变量说明:
				1. js中变量定义 早期 var 全局变量 没有作用域.
				2. let有作用域的概念
				3. const 常量定义  不允许修改		
		 -->       
		<script>
			new Vue({
				el:"#app", //挂载点
				data: {  //要被渲染的数据
					msg : '<h1>hello vue123</h1>',
					type: 'C' ,
					person:{
						age:10
					},
					arr : ['杨幂','迪乐热巴','Anglelababa'],
                    count:0  ,//计数器
					url:'https://www.baidu.com'
				},
                methods:{ //存方法
					// show:function(){
					show(){//函数的简写形式
						alert(100);
					},
					say(a){
						alert(a);
                    }
                }                    
			})
		</script>
	</body>
</html>

(五).Vue组件

概述：组件（Component）是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码.组件系统让我们可以独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
格式：Vue.component(1,2)-1是组件名，2是组件的显示效果
例：Vue.component(‘hellocom’,{
template:’<h1>(@⁰@) Vue组件</h1>’
})
全局组件：在new Vue({})外,在<body><script></script></body>里
局部组件：在new Vue({})里
例：
new Vue({
el:’#app9’,
components:{
person:{//组件名
template:’<p>我是一个组件</p>’
}
}
})
使用组件:在数据渲染区，直接把组件名当做HTML标签名用
全局组件和局部组件的区别：全局组件可以被多个Vue对象使用，局部组件只能在当前Vue对象中使用

(六). Vue脚手架

安装node脚手架

node -v   #检查nodejs的安装版本
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm install vue-cli -g  #安装vue-cli脚手架
vue -V #查看版本
where vue #vue安装在哪里

配置项目

vue init webpack jt02   # 慢,等....做了很多选择 # 可能需要执行多次才会成功
cd jt02  #进入项目目录
npm run dev #启动项目
打开浏览器访问网址:  http://localhost:8080

(七).Vue项目的使用

概述
1. src文件夹: 写自己的业务
2. src/components文件夹: 定义组件
3. src/router文件夹: 定义路由
4. src/App.vue文件: 注册组件
5. src/main.js文件: 入口js文件
6. index.html: 作为项目的主页

自定义组件

<template> *<!-- 1.写 HTML代码 -->*
    <script> /* 2.写js代码 */
        <style> /* 3.写css代码*/

(八).Vue的Ajax

Ajax概述:局部刷新(是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术),异步访问.
1. 同步特点: 一个线程成依次加载执行,如果数据没有加载完成则其他数据处于等待的状态.
2. Ajax为什么可以异步: 得益于Ajax的设计原理-Ajax引擎
Ajax原理:Ajax引擎
1. 用户发起请求,交给Ajax引擎进行处理, 用户可以执行其它的操作.
2. Ajax引擎接收到用户请求之后, 发起Http请求访问目标服务器.
3. 后台服务器将数据返回给Ajax引擎.
4. Ajax引擎将最终获取的数据通过回调函数的方式交给用户处理.
axios技术,Vue中封装了ajax并增强了它,在异步并发处理优于原生Ajax.
Axios指定公共的请求前缀: axios.defaults.baseURL=“http://localhost:8090”

Axios案例练习(Axios语法):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Ajax请求的测试</h1>		
		<!-- 1.引入JS -->
		<script src="../js/axios.js"></script>
		<!-- 2.axios入门 -->
		<script>
            /**
			 * 总结: 前端Get请求参数传递的方式3种
			 * 	方式1: 通过?属性=属性值的方法拼接.
			 * 	方式2: 通过对象的方式实现数据传递.
			 * 	方式3: 利用restFul的结构实现参数传递.
			 */

			/**
			 * 需求:获取后台服务器的业务数据
			 * URL: http://localhost:8090/getUser
			 * 参数说明:
			 * 		url: ajax的请求的地址.
			 * 		参数: ajax请求的参数.
			 */
			let url = "http://localhost:8090/getUser"
			axios.get(url)
				 .then(function(promise){
					 console.log(promise.data)
				 })
			//方法二 get表示get请求方式			promise表示变量名称	
			axios.get("url地址信息","参数信息").then(promise=>{
				console.log(promise.data)
				 })
		</script>
	</body>
</html>

axios代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Get请求练习</title>
	</head>
	<body>
		
		<h1>Ajax项目前测试</h1>
		<!-- 导入js jar包 -->
		<script src="../js/axios.js"></script>
		<script>
			
			/**
			 * 总结: 前端Get请求参数传递的方式3种
			 * 	方式1: 通过?属性=属性值的方法拼接.
			 * 	方式2: 通过对象的方式实现数据传递.
			 * 	方式3: 利用restFul的结构实现参数传递.
			 * 
			 * 作业1:  根据ID查询用户信息
			 * 作业2:  根据age/sex查询用户信息
			 */
			
			/**
			 *  作业1 
			 * 	url地址: http://localhost:8090/axios/findUserById
			 *  参数:    id=1
			 *  返回值:  console.log输出  
			 */
			
			let url1 = "http://localhost:8090/axios/findUserById?id=1"
			axios.get(url1)
			     .then(function(promise){
					 console.log(promise.data)
				 })
            /**
			 *  作业2:  根据age/sex查询用户信息
			 * 	url地址: http://localhost:8090/axios/findUserByAS
			 *  参数:    id=1
			 *  返回值:  console.log输出  
			 *  知识点:  根据对象传递参数时,使用params关键字
			 */
			let url2 = "http://localhost:8090/axios/findUserByAS"
			//封装对象
			let user = {
				age: 18,
				sex: "女"
			}
			axios.get(url2,{params : user})
				 .then(function(promise){
					 console.log(promise.data)
				 })
            /* 
				案例三: 利用restFul实现数据获取
				需求:  根据name/sex查询数据
				模板字符串: 语法ES7的写法 一对反引号进行数据拼接,通过${} 获取变量
			 */	 
			let name = "黑熊精"
			let sex = "男"
			//let url3 = "http://localhost:8090/axios/user/"+name+"/"+sex
			let url3 = `http://localhost:8090/axios/user/${name}/${sex}`
			axios.get(url3)
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

Axios-GET/DELETE 请求方式
1. http://localhost:8090/findUser?id=xxx&name=xxx
2. 利用对象的方式进行数据封装 axios.get(url,{params: 封装的对象})
3. RestFul的参数提交方式.
Axios-POST/PUT

/**
			 * 业务: 实现post请求入库操作 实现入库用户
			 * 知识点: 
			 * 		1.post请求中的参数 axios.post(url,user)
			 * 
			 */
			let url = "http://localhost:8090/axios/saveUser"
			let user = {
				name: "国庆快乐",
				age: 72,
				sex: "女"
			}
			axios.post(url,user)
				 .then(function(promise){
					 console.log(promise.data)
				 })

async-await 关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简化</title>
	</head>
	<body>
		<h1>async-await写法</h1>
		<!-- 导入js jar包 -->
		<script src="../js/axios.js"></script>
		<script>
			//1.指定请求前缀
			axios.defaults.baseURL = "http://localhost:8090"
			
			/**
			 * 需求: 要求ajax请求在一行完成!
			 * 解决方案: async-await
			 * 语法说明:
			 * 		1.async 必须标识函数方法
			 * 		2.await 必须标识ajax请求
			 *  实际意义:
			 * 		解决了ajax中的头号难题, "回调地狱"问题
			 */
			
			//1.定义函数
			async function getUser(){
				let promise = await axios.get("/getUser")
				console.log(promise.data)
				
				//解构赋值 固定写法 死记硬背
				let {data: result} = await axios.get("/getUser")
				console.log(result)
			}			
			//2.调用函数
			getUser()
		</script>
	</body>
</html>

(九).Vue的路由

Vue中的路由概念:根据用户的请求url地址,展现特定的组件(页面)信息,(控制用户程序跳转过程)(实现的效果就是,跳转不同的位置,展现不同的组件)

Vue路由测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>router路由练习</title>
		<!-- 1.导入js文件 -->
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 4.使用路由 -->
			<router-link to="/test1">点我显示主页</router-link>
			<router-link to="/test2">点我显示帮助页</router-link>
			<!-- 5.展示路由匹配到的组件效果 -->
			<router-view></router-view>
		</div>
		<!-- 3.创建vue对象 -->
		<script>
			//3.定义组件
			var home={template:"<h1>我是主页</h1>"}
			var help={template:"<h1>我是帮助页</h1>"}
			var luyou=new VueRouter({//2.创建路由实例
				routes:[//属性用来定义路由规则
				//规定哪个路径匹配哪个组件
					{path:"/test1",component:home},
					{path:"/test2",component:help}
				]
			})
			new Vue({
				el:"#app",//挂载点
				router:luyou//通过router属性配置路由
			})
		</script>
	</body>
</html>

Vue路由语法说明
1. 商场路由的跳转的关键字
2. 路由的填充位在该位置展现路由.
3. 路由跳转规则

Vue路由父子组件跳转

路由填充位设定在Home.vue中定义路由占位符.

  <!-- 定义主页面结构-->
      <el-main>
        <!-- 定义路由展现页面-->
        <router-view></router-view>
      </el-main>

实现父子关系的路由映射. 通过children属性实现父子组件跳转功能.

const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/elementUI', component: ElementUI},
  {path: '/home', component: Home, children: [
    {path: '/user', component: User}
  ]}
]

VUE的路由导航守卫

用户和前端数据(实质: 请求路径和组件之间的关系)交互通过路由.前端数据和后端数据通过ajax.
用户在未经登录的条件下,可以直接访问其它页面,导致系统不安全.如果需要控制该漏洞,则需要在前端进行权限的校验.
校验的规则:如果用户访问没有token信息,则表示用户没有登录,则需要跳转到登录页面.
路由导航守卫

/**
 * 路由导航守卫实现
 * 说明: beforeEach用户的每次请求在访问目标网址之前都会被拦截.
 * 参数:
 *     1.to    用户请求的网址对象
 *     2.from  用户请求的来源
 *     3.next  请求的放行
 *  需求:
 *     1.如果用户访问登录页面
 *     2.校验是否含有token数据
 *        有token  放行
 *        没有token  跳转到登录页面
 */
router.beforeEach((to,from,next) => {
    if(to.path === '/login'){
      //直接跳转并且结束代码
      return next()
    }
    //2.判断是否有token
    let token = window.sessionStorage.getItem("token")
    if(token !== null && token !==''){ //更加安全
      //有值,跳转指定页面
      return next()
    }
    //3.如果数据为空则跳转到登录页面
    next('/login')
})
//路由对象的使用
export default router

(十).Vue的生命周期函数

生命周期函数概念:

概念: 生命周期函数,是VUE针对与用户提供的扩展的功能.如果编辑了生命周期函数,则vue对象自动执行,无需手动调用.
生命周期钩子函数种类(共三个阶段,8个钩子函数):
1. 初始化阶段
  1. beforeCreate 创建前 (VUE对象被JS刚解析之后,实例化成功. 内部的属性暂时都为null.创建了一个空对象出来)
  2. created 创建后 (在实例创建完成后被立即调用)(VUE对象开始加载其中的属性和属性的值,当加载完成,对象实例化成功!!! 仅限于创建不执行业务操作.)
  3. beforeMount 挂载前 (vue对象中 el: “#app”, 通过app指定的ID,将指定的区域交给Vue对象进行管理)
  4. mounted 挂载后 (mounted函数执行成功后标志着VUE对象初始化成功)(正在的实例化)(当对象创建完成之后,并且指定区域开始 “渲染”,将区域中的标签/表达式进行解析加载. 当数据加载成功之后,这时mounted执行完成.这时用户可以看到解析后的页面.)
2. 更新阶段(当Vue中的对象进行修改时,才会执行这两个方法)
  1. beforeUpdate 修改前
  2. updated 修改后
3. 销毁阶段(对象销毁)
  1. beforeDestroy 销毁前
  2. destroyed 销毁后(当该方法执行后,vue对象就不存在了)
生命周期函数图示

请添加图片描述

VUE生命周期函数案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						//强制VUE对象执行销毁操作
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>