前端核心技术精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43887285/article/details/119319984

文章目录

前端学习网址:
w3school.com.cn
element.eleme.cn

一、HTML

- 1.学习方法

- - 1.概念

前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。
专门用来制作网页的技术,是超文本标记语言.
超文本: 比文本的功能要强大,网页中可以插入 图片 音频视频等...
标记: 也叫标签,用<???> ,不同的标签有不同的功能

- - 2.前端技术栈

HTML超文本标记语言实现页面展现，形成静态网页

CSS层叠样式表实现页面美化

JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

React facebook出品前端、移动端JavaScript框架

Angular google 出品基于TypeScript的开源 Web 应用框架

Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

对于大家而言，千万不要把重心放在前端技术上，会用，会查，会改才是正确的定位！

- 2.HBuilderX

HBuilderX下载

- - 1.介绍

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。
HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。
它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。

- - 2.jQuery语法支持

HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。

- 3.Web概述

- 4.静态页面HTML

- - 1.概述

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，它是标准通用化标记语言SGML的应用。
它的功能很弱，连脚本语言都算不上，但它小而美，网站开发它却是霸主。

- - 2.结构

文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题

- - 3.语法

HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>;
如果开始和结束中间没有内容，可以合并成一个自闭标签

HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。
属性的值要用单引号或者双引号引起来。

如：<a href="" target="" name="" id=""></a>

HTML注释

格式：<!-- 注释内容 -->

注意：不能交叉嵌套！

如何在网页中做空格和换行

换行：<br>;

空格：在HTML中，多个空格会被当成一个空格来显示。

- 5.常用标签

使用不同的标签，实现在网页中插入不同类型的文件

- - 1.标题标签

<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.标题标签：在网页中插入h1~h6 -->
		<h1>风雨有我在，人民请放心</h1>
		<h2>风雨有我在，人民请放心</h2>
		<h3>风雨有我在，人民请放心</h3>
		<h4>风雨有我在，人民请放心</h4>
		<h5>风雨有我在，人民请放心</h5>
		<h6>风雨有我在，人民请放心</h6>
	</body>
</html>

- - 2.列表标签

有序列表：
	<ul>
		<li> </li>
		<li> </li>
	</ul>
无序列表：
	<ol>
		<li> </li>
		<li> </li>
	</ol>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.列表标签：ul(unorderlist)+li 无序列表-->
		<ul>
			<li>啦啦啦啦啦</li>
			<li>啦啦啦啦啦</li>
		</ul>
		
		<!-- 3.列表标签：ol(orderlist)+li 有序列表-->
		<ol>
			<li>啦啦啦啦啦</li>
			<li>啦啦啦啦啦</li>
		</ol>
	</body>
</html>

- - 3.图片标签

<img src="#"  width=""  height=""/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 4.图片标签img：通过src属性指定图片的位置
			width:修饰了图片的宽度  height:修饰了图片的高度(单位是像素)
		 -->
		<img src="a.jpg" width="300px" height="350px"/>
		<img src="a.jpg" width="300px" height="350px"/><br>
	</body>
</html>

- - 4.超链接标签

<a href="#" target="_blank">名称</a>
href:指定跳转到哪个网址  
target:是以什么方式打开(默认是_self当前窗口打开)，_blank是在新窗口打开	

锚点：
	<a name="top">我是顶部</a>
	...
	<a href="#top">点我，回到顶部</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 5.超链接标签a
			href:指定跳转到哪个网址  
			target:是以什么方式打开(默认是_self当前窗口打开)，_blank是在新窗口打开			
		 -->
		<a href="https://www.baidu.com/" target="_blank">百度一下</a><br>
		<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>
		<h2>广东富婆通讯录</h2>
		<!-- 锚定:回到一个固定位置 -->
		<a href="#top">点我，回到顶部</a>
	</body>
</html>

- 6.input(输入框)标签

<input type="text" name="text"/> -- 普通文本框
<input type="password" name="pwd"/> -- 密码框
<input type="radio" name="sex"/> 男 -- 单选框
<input type="number" name="num"/> -- 数字值
<input type="week" name="week"/> -- 周
<input type="date"  name="date"/> -- 日期
<input type="datetime" name="datetime"/>
<input type="checkbox" name="like"/>杨幂 -- 复选框
<input type="button"  value="点我一下"/> -- 普通按钮
<input type="submit"  value="提交数据"/> -- 提交按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 6.input标签(输入框) -->
		<input type="text"/>
		<br>
		<input type="password" />
		<br>
		<input type="number" />
		<br>
		<input type="week" />
		<input type="date" />
		<input type="datetime" />
		<br>
		<input type="email" />
		<br>
		<input type="radio" /> 男
		<br>
		<input type="checkbox" /> 杨幂
		<br>
		<input type="button" value="点我一下"/>
	</body>
</html>

- 7.表格标签

tr表示表格中的行元素   td表示表格中的列元素
th 元素内部的文本通常会呈现为居中的粗体文本
td 元素内的文本通常是左对齐的普通文本
colspan用来合并列
rowspan用来合并行
width / height 宽度/高度  border边框  bgcolor是背景颜色  cellspacing单元格间距

<table width="300px" height="100px" border="3px" bgcolor="pink" cellspacing="0px"> -- 表格
	<tr> -- 行
		<th> </th> -- <th>与<td>的区别:<th>默认加粗且居中,<td>左对齐
		<td> </td> -- 列
	</tr>
</table>

练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格练习</title>
	</head>
	<body>
		<!-- 向网页中插入表格 
			tr表示表格中的行元素 td表示表格中的列元素
			th标签比td标签多了加粗和居中的效果
			colspan用来合并列
			rowspan用来合并行
			width / height 宽度/高度  border边框  bgcolor是背景颜色  cellspacing单元格间距
		-->
		<table width="300px" height="100px" 
				border="3px" bgcolor="pink" cellspacing="0px">
			<tr>
				<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
				<!-- <td>12</td> -->
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<!-- <td>33</td> -->
			</tr>
		</table>
		<!-- 练习表格:
			th标签比td标签多了加粗且居中的效果 
			colspan用来合并列
			rowspan用来合并行
		-->
		<table width="400px" height="150px" border="1px">
			<tr>
				<th>总页面的流量</th>
				<th>共计来访</th>
				<th>会员</th>
				<th>游客</th>
			</tr>
			<tr>
				<td>5851567845</td>
				<td>6444564</td>
				<td>7484564567</td>
				<td>4854834848</td>
			</tr>
			<tr>
				<td>14564531459</td>
				<td>10488545</td>
				<td>1456453</td>
				<td>1453145842</td>
			</tr>
			<tr>
				<td>14564531459</td>
				<td>10488545</td>
				<td>1456453</td>
				<td>1453145842</td>
			</tr>
			<tr>
				<td>平均每人浏览</td>
				<td colspan="3">1.55</td>
			</tr>
		</table>	
	</body>
</html>

- 8.表单标签

面试题：get和post提交数据的区别？
get方式：是默认的提交方式，但是不安全(数据都展示在地址栏中)，长度受限
post方式：安全，数据不在地址值中栏展示了，看不见，提高安全性

表单本质就是一个表格，表单 比表格 多了 数据提交的 功能
form可以提交数据，而且数据默认采用了get方式，就在地址值栏中展示
		如:http://127.0.0.1:8848/cgb2106/test05.html?name=&age=&sex=1&like=1&edu=1&date=2021-08-03
	get方式提交数据不好：长度受限，不安全
	可以改成post方式提交数据，而且可以指定，交给哪段程序处理数据(action="#")
		http://127.0.0.1:8848/cgb2106/test05.html#			

<form method=“post” action="#">
	<table> -- 表格
		<tr> -- 行
			<th> </th> -- <th>与<td>的区别是:<th>默认加粗且居中
			<td> </td> -- 列
		</tr>
	</table>
</form>

数据无法提交的问题
步骤:

把提交的按钮必须改成submit类型
给能获取到值的标签添加name属性
当提交数据时,会把用户输入的信息提交给服务器
http://127.0.0.1:8848/cgb2106/test03.html?user=admin
http://127.0.0.1:8848/cgb2106/test03.html?user=admin&pwd=123
改造网页文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试表单标签</title>
	</head>
	<body>
		<!-- 创建表单
			下拉框:select(下拉) + option(选项)
			文件上传:<input type="file">
			文本域:<textarea></textarea>
		 -->
		 <h1>表单注册</h1>
		<form method="post" action="#">
			<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="name"/>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" name="email"/>
					</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="1"/> 篮球
						<input type="checkbox" name="like" value="2"/> 足球
						<input type="checkbox" name="like" value="3"/> 乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<select name="city">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="path"/>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="text">
						<img src="c.png" width="85px" height="35px"/>
						<input type="button" value="点击换一张"/>
					</td>
				</tr>
				<tr>
					<td height="100px">自我描述:</td>
					<td>
						<textarea name="text">描述信息...</textarea>
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<input type="submit" value="提交"/>
						<input type="button" value="重置"/>
					</td>			
				</tr>
			</table>
		</form>
	</body>
</html>

- 9.其他区标签

<div> </div> -- 会自动换行
<p> </p> -- 会自动换行，但是间距大一点(段落标签)
<span> </span> -- 不换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		
		<p>我是p</p>
		<p>我是p</p>
		<p>我是p</p>
		
		<span>我是span</span>
		<span>我是span</span>
		<span>我是span</span>
	</body>
</html>

- 10.H5播放音频、视频

--加载mp3音频
	--controls是使用控件，source是文件位置 
<audio controls="controls">
	<source src="#"> </source>
</audio>

--加载mp4视频
<video controls="controls">
	<source src="#"> </source>
</video>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 加载mp3音频
			controls是使用控件
			source是文件位置
			loop是循环播放
			注意:浏览器默认规定视频音频不会自动播放，因为自动播放会占用流量
		-->
		<audio controls="controls" loop="loop">
			<source src="jay.mp3"></source>
		</audio>
		
		<!-- 加载mp4 视频
			controls是使用控件
			source是文件位置
			loop是循环播放
			注意:不能按网站方式访问,无法打开视频,直接按本地文件打开方式可以正常播放
		-->
		<video controls="controls" loop="loop">
			<source src="yibo.mp4"></source>
		</video>
	</body>
</html>

二、CSS

- 1.css技术

- - 1.概述

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
语法：元素的选择器{ 属性名:属性值; 属性名:属性值; ... }

- - 2.css的用法

行内CSS（在标签上使用css代码）
内部CSS（使用style标签，在head里写css代码）
外部CSS（把html代码和css代码分离）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试css</title>
		<!-- 写法3:外部css -->
		<link rel="stylesheet"  href="#"/>
		<!-- 写法2:内部css -->
		<style>
			//语法:元素的选择器{ 属性名:属性值; }
			div{
				font-size:30px;/*修饰div的字号*/
				background-color: red;/*修饰div的背景颜色*/
			}
		</style>
	</head>
	<body>
		<!-- 写法1:行内css 修饰div的背景颜色，优先级最高-->
		<!-- 语法:style="属性名:属性值;" -->
		<div style="background-color: pink;">我是div1</div>
		<div style="background-color: pink;">我是div2</div>
	</body>
</html>

- 2.选择器

辅助你选中网页中的元素

常见的:

标签名选择器:根据标签名字选中网页中的所有元素
class选择器:给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。
id选择器:id属性的值在整个HTML中作为唯一标识的存在。可以通过ID值选中指定的元素（#id值）
分组选择器:将多个选择器选中的元素组合在一起，统一设置样式
属性选择器:根据属性条件选中符合条件的元素来设置样式（逗号隔开）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试css的选择器</title>
		<!-- 内部css -->
		<style>
			/* 1.标签名选择器:选中网页中标签名是div的元素 */
			div{
				background-color: aqua;/* 给div加背景色 */
			}			
			span{
				font-size: 30px;/* 给spqn加大字号 */
			}
			/* 2.class选择器:给指定元素加class属性,通过.获取class的值 */
			.a{
				color:red;/* 给第一个span元素，改变字的颜色 */
			}
			/* 3.id选择器:给指定的元素加id属性，通过#获取id的值，值不要相同 */
			#b{
				font-family: "楷体";/* 给第一个div修改字体 */
			}
			/* 4.分组选择器:把多个选择器的结果组成一组，统一设置样式 */
			#b,.a{
				border: 2px solid antiquewhite;/* 指定边框 宽度、实线、边框颜色*/
				border-radius: 5px;/* 圆角边框 */
			}
			/* 5.属性选择器:按照指定属性选中元素 */
			input[type="text"]{
				text-shadow: 5px 5px 5px darkgreen;/* 加阴影 */
				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>

- 3.盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

- - 1.外边距(margin)

<input type="radio" style="margin: 20px;"/> 男
<input type="radio" style="margin-left: 40px;"/> 男
<input type="radio" style="margin-right: 40px;"/> 男
<input type="radio" style="margin-top: 40px;"/> 男
<input type="radio" style="margin-bottom: 40px;"/> 男

- - 2.边框(border)

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}

- - 3.内边距(padding)

<input type="text" placeholder="用户名1" style="padding:30px;"/>
<input type="text" placeholder="用户名2" style="padding-top:30px;"/>
<input type="text" placeholder="用户名3" style="padding-left:30px;"/>
<input type="text" placeholder="用户名4" style="padding-right:30px;"/>
<input type="text" placeholder="用户名5" style="padding-bottom:30px"/>

- 4.元素类型的补充

- - 1.块级元素(代表性的就是div)

块级元素
块状元素特征：

能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下

默认情况下，块级元素独占一行（div , p，h1~h6）

可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容量决定

外边距、边框、内边距都可以设置

块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

- - 2.行内元素(最常使用的就是span)

行内元素特征：

设置宽高无效
对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
不会自动进行换行

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有和这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

- - 3.行内块状元素

行内块状元素

行内块状元素特征：

不自动换行
能够识别宽高
默认排列方式为从左到右

既具备行内元素的特征，还具备块级元素的特征

三、JavaScript

- 1.静态网页和动态网页

- - 1.动态网页

静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。

我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。
有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。

- - 2.网页是如何和后端交互的呢？

网页和后端互动

用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，
请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，
controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。
操作完数据库，返回结果，mybatis封装成java对象传回service，
service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，
浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。

- 2.JS概述

- - 1.什么是js

JavaScript 是 web 前端开发者必学的三种语言之一：

HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
JavaScript 实现网站的交互 ES6

JavaScript在1995年由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。
Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系
java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。

名词解释：

基于对象：它不仅可以创建对象，也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

- - 2.特点和优势

特点：

JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为.class文件再运行）.
JS是一门弱类型的语言,没有严格的数据类型.

优势：

增强了用户的交互性
一定的安全性(JS被强制的要求,不能访问浏览器以外的东西，只能访问浏览器和浏览器内部的资源)
跨平台性(Java语言具有跨平台性，是因为有虚拟机)
只要有浏览器的地方都能执行JS

- 3.HTML中引入JS

行内js（在标签上使用js代码）
内部js（使用script标签，在head里写js代码）
外部js（把html代码和js代码分离）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的语法</title>
		<!-- 写法3.外部js -->
		<script src="#"></script>
		<!-- 写法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>

- 4.JS语法

- - 1.注释

单行注释： //注释内容

多行注释： /* 注释内容 */

- - 2.基本数据类型

包括:number/string/boolean/null/undefined

数值类型 - number
在JS中，数值类型只有一种，就是浮点型。
在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。
字符串类型 - string
在JS中，字符串是基本数据类型。
在JS中，字符串直接量是通过单引号或者双引号引起来。
布尔类型 - boolean
值为true或者是false；
undefined
值只有一个就是undefined。表示变量没有初始化值。
null
值也只有一个，就是null。表示空值或者不存在的对象。

- - 3.变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型
如java的变量类型是编译期就确定的；
而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型

(1) 在JS中是通过 var 关键字来声明变量

var a=1; alert(a);

var x=true; alert(x);

var y=10.8; alert(y);

(2) 在JS中声明的变量是不区分类型的，可以指向任意的数据类型。

var a = 1;
a=true;
a=100;
alert(a);//100

function x(){
	var m = 10;
	alert("局部变量:"+m);
	alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错

- - 4.运算符

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: !=，=，!==，>，>=，<，<=
位运算符: & ，|
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
typeof运算符: 用于返回变量或者表达式 的数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的语法</title>
		<!-- 1.内部js -->
		<script>
			//JS是弱类型的语言，也有几种：number、string、boolean、null、undefined
			var a = 10;
			a = 1.9+2.6;//4.5
			a = 1.9+2.1;//4
			a = "hello js";
			a = 'hello js';
			a = true;
			a = null;
			alert("a的值:"+a);
			var b = '123'+'456';
			alert("b的值:"+b);
			
			var c;alert(c);//只定义而不赋值的变量，会提示得到undefined（常用作报错信息）
			
			//JS的运算符  ++ -- * / %
			var i = 24;
			var j = 23;
			alert(++i);
			alert(--i);
			alert(i*j);
			alert(i/j);
			alert(i%j);
			
			var e = 1;
			var f = "1";
			alert(e == f);//true,数据的值
			alert(e === f);//false,数据的值+类型
			
			// 三元运算符：比较两个数的最大值
			var m = prompt("请输入数字:");//从浏览器输入的值
			var n = prompt("请输入数字:");
			alert(m > n ? 1 : 0);
			
			//typeof:获取数据的类型
			alert(typeof 100);//number
			alert(typeof "100");//string		
		</script>
	</head>
	<body>
	</body>
</html>

- 5.JS语句

JS中的语句和Java中的语句用法大致相同

1.if…else语句
2.switch…case语句
3.for、while循环语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS语句</title>
		<!-- HTML中引入JS代码 -->
		<script>
			//1.if...else
			var a = prompt("请输入名字:");
			if(a == "wyf"){
				alert("大碗牢饭");//弹出
				//console.log("大碗牢饭");//打印	
			}else{
				alert("大碗宽面");
				//console.log("大碗宽面");	
			}
			//练习:接收用户输入的成绩，判断成绩所属的等级
			//80~100(包括80，也包括100)		优秀 
			//60~80(包括60，但不包括80)		中等
			//0~60(包括0，但不包括60)		不及格
			//其他值						输入有误
			var b = prompt("请输入成绩:");
			if(b >= 80 && b <= 100){
				alert("优秀!");
			}else if(b >= 60 && b < 80){
				alert("中等!");
			}else if(b < 60 && b >= 0){
				alert("不及格!")
			}else{
				alert("输入有误！")
			}

			// 2.for循环(没有增强for循环)
			for(var i=1;i<=10;i++){
				console.log(i);//在浏览器中按F12打开控制台查看
			}
			//练习:计算1~100里4的倍数的和
			var sum = 0;
			for(var i=1;i<=100;i++){
				if(i % 4 == 0){
					sum += i;
				}
			}
			console.log("总和是"+sum);//在浏览器中按F12打开控制台查看
			
			//3.while循环
			//练习:如果给你一个亿，每天花一半，能花几天
			var d = 0;//记录天数
			var q = 100000000;//记录钱数
			// while(q > 1){
			// 	q = q / 2;//每天花一半
			// 	d++;//天数++
			// }
			// console.log("总共花的天数:"+d);
					
			while(true){
				q = q / 2;//每天花一半
				d++;//天数++
				if(q <= 1)
				break;
			}
			console.log("总共花的天数:"+d);
		</script>
	</head>
	<body>
	</body>
</html>

注意：JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。

- 6.JS数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

注意：

JS数组中可以存放任意的数据类型
JS中的数组长度可以被改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS数组</title>
		<script>
			//1.定义数组
			var arr1 = new Array();//声明一个空数组
			/* js是弱类型的语言，对数据的类型要求并不高。可以存各种类型的数据，在java中要用Object[]数组 */
			var arr2 = new Array(1,true,1.2,"tom");//声明一个具有初始值的数组
			var arr3 = [];//声明一个空数组
			/* js里的数组，长度可以随时改变 */
			var arr4 = [1,true,1.2,"tom"]//声明一个具有初始值的数组
			console.log(arr4);//4
			alert(arr4.length);//length属性 -- 获取数组的长度，还可以改变数组的长度
			console.log(arr4[1]);//true
			
			//2.for循环遍历数组
			for(var i=0;i<=arr4.length-1;i++){
				console.log(arr4[i]+"的下标是"+i);
			}
			
			//3,for ... in
			for(var i in arr4){//i是下标
				console.log(arr4[i]+"的下标是"+i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

- 7.JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

方式一：通过function关键字声明函数
声明：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);

方式二：通过函数直接量声明函数
声明：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS函数</title>
		<script>
			/*语法:function 函数名(参数列表){ 函数体 }*/			
		//方式一:函数可以先调用，再定义
			//1.定义函数
			function f1(){//空参
				console.log("靓仔! 你好!");
			}
			function f2(x,y){//含参,参数不需要变量类型
				console.log(x+y);
			}
			function f3(x,y){//有返回值的函数
				return x+y;//通过return返回结果
			}
			//2.调用函数
			f1();//靓仔! 你好!
			f2();//NAN
			f2("靓仔!");//靓仔!undefined
			f2(1,1.1);//2.1
			console.log("函数的返回值为:"+f3("靓仔","靓女!"));//函数的返回值为:靓仔靓女!
			
			/*语法:var 函数名 function(参数列表){ 函数体 }*/
		//方式二:函数不可以先调用，再定义
			//1.定义函数
			var f11 = function(){//空参
				console.log("靓女! 你好!")
			}
			var f22 = function(x,y){//含参,参数不需要变量类型
				console.log(x*y);
			}
			var f33 = function(x,y){//有返回值的函数
				return x+y;//通过return返回结果
			}
			//2.调用函数
			f11();//靓女! 你好!
			f22("靓仔","靓女!");//NaN
			f22(2,3);//6
			console.log("函数的返回值为:"+f33("靓仔","靓女!"));//函数的返回值为:靓仔靓女!
		</script>
	</head>
	<body>
	</body>
</html>

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。
但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

- 8.JS对象

利用function关键字声明对象，用new关键字创建对象。

js对象格式:{Key:Value,Key:Value...}

- - 1.内置对象

Window对象 - - 代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代
Document对象 - - 代表整个HTML文档，可用来访问页面中的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Js对象</title>		
		<script>
			/* 1. <!-- Window对象 --> */
			// 在浏览器加载完整个html后，才会立即执行!
			window.onload = function(){
				console.log(typeof 100);//number
			}
			
			window.alert("靓仔!");// 提示信息会话框			
			window.confirm("你是靓仔吗?");// 确认会话框
			var a = prompt("请输入数字");// 键盘输入会话框
			console.log(typeof a);//string
			// string类型的数字转成为number类型的数字
			var b = parseInt(a);
			console.log(typeof b);//number
			
			window.document //返回文档对象，代表整个网页,可用来访问页面中的所有元素
			window.document.write("hello js");//动态向页面写入内容
			window.document.getElementById(id);//获得指定id值的元素
			window.document.getElementsByTagName();
			window.document.getElementsByClassName();
		</script>
	</head>
	<body>
	</body>
</html>

学会简单使用，后期被jQuery封装，再后期被Vue框架封装

- - 2.自定义对象(重点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Js对象</title>		
		<script>
			/* 2. <!-- 自定义对象 --> */
			
		// 自定义对象方式一:
			// 声明对象
			function Car(){}
			// 创建对象
			var c = new Car();
			// 动态绑定函数或者属性
			c.color='red';
			c.price=9.9;
			// 绑定动态的函数
			c.back = function(){
				console.log("汽车"+"颜色"+c.color+",价格"+c.price+",正在后退中...");
			}
			console.log(c);//Car {color: "red", price: 9.9, back: ƒ}
			console.log(c.color);//red
			console.log(c.price);//9.9
			c.back();//汽车颜色red,价格9.9,正在后退中...
			
		// 自定义对象方式二:	
			var Student = {
				// 动态绑定属性，逗号隔开多个属性
				name : "jary",
				age : 12,
				// 动态绑定函数
				play : function(){
					// this用来调用这个对象的资源
					console.log(this.name+"今年"+this.age+"岁,"+"正在玩!")
				}
			}
			console.log(Student);//{name: "jary", age: 12, play: ƒ}
			console.log(Student.name);//jary
			console.log(Student.age);//12
			Student.play();//jary今年12岁,正在玩!
		</script>
	</head>
	<body>
	</body>
</html>

- 9 .DOM树的作用

- - 1.概述

本质就是把网页文件看作一个Document文档对象，提供了一套API，可以操作网页中的所有元素

- - 2.组成

ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口

核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。
DOM非常重要，实际开发更多通过js操作DOM对象实现对html页面的操作，BOM也用，比较少用。所以学习重点放在DOM上。

- - 3.DOM树结构

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API
通过这套API可以很方便的对html元素进行访问及增删改查操作。

DOM树结构

- - 4.Document对象

提供方法:

getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write() -- 向文档写 HTML 表达式或 JavaScript 代码
title -- 返回网页的标题
id -- 设置或返回元素的id

提供属性:

innerHTML - - 设置或返回元素的内容

<!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 = "对不起span,我变了!";//设置元素的内容
				
				// 2.通过calss的值,获取元素
				var y = document.getElementsByClassName("b");
				console.log(y);//得到数组
				console.log(y[1].innerHTML);//根据下标获取元素里的内容
				y[2].innerHTML = "对不起p3,我变了!";
				
				// 3.通过name的值,获取元素
				var z = document.getElementsByName("c");
				console.log(z);//得到数组
				
				// 4.通过标签名,获取元素
				var g = document.getElementsByTagName("p");
				console.log(g);//得到数组
			}
		</script>
	</head>
	<body>
		<div onclick="fun()">单击点我</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</a>
		<a name="c">我是a2</a>
	</body>
</html>

总结:
获取页面元素的4种方式:

getElementsByTagName() 标签名称，得到数组
getElementsByName() name属性，得到数组
getElementsByClassName() class属性，得到数组
getElementById() id属性，单个值

注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

- 10.JSON(JavaScript Object Notation，JS 对象简谱)

- - 1.概念

本质就是一个字符串,用来规定了服务器和浏览器之间数据交互的格式.
JSON是一个轻量级的数据交换格式.
格式: {“name”:“jack”,“age”:“18”}

ajax往往要完整应用还会配合一个技术：JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是一种轻量级的数据交换格式。它是基于 ECMAScript (js规范)的一个子集。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。

- - 2.作用

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 是存储和交换文本信息的语法。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

- - 3.语法

JSON字符串:

var a = '"name":"皮皮虾"';

JSON对象:

var b = '{"name":"皮皮虾","age":"24"}';//JSON字符串，用来交互数据的格式
var b2 = {name:"皮皮虾",age:"24"};//JS对象，封装了属性、函数

JSON数组:

var c = '[{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]';

- - 4.转换工具

使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转.

给服务器发送数据: 将JS对象 --> JSON字符串 JSON.stringify(Js对象)
接受服务器的数据: JSON字符串 --> JS对象 JSON.parse("json字符串")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json字符串</title>
		<script>
			// 1.定义json字符串
			var a = '"name":"皮皮虾"'; 
			console.log(a);// "name":"皮皮虾"
			console.log(a.length);// 12,获取字符串长度(双引号和冒号都要算)
			console.log(a.concat(123));// "name":"皮皮虾"123,拼接字符串
			console.log(a.substr(3));// me":"皮皮虾",按照下标截取字符串
			 
			// 2.定义json对象
			var b = '{"name":"皮皮虾","age":"24"}';//JSON字符串，用来交互数据的格式
			var b2 = {name:"皮皮虾",age:"24"};//JS对象，封装了属性函数
			console.log(b);// {"name":"皮皮虾","age":"24"}
			console.log(b.length);// 25,获取字符串长度
			console.log(b.concat(123));// {"name":"皮皮虾","age":"24"}123,拼接字符串
			
			// 3.定义json数组
			var c = '[{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]';
			console.log(c);// [{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]
			console.log(c.substr(5));// me":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]
			console.log(c.concat(123));// [{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]123
			
			// 4.把JSON字符串和JS对象进行互转 -- JSON工具
			var d = '[{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]';
			// 4.1 json字符串 --> js对象:::为了调用属性、函数方便
			var jsobj = JSON.parse(d);
			console.log(jsobj);// [{name:"皮皮虾",age:"24"},{name:"泡老师",age:"23"}]
			console.log(jsobj[0].name);// 皮皮虾,获取对象身上的属性值
			console.log(jsobj[1].age);// 23,获取对象身上的属性值
			// 4.2 js对象 --> json字符串:::为了对字符串进行操作，给服务器发送数据
			var json2 = JSON.stringify(jsobj);
			console.log(json2);// [{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]
			console.log(json2.concat(123));// [{"name":"皮皮虾","age":"24"},{"name":"泡老师","age":"23"}]123
		</script>
	</head>
	<body>
	</body>
</html>

**js/json 数组和对象测试

JSON在线解析及格式化验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js/json 数组和对象 测试</title>
		<script>
			// js数组
			var arr = [1,null,"皮皮虾",1.1,true,undefined];
			var arr2 = [{name:"泡老师",age:23},{name:"皮皮虾",age:24}];
			console.log(arr);// [1, null, "皮皮虾", 1.1, true, undefined]
			console.log(arr2);//  [{…}, {…}]
			console.log(arr[2]);// 皮皮虾
			console.log(arr2[0].name)// 泡老师
			console.log(arr.length);// 6
			console.log(arr.concat("拼接"));// [1, null, "皮皮虾", 1.1, true, undefined, "拼接"]
			
			// js对象  格式：(key:value,key:value...)
			var a = {name:"泡老师",age:23};
			console.log(a);// {name:"泡老师",age:23}
			console.log(a.name);// 泡老师
			
			// json数组
			var arr1 = '[{"name":"泡老师",age:23},{"name":"皮皮虾",age:24}]';
			console.log(arr1);// [{"name":"泡老师",age:23},{"name":"皮皮虾",age:24}]
			console.log(arr1[10]);// 泡
			console.log(arr1.length);// 45
			console.log(arr1.substr(10,3));// 泡老师
			console.log(arr1.concat("+啦啦啦"));// [{"name":"泡老师",age:23},{"name":"皮皮虾",age:24}]+啦啦啦
			
			// json对象
			var b = '{"name":"泡老师","age":23}';
			console.log(b);// {"name":"泡老师","age":23}
			console.log(b.length);// 23
			console.log(b.substr(9,3));// 泡老师
			console.log(b.concat("+拼接"));// {"name":"泡老师","age":23}+拼接
			
			//json字符串 --> js对象
			var jsobj = JSON.parse(b);
			console.log(jsobj);// {name: "泡老师", age: 23}
			//js对象 --> json字符串
			var jsonobj = JSON.stringify(jsobj);
			console.log(jsonobj);// {"name":"泡老师","age":23}
		</script>
	</head>
	<body>
	</body>
</html>

四、Vue

官网

https://cn.vuejs.org/ #官网

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本

- 1.概述

Vue是一个渐进式的前端框架. 渐进式是指按需配置	
Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架

- - 1.特点:

一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
原生html页面是通过js 操作的是dom，而vue.js操作的是数据。
和传统前端开发的关注点完全不同，传统方式关注的都是像document的
结构的api，而vue关注的是数据。
优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。

- - 2.渐进式框架

Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。
与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。

可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

- - 3.入门案例

<!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~"// js对象
			};
			// 3.2 把数据渲染到挂载点
			var com = {
				// el属性是用来描述元素(挂载点), data属性是具体要展示的数据
				el : "#app",// 通过css提供的id选择器, 选中了id=app的元素, 挂载点
				data : a//  数据驱动, 把a的数据渲染加载到挂载点
			}
			// 3.3准备Vue对象
			new Vue(com);
		</script>
	</body>
</html>

总结：
vue的入门案例
改造后的代码:

<!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属性是用来描述元素(挂载点)
				el : "#app",// 通过css提供的id选择器, 选中了id=app的元素, 挂载点
				// data属性是具体要展示的元素
				data : {// 数据驱动, 把a的数据渲染加载到挂载点
					msg : "Hello Vue~"
				}
			});
		</script>
	</body>
</html>

总结：
改造后vue的入门案例

- - 4.MVVM框架

MVVM
M(Model)V(View)VM
Model -- > 数据
View --> 展现
ViewModel -- > 连接View与Model

Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，
如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。
我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。
这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

- 2.基础语法

- - 1.运算符 operator

<!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:{{a}} b:{{b}} str:{{str}}<br>
			加法:{{a+b}}
			减法:{{a-b}}
			乘法:{{a*b}}
			除法:{{a/b}}
			取余:{{a%b}}
			自增:{{a++}}
			自减:{{b--}}
			三元运算:{{a > b ? "1" : "0"}}<br>
			字符串的操作:
				拼接 -- {{str.concat(123)}}
				长度 -- {{str.length}}  
				截取 -- {{str.substr(3)}}
				替换 -- {{str.replace("了","啦")}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				// 3.1 通过css提供的id选择器,找到挂载点
				el : "#app",// 挂载点:数据的渲染区
				// 3.2 即将要展示的数据
				data : {
					a : 100,
					b : 20,
					str : "今天要下雨了!"
				}
			});
		</script>
	</body>
</html>

- - 2.方法 methods

先在methods定义函数，然后使用插值表达式调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue数据的写法</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 准备数据渲染区 -->
		<div id="app">
			{{name}} {{age}} {{Person}}<br>
			调用vue的函数:{{show()}} {{add(1,2)}}
		</div>
		<!-- 创建Vue对象,添加自定义函数 -->
		<script>
			new Vue({
				el : "#app",// 挂载点
				data : {// 要被渲染的数据
					// 数据
					name : "泡老师",
					age : "24",
					// 自定义对象
					Person : {
						name : "皮皮虾",
						age : 23,
						salary : 32000
					}
				},
				methods : {// 自定义的函数,必须在methods里,创建Vue函数
				// 函数名 : 定义函数的语法
					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}}  
				调用函数: {{a.show()}}   
			解析数组里的数据(利用下标): {{c[1].fristname}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el : "#app", //挂载点
				data:{  //数据区
				  //对象名 : 对象信息
					a : { //自定义对象
						name:"jack",
						age:20,
						show:function(){
							alert(100)
						}
					},
					c : [//数组::::[ { k:v , k:v} ,{ k:v , k:v } ]
						{
							fristname : "jack",
							lastname : 123
						},
						{
							fristname : "rose",
							lastname : 456
						}
					]
				}
			});
		</script>
	</body>
</html>

- - 4.三种data值的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue中data的3种写法</title>
		<!-- 引入js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 准备数据渲染区 -->
		<div id="app">
			{{msg}}
		</div>
		<!-- 创建Vue对象 -->
		<script>
			new Vue({
				el : "#app",
			// 第一种方式:
				// data : {
				// 	msg : "hello vue~"
				// },				
			// 第二种方式:定义函数,返回对象
				// data : function(){
				// 	return{
				// 		msg : "hello vue~"
				// 	}
				// },
			// 第三种方式:上面的简写
				data(){//新语法
					return{
						msg : "hello vue~"
					}
				}
			});
		</script>
	</body>
</html>

- 3.高级用法：v-命令

vue指令

- - 1.指令集

指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

常见的Vue指令:v-if、v-for、v-on、v-bind、v-model、v-cloak等

- - 2.双向绑定 v-model

改了view影响model，改了model影响view

通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。
MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的；
因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。

- - 3.闪现 v-cloak

F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，观察问题。

遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？

在标签中增加指令：v-cloak
增加style标签，[v-cloak]属性选择器，设置先不展示display:none;

实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题

- - 4.判断 v-if

v-if指令将根据表达式 seen 的值( true 或 false )来决定接下来的操作

- - 5.事件 v-on

@click为v-on:click的缩写

- - 6.绑定 v-bind

当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理

全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue的指令</title>
		<script src="vue.js"></script>
		<style>
			/* 选择器{属性名:属性值} */
			[v-cloak]{//不展示闪现的效果
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 2.闪现的问题:在浏览器上显示了插值表达式 使用v-cloak属性，使用css隐藏效果 -->
		<div id="app" v-cloak>
			获取到值:{{msg}} {{msg}} {{msg}} {{msg}} 
			<br>
			<!-- 1.v-model双向取值(相当于是设置值) -->
			<input type="text" v-model="msg" />
			<br>			
			<!-- 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<18&&age>0">未成年</span>
			<span v-else-if="age>=18&&age<=60">成年人</span>
			<span v-else>老年人</span>
			<br>
			<!-- 4.v-for用来循环的 -->
			获取到值:{{arr}} 
			用下标获取数组中的元素:{{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()">v-on:click 单点我</button>
			<button v-on:dblclick="show()">v-on:dblclick 双击我</button>
			<button @click="show()">简写 单点我</button>
			<button @dblclick="show()">简写 双击我</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 : 24,
					arr : ["杨幂","迪丽热巴","Anglelalbaby"],
					url : "https://www.baidu.com"
				},
				methods : {
					show : function(){
						alert("大幂幂")
					}	
				}
			});
		</script>
	</body>
</html>

小结：

写javaScript时，我们要先去学习其复杂的api（document.getElementById()）
写jQuery时，又学一套复杂的api(一堆的选择器)
而Vue框架结构搭建好，就剩下修改数据和展示数据，而其结构非常简单，一看就会，如调用信息{{message}}

- 4.vue-cli脚手架

- - 1.作用

vue-cli就是Vue的脚手架工具，它帮助我们搭建基本的开发环境
vue-cli是由Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板

- - 2.安装nodejs并验证

安装低版本nodejs&脚手架安装

在这里插入图片描述

安装nodejs，下一步下一步就可以，可以安装最新的15版本，win7的话可以安装14版本。使用以下dos命令提示符下执行：

node -v  # v8.11.3，至少8以上，最新的是v15.11.0

低版本安装链接简介：https://blog.youkuaiyun.com/qq_16804847/article/details/112911057

- - 3.配置npm

Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

- - 4.参数说明

注意单词的大小写

-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global

- - 5.脚手架安装

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架 --- 可能比较慢,要等几分钟

npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必

vue –V #查看版本

where vue #vue安装在哪里

- - 6.报错说明

1).如果报错如下
在这里插入图片描述
方案1) .删除用户目录下的文件,之后重新安装. (删除文件不要删除目录)

方案2): 执行卸载命令 npm uninstall vue-cli -g 之后重新安装

- 5.创建Vue项目的过程 npm

- - 1.工作空间

指定工作空间目录：D:\workspace\vue，最好别放在c盘

- - 2.生成vue项目

基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

vue init webpack jt01 #此处项目名不能使用大写 --- 可能比较慢,要等

创建vue项目
下载成功

注：

jt01 为自定义的项目名称
产生项目webpack模板，目录100+m，可见内容多复杂，庞大
会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生

- - 3.启动项目 & 停止项目

cd jt01 # 进入项目目录

npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟

- - 4.测试访问

注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。出现以下画面就算启动成功！
在这里插入图片描述
测试访问

- 6.HBuilderX管理Vue项目

- - 1.打开Vue项目

HBuilderX是最新前端开发利器之一，全面支持Vue的开发，具有丰富的提示，使用它打开：D:\workspace\vue\jt01目录（可自行定义自己的目录）
在这里插入图片描述

- - 2.项目结构

项目结构

- - 3.目录结构

这个目录结构非常重要，大家要熟记。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

view 就是用户要访问的页面都存放在这个目录下，如Index.vue
static中保存一些静态的资源，如jquery、css、图片等
src 目录是一个很大的目录，包罗万象
components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Car.vue
router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。

- - 4.重要文件说明

Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作:

1.在components里写自定义组件
2.在App.vue里注册自定义组件
3.在main.js里引入第三方js

 index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
 src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中
在这里插入图片描述
 src/App.vue 根组件,可以添加自定义组件

 src/router/index.js 引入子组件HellWorld.vue
在这里插入图片描述

- 7.自定义组件

- - 1.创建Car.vue文件(在src/components里)

<template>
  <h1>
    {{msg}}
  </h1>
</template>

<script>
/* 支持导出的自定义组件 */
export default{
  name : "Car",
  data(){
    return{
      msg:"hello components~~"
    }
  }
}
</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.测试

启动服务器:

- 8.安装 element-ui

- - 1.安装

访问官网:https://element.eleme.cn/#/zh-CN/component/installation,查
看组件指南
在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
安装ElementUI
安装完成其文件保存在项目下的node_modules目录下：
在这里插入图片描述

- - 2.修改 main.js,引入Element

在这里插入图片描述

- - 3.修改 Car.vue

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以使用Element代码了。

- - - 1.基础知识

布局 layout
图标 icon
按钮 button
表格 table
表单 form
输入框 input
...

<template>
  <h1>
    {{msg}}
    <br>
    <!-- 1.图标的效果 -->
    <i class="el-icon-edit"></i>
    <i class="el-icon-phone-outline"></i>
    <i class="el-icon-message-solid"></i>

    <!-- 2.layout栅栏的效果
          el-row:是1行,1行默认是24列
          el-col:是1列
          :span 可以自定义合并的列数
    -->
    <!-- 1行1列 -->
    <el-row>
      <el-col :span="24">啦啦啦</el-col>
    </el-row>
    <!-- 1行2列 -->
    <el-row>
      <el-col :span="12">靓仔!</el-col>
      <el-col :span="12">靓女!</el-col>
    </el-row>
    <!-- 1行3列 -->
    <el-row>
      <el-col :span="8">靓仔!</el-col>
      <el-col :span="8">靓仔!</el-col>
      <el-col :span="8">靓女!</el-col>
    </el-row>

    <!-- 3.el-button按钮的效果
          type 可以修饰按钮的颜色
          icon 按钮也可以加图片
          circle 是一个圆形
    -->
    <el-row>
       <el-button type="primary">主要按钮</el-button>
       <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    </el-row>

    <!-- 4.el-input输入框的效果
          placeholder 是提示信息
          v-model 体现了双向绑定
          show-password 密码输入框
          clearable 可清空框
    -->
    <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表格的效果
          :data 是要获取什么数据
          stripe 创建带斑马纹的表格,它接受一个Boolean,默认为false,设置为true即为启用
          el-table-column 表格里的列
          label 是列名
          prop 是要获取哪个属性的值
          想要给表格准备数据,数据必须放在data里
    -->
    <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>

    <!-- el-link 超链接,href 设置网址,target 设置打开方式,type 就是颜色 -->
    <el-link href="#" type="success" target="_blank">超链接</el-link>
    <!-- el-radio 单选框,v-model 是双向绑定,是指把label的值交给msg去存 -->
    <el-radio v-model="msg" label="1">单选框</el-radio>

    <!-- 6.表单的效果 -->
    <!-- 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 就是颜色,@click 用来绑定事件,点击按钮时会触发函数 -->
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </h1>
  <!-- <i class="el-icon-edit"></i>  报错,只能有一个根元素 -->

</template>

<script>
/* 支持导出的自定义组件 */
export default{
  name : "Car",
  data(){
    return{
      msg:"hello components~~",
      // 给表格准备多个数据
      arr : [
        {
          id : '001',
          pinpai : '蜜雪冰城',
          desc : '你爱我我爱你甜蜜蜜'
        },
        {
          id : '002',
          pinpai : '鸿星尔克',
          desc : 'to be no.1'
        }
      ],
      // 给表单准备数据
      goods : {
        title : '华为Mate50',
        sell : '便宜,5G',
        price : '9.9',
        desc : '麒麟9000'
      }
    }
  },
  methods : {//定义函数
    save(){
      alert('保存成功!');
    }
  }
}
</script>

<style>
</style>