前端技术栈-----WEB-程序员宅基地

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

常用标签

标题标签

列表标签

图片标签

超链接标签

Input标签

表格标签

表单标签

其他标签

注册表单展现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单</title>
	</head>
	<body>
<!-- get方式提交的数据都在地址栏里 http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= -->
		<!-- <form method="get"> -->
		<!-- post提交安全不显示数据 -->
		<form method="post">
			<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
				<th colspan="2">注册表单</th>
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="user"/></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repwd"/></td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td><input type="text" name="nick"/></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" name="mail"/></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
				<!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="2"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
					<!-- name必须配,多选 ,提交的值就是1 2 3 -->
					<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"> <!-- 实现多选,按name提交数据 1 2-->
							<option value="1">北京</option> 
							<option value="2">上海</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="path"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="submit">提交</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

CSS技术

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

选择器

标签名选择器

<style> /* 在HTML中加入css*/
	span{ /* 标签名选择器,选中所有span */
	background-color: chartreuse; /* 背景颜色*/				  font-size: 24px; /*字号*/
		font-family: 黑体;/* 字体 */
	}
</style>

class选择器

<p class="a b">123</p> <!-- b覆盖a-->

<style> /* 在HTML中加入css*/
	 /* 选择class=a的元素 */
	.a{
		background-color: cornflowerblue; /*背景颜色*/
		color:red; /*字体颜色*/
	}
	.b{
		background-color: lightsalmon;
		color: black;
	}
</style>

id选择器

<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
	text-indent: 200px; /* 首行缩进*/
}

分组选择器

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
	background-color: #000000;
}

属性选择器

<style type="text/css">
	/* 选中指定的元素 */
	input[type='text']{
		background-color: #6495ED;
	}
</style>

盒子模型

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY=,size_16,color_FFFFFF,t_70

margin（外边距）

<input type="radio" name="sex" value="1" style="margin: 20px;"/>男

border（边框）

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

padding（内边距）

<td style="padding: 20px;">用户名:</td>

用户注册表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		
		<style>
			/* 语法:选择器{样式1;样式2;样式3;} */
/* 统一网页风格 */
body{
	font-family: "宋体";/* 统一字体 */
	font-size: 15px;/* 统一字号 */
	width: 500px;/* 统一宽度 */
	padding-left: 100px;/* 设置左边距 */
}

/*修饰所有input的样式 */
.a{
	height: 20px;/* 高度 */
	width: 300px;/* 宽度 */
	padding: 15px;/* 调整内容和边框的距离,内边距 */
	font-size:20px ;/* 字号变大 */
	margin: 10px;/* 调整盒子间的距离,外边距 */
}

/* 修饰所有的提示信息 */
.xiao{
	font-size: 8px;/* 字体变小 */
	color: grey;/* 字的颜色 */
	padding-left: 30px;/* 左边距 */
}

/* 修饰同意 */
#note{
	height: 60px;/* 高度 */
	text-indent: 40px;/* 首行缩进 */
	font-size: 12px;/* 字号变大 */
}

/* 修饰立即注册按钮 */
#btn{
	background-color: #E64346;/* 背景色 */
	font-size: 25px;/* 字号变大 */
	color: white;/* 字的颜色 */
	width: 360px;/* 设置宽度 */
	height: 50px;/* 设置高度 */
	border: #E64346;/* 设置边框 */
}
			
		</style>
		
	</head>
	<body>
		<!-- 用户注册的数据需要提交给服务器入库,所以需要form -->
		<form method="get" action="#"> <!-- 指定提交数据的方式-->
			<table>
					<h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
					<tr>
						<td>
							<input type="text" placeholder="用户名" class="a"/>
						</td>
					</tr>
					<tr>
						<td class="xiao">
							支持中文、字母、数字、“-”、“_”的组合，4-20个字符
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="设置密码" class="a" />
						</td>
					</tr>
					<tr>
						<td class="xiao">
							建议使用数字、字母和符号两种以上的组合，6-20个字符
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="确认密码" class="a" />
						</td>
					</tr>
					<tr>
						<td class="xiao">
							两次密码输入不一致
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="验证手机" class="a"/>
							或
							<a href="#"> 验证邮箱</a>
						</td>
					</tr>
					<tr>
						<td id="note">
							<input type="checkbox" />
							我已阅读并同意 
							<a href="#">《京淘用户注册协议》</a>
						</td>
					</tr>
					<tr>
						<td>
							<!-- type类型必须是submit才能提交数据 -->
							<input  id="btn" type="submit" value="立即注册" />
						</td>
					</tr>
			</table>
	</body>
</html>

JavaScript

JS定义

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

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

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

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

特点和优势

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

HTML中引入JS

<head>
	<meta charset="utf-8"/>
	<script>/* JS代码 */
		function fn(){
			alert("JS的第1种引入方式");
		}
	</script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

JS语法

基本数据类型：number string boolean null undefined

复杂数据类型：函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

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

DOM树的作用

ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

DOM树的结构

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY=,size_16,color_FFFFFF,t_70

Document对象

--获取对象: window.document
--调用方法: 
		getElementById("元素的id的属性的值")--返回1个元素
		getElementsByName("元素的name属性的值")--返回多个元素(用数组)
		getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
		getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容

dom.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM解析</title>

		<!-- js -->
		<script>
			function a(){
				/* 按id获取,返回1个 */
				var x = document.getElementById("div1");
				x.innerHTML="<h1>你好div</h1>";
				
				/* 按name属性值获取,返回多个*/
				var y = document.getElementsByName("div2"); 
				console.log(y);//NodeList
				y[0].innerHTML="hello js...";
				
				/* 按class属性值获取,返回多个*/
				var z = document.getElementsByClassName("span1");
				console.log(z);//HTMLCollection
				z[0].innerText="<p>我变了</p>"
				
				/* 按照标签名获取,返回多个 */
				var m = document.getElementsByTagName("div");
				console.log(m);//HTMLCollection
				m[1].style.fontSize=30+"px";
			}
		</script>
	</head>
	<body>
		<div id="div1" onclick="a();">我是div1</div>
		<div name="div2"  onclick="a();">我是div2</div>
		<span class="span1">我是span1</span>
		<span class="span1">我是span2</span>
		<a name="div2" id="a1">我是a</a>

		<!-- js事件: -->
<a href="#" onclick="method();">单击触发js</a>
		<a href="#" ondblclick="method2();">双击触发js</a>
		<a href="#" onmouseenter="method3();">滑过触发js</a>
		<a href="#" onmouseleave="method4();">滑走触发js</a>
<button onkeydown="alert(1);">点我</button>
	</body>
</html>

总结：

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

getElementsByTagName 标签名称，得到数组
getElementsByName name属性，得到数组
getElementsByClassName class属性，得到数组
getElementById id属性，单个值
注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

JSON

概念：

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

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

作用：

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

JSON语法：

JSON数据      var a =' "firstName" : "John" ' 

JSON对象      var a =' "firstName" : "John" ' 

JSON数组      var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

JSON转换：

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

Ajax

什么是Ajax：允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY=,size_16,color_FFFFFF,t_70

Vue

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

什么是Vue：Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

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

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

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">{
   {msg}}</div>
		<script>
			<!-- 3. 创建Vue对象 -->
			
				new Vue({
					el : "#app" ,
					data : {
						msg : "hello vueeee~~~"
					}
				});
		
		</script>

	</body>
</html>

MVVM框架

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

基础语法：

运算符 operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的运算符</title>
		
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p> 加法:{
   {2+3}} </p>
			<p> 减法:{
   {2-3}} </p>
			<p> 乘法:{
   {2*3}} </p>
			<p> 除法:{
   {3/2}} </p>
			<p> 取余:{
   {10%2}} </p>
		 
			<p> 三元表达式: {
   {age>10?'yes':'no'}}</p>
			<p> 字符串操作: </p>
<p> {
   {str}} {
   {str.length}} {
   {str.concat(1000)}} {
   {str.substr(3)}}  </p>
		
		</div>

		<script>
			
				new Vue({
					el:"#app",
					data:{
						str:"hellovue~",
						age:12
					}
				});
		
		</script>

	</body>
</html>

方法 methods

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue数据的写法</title>
	
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- vue的事件,使用v-on调用指定函数 -->
			按钮1:<button onclick="alert(100)">点我</button>
			按钮2:<button v-on:click="show()">点我</button>
			<h2>  vue调用无参函数：{
   { show() }}  </h2>
			<h3>  vue调用含参函数：{
   { sysout(100) }}  </h3>	
		</div>
		<script>
		
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"张三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					},
					methods: { /* 必须在methods里,创建Vue函数 */
						show:function(){ 
							console.log('hello vue');
						},
						sysout: function(color){
							console.log(color);
						}
					}
				});
		
		</script>

	</body>
</html>

注意：

方法必须写在methods代码段中
方法体中访问数据代码段中声明的变量，前面加this
方法和属性声明方式的差异在于 function(){}
方法和属性调用的差异是 { {msg}} { {sayHello()}}，名称后加小括号

三种data值的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">{
   {msg}}</div>
		<script>
		
				new Vue({
					el : "#app" ,
					// 数据的三种写法:标准写法
					// 第一种形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二种形式:定义函数,返回对象
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三种形式:定义函数,es6的简写法
					data(){
						return {
							msg:"vue hi~"
						}
					}
				});
	
		</script>
	</body>
</html>

Vue高级用法

V-指令：v-if v-for v-on v-bind v-model v-cloak等

双向绑定 V-model：

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY=,size_16,color_FFFFFF,t_70

闪现：

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
		…
		</div>
	</body>
</html>

判断 V-if

v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的

v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue数据的写法</title>
	
		<script src="vue.js"></script>
	
	</head>
	<body>
		<div id="app">
	
<!-- 用来判断,类似于java的if else if else,判断成立就显示不成立就不显示 -->
			<p v-if="person.age>=18">成年人</p>
			<p v-if="person.age<18">未成年人</p>
			
			<p v-if="person.salary>=2000">金领</p>
			<p v-else-if="person.salary>=1000">白领</p>
			<p v-else>屌丝</p>
				
		<!-- 和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已 -->
			<p v-show="person.age>=20">成年人</p>
		</div>
		
		<script>
	
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"张三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"http://act.codeboy.com/"
					}
				});

		</script>

	</body>
</html>

循环 V-for

v-for 指令可以绑定数组的数据来渲染一个项目列表

事件 v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{
   {count}}</p>
			<button @click="count++">点我</button>
			
			<button onclick="show()">javascript 点我</button>
			<button v-on:click="show()">v-on:click 点我</button>
			<button @click="show()">简写的事件,点我</button>
		</div>
	</body>
	<script>
		function show(){
			alert("old show");
		}
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue",
				count:1
			},
			methods:{
				show : function(){
					console.log(this.msg)
				}
			}
		})
	</script>
</html>

绑定 v-bind

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

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

Vue组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.先引入vue -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<starter></starter>
			<foot></foot>
		</div>
		<script>
			//全局组件
			Vue.component('foot',{
				template:'<ol><li>你好</li><li>你好</li><li>你好</li></ol>'
			})
			new Vue({
				el:'#app',
				//局部组件
				components:{
					starter:{//组件名
						template:'<h1>哈哈</h1>'
					}
				}
			})
		</script>
	</body>
</html>

Vue路由

用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

使用步骤：

<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>router</title>
		
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 将被解析成a标签,还有href属性 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助页</router-link>
			<!-- 路由出口,匹配成功后,在这里展示 -->
			<router-view></router-view>
		</div>
		
		<script>
			//1,定义组件
			let home = {
				template:"<h3>这是主页</h3>"
			}
			let help = {
				template:"<h3>这是帮助页</h3>"
			}
			//2,创建路由的实例VueRouter,routes指定每个路由映射的一个组件
			let router=new VueRouter({
				routes:[
					{path:"/home",component:home},
					{path:"/help",component:help}
				]
			})
			//3,通过router注入路由,从而让整个应用都有路由功能
			new Vue({
				el:"#app",
				// router:router
				router
			})
		</script>
	</body>
</html>

Vue的Ajax

Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是客户端的技术，它可以实现局部刷新网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

Ajax原理：

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS06ZSF6ZSF,size_16,color_FFFFFF,t_70,g_se,x_16

axios：

1, Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2, 使用步骤: 要使用一个单独的js文件,注意导入顺序

<script src="vue.js"></script>
<script src="axios.min.js"></script>

axios.get("url地址信息","参数信息").then(res=>{
	console.log(res.data);
})

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax</title>
		
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p>{
   {info}}</p>
			<button @click="init()">点我获取数据</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					info:''
				},
				 // 发ajax请求，用以获取数据
				methods:{
					init(){
						axios.get('http://localhost:8080/car/get').then(     //可以跨域请求服务器数据
							a => ( //a就是访问成功后返回的数据
								// this.info = a.data.name  
								this.info = a.data //data已经是js对象了
							)	
						).catch(function (e){
							console.log(e)
						})
					}
				}
			})
		</script>
	</body>
</html>

知识点巩固：

axios请求头的 Content-Type 默认是 application/json，而postman默认的是 application/x-www-form-urlencoded。

ajax/postman一般采用@RequestParam接收参数：

@ResponseBody

public Result testpost(@RequestParam String username) {}

axiso采用@RequestBody的json方式接收参数

@ResponseBody

public Result testget(@RequestBody Map map) {}

常见错误

浏览时必须用服务模式浏览，否则报跨域错误

本文链接：https://blog.csdn.net/weixin_63659749/article/details/122608781

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

智能化运维监控系统设计与实现_智能运维-程序员宅基地

文章浏览阅读636次，点赞21次，收藏11次。综上所述，智能化运维监控系统通过运行状态数据接入、数据交叉比对、权限管理和可视化呈现四大核心功能的有机结合，为企业提供了一个全面、高效、智能的运维监控解决方案。权限管理是智能化运维监控系统的重要组成部分，通过用户管理、角色管理和权限分配等功能，确保系统的安全性和数据的保密性。为确保关键业务的连续性和稳定性，智能化运维监控系统成为了不可或缺的技术支撑。数据交叉比对是智能化运维监控系统的核心功能之一，通过对实时数据和历史数据的深度分析，系统能够生成多样化的报表和视图，为运维人员提供决策支持。_智能运维

中国移动宽带服务器上的光信号,中国移动光猫设置方法（常见故障及解决方法）...-程序员宅基地

文章浏览阅读4.1w次。目前三大运营商的宽带用户规模早已超过4亿户，平均算下来几乎每家每户都安装了固网宽带。很多朋友对家里的宽带出现了故障就素手无策只能苦苦等待宽带师傅上门维护，如果自己能动手解决就解决，不能解决那就需要代维师傅上门为我们处理了。光猫篇1、移动家用宽带目前有两种光猫，自动猫和手动猫，自动猫就是接入路由设备时需要去路由里面选择自动获取IP地址，手动猫就需要去路由里面选择宽带拨号上网。2、光猫信号指示灯常见三..._无法读取移动光猫的lan口

大数据Hive（二）：Hive的三种安装模式和MySQL搭配使用_hive mysql模式-程序员宅基地

文章浏览阅读5.2k次，点赞45次，收藏69次。全网最详细的Hive文章系列，强烈建议收藏加关注！后面更新文章都会列出历史文章目录，帮助大家回顾知识重点。目录历史文章前言Hive的三种安装模式和MySQL搭配使用一、Hive的安装方式1、内嵌模式2、本地模式3、远程模式二、Hive的安装1、准备工作2、安装mysql数据库3、安装Hive三、Hive的交互方式第一种交互方式：bin/hive第二种交互方式：使用sql语句或者sql脚本进行交互第三种交互方式：Beeline Clien._hive mysql模式

解决Qt网络传输Json中文乱码的问题_qt jason网络传输汉字乱码-程序员宅基地

文章浏览阅读1.1k次。解决Qt网络传输Json中文乱码的问题_qt jason网络传输汉字乱码

机械臂编程_建立自己的机械臂-编程-程序员宅基地

文章浏览阅读1.3w次，点赞3次，收藏26次。机械臂编程现在，手臂已经组装好了，是时候将其提升到一个新的水平。现在是释放野兽并完全控制整个机器人手臂的时候了。在这篇文章的结尾，您应该对如何对该机械臂进行编程以完成您想要的事情有一个想法。要了解我如何到达这里，请访问我以前的文章，该文章描述了组装过程- 构建自己的机器人手臂-组装。你需要什么再一次，您将需要一些额外的硬件来促进对伺服器的并行控制，并需要使用焊料来组装屏蔽层。..._机械臂编程

在线编辑器 FCKeditor 的应用-程序员宅基地

文章浏览阅读964次。开发环境： Tomcat5.5 Eclipse3.1.1 MyEclipse4.1.1 FCKeditor 版本 FCKeditor_2.2 FCKeditor.Java 2.3 这里需要用到两个包下载地址： http://www.fckeditor.net/download/default.html 开始：新建工程，名称为 FCK

随便推点

安装mysql-connector-odbc-8.0失败解决方案_mysql connector/odbc8.0 setup wizard ended prematu-程序员宅基地

文章浏览阅读1.5w次，点赞2次，收藏6次。安装mysql-connector-odbc-8.0 win32失败解决方法：安装"Microsoft Visual C++2015 Redistributable32位"安装mysql-connector-odbc-8.0 win64失败解决方法：安装"Microsoft Visual C++2015 Redistributable64位"附：Microsoft Visu..._mysql connector/odbc8.0 setup wizard ended prematurely

小柏实战学习Liunx(图文教程十五)_103.72.146.169-程序员宅基地

文章浏览阅读10w+次。前言：一定要知道每一个命令是啥意思,并且要学会看报错信息,学会使用搜索引擎。前情回顾：小柏实战学习Liunx(图文教程十四)_chinassj的博客-程序员宅基地本节课主题：Nolan 和 saobing 的配置更新，主要是为了过检测，防止出现魔方验证码一.nolan更新配置：1.进入自己的nolan目录：（路径换成你自己的路径）cd /mnt/docker/nolanjdc2.停止容器：docker stop nolanjdc3.拉最新代码：git pul_103.72.146.169

withRouter,非根组件获取路由参数_withrouter 只能取到路由中的一个参数-程序员宅基地

文章浏览阅读362次。import {BrowserRouter,HashRouter,Link,Redirect,Route,Switch,withRouter} from “react-router-dom”;import { withRouter } from ‘dva/router’;路由的根页面下this.props 会有historylocationmatch三个属性但是不是根组件的的需要包一下，才会有。@withRouterexport default withRouter(Cla_withrouter 只能取到路由中的一个参数

ubuntu环境下QT5操作摄像头报错，cannot find -lpulse-mainloop-glib cannot find -lpulse cannot find -lglib-2.0_cannot find–lpulse-程序员宅基地

文章浏览阅读333次。ubuntu环境下QT5操作摄像头报错，cannot find -lpulse-mainloop-glib cannot find -lpulse cannot find -lglib-2.0_cannot find–lpulse

用jbpm_bpel学jwsdp的ant方式使用-程序员宅基地

文章浏览阅读100次。用过jwsdp的同学都知道，它专门有个jwsdp-2_0-ant-docs文挡，可见ant与jwsdp结合的重要性。在用jbpm-bpel的时候，当然也是最好用ant方式的jwsdp的，下面就是某个example的具体过程：我们看jbpm-bpel-1.1.Beta3的examples/account/build.xml<?xml version="1.0"?><pro..._jbpm与bpel 工作机制

输入数字判断星期几_html获取当前星期几-程序员宅基地

文章浏览阅读1k次。输入数字判断星期几？GO来教会你_html获取当前星期几