前端
- 前端技术主要是由HTML，CSS，JS，JQUERY等技术构成的web展示页面。
- HTML超文本标记语言主要实现页面的展示，形成静态网页。
- CSS层叠样式表实现页面美化。
- JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页。
- Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发。
- NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境。
Web
-
B/S:
-
优点：直接使用浏览器就可以访问服务端程序
-
缺点：浏览器具有一定的局限性，页面展示能力比较差，对网速的依赖很高
-
-
C/S:
- 优点：客户端可以任意设计网页的展示能力很强，对网速的需求较低。
- 缺点：第一次使用时需要下载客户端软件
HTML
HTML标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xuhangs</title>
</head>
<body>
<h1>mohao1</h1>
<h2>mohao1</h2>
<h3>mohao1</h3>
<h4>mohao1</h4>
<h5>mohao1</h5>
<h6>mohao1</h6>
<a name="_top">java从入门到精通</a>
<!-- 列表标签:
ol + li 有序
ul + li 无序
type 定义列表符号,默认是 disc 小圆点
-->
<ol>
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ol>
<ul type="circle">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="square">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="disc">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<!-- 图片标签:
img向网页中引入图片 (相对路径/绝对路径)
border:边框
width:宽度
height:高度
-->
<img src="img/12.jpg" border="10px" width="50%" height="200%"><br>
<a href="http://www.baidu.com" target="_blank">baidu</a><br>
<input type="text" placeholder="普通文本框"/> 普通文本框
<input type="password" placeholder="密码" /> 密码
<input type="radio"/>男 单选框
<input type="email" />邮箱
<input type="date" />时间1
<input type="datetime" />时间2
<input type="number" /> 数字值
<input type="week" /> 日历
<input type="checkbox" />杨幂 复选框
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
<p>
<h1>流量调查表</h1>
<table border="1" cellpadding="0" width="100%">
<tr align="center">
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr align="center">
<td>23</td>
<td>23</td>
<td>21</td>
<td>12</td>
</tr>
<tr align="center">
<td>232/td>
<td>23</td>
<td>23434</td>
<td>342</td>
</tr>
<tr align="center">
<td>平均每人浏览</td>
<td colspan="3">32655</td>
</tr>
</table>
</p>
<!--table表格标签
tr 表格里的行
td 表格里的列
border:表格的边框
cellspacing:单元格的间距
bgcolor:背景颜色
width:宽度
align:位置
-->
<p>
<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="50%" align="center">
<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>
</p>
<!-- 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>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" name="path"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" />
<img src="img/12.jpg" width="20px" />
<input type="button" value="点我换一张"/>
</td>
</tr>
<tr>
<td>自我描述</td>
<td>
<textarea >
描述信息·
</textarea>
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button type="submit">重置</button>
</td>
</tr>
</table>
</form>
<!-- 其他标签 div p span -->
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>
<p> Nice</p>
<p> Nice</p>
<p> Nice</p>
<span> hello</span>
<span> hello</span>
<span> hello</span>
<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="left">学生信息管理系统MIS</h1>
<form method="post">
<table border="0px" cellspacing="0" cellpadding="4">
<tr align="left">
<th>姓名：</th>
</tr>
<tr>
<td><input type="text" name="user" placeholder="请输入姓名....">
</td>
</tr>
<tr>
<th align="left">年龄：</th>
</tr>
<tr>
<td><input type="number" name="age" placeholder="请输入年龄...."></td>
</tr>
<tr>
<td>
性别：
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="2"/>女
</td>
</tr>
<tr>
<td>
爱好：
<input type="checkbox" name="habits" value="1"/>乒乓球
<input type="checkbox" name="habits" value="2"/>爬山
<input type="checkbox" name="habits" value="3"/>唱歌</td>
</tr>
<tr>
<td>
学历：
<select name="education">
<option value="1">本科</option>
<option value="2">研究生</option>
<optionvalue="3">大专</option>
<option value="4">中专</option>
</select></td>
</tr>
<tr>
<td>
入学日期：
<input type="week" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button type="submit">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
1.图片视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--使用h5的播放音频 视频
注意::浏览器默认规定视频音频不会自动播放，因为自动播放会占用流量-->
<audio controls="controls">
<source src="../../img/1212.mp3"></source>
</audio>
<!-- 加载mp4 视频
注意::不能按网站方式访问,无法打开视频,直接按本地文件打开方式可以正常播放
http://127.0.0.1:8848/cgb/video.html
-->
<p>
<video controls="controls">
<source src="../../img/videos/share1.mp4"></source>
</video><br>
<video controls="controls">
<source src="../../img/videos/1.mp4"></source>
</video><br>
</p>
<img src="../img/preview.jpg"/>
</body>
</html>
CSS
-
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。
选择器
标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器测试</title>
<style>
div{
background-color: red;
}
span{
font-size: 50px;
}
input{
font-size: 30px;
}
</style>
</head>
<body>
<div style="background-color: beige;">中国</div>
<div>韩国</div>
<div>英国</div>
<span>
《唐诗三百首》<br>
《奇谈闲论》<br>
</span>
<span>
《假如给我三天光明》<br>
《唐吉可德》<br>
</span>
<input type="button" value="点我" name="1"/>
</body>
class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
/**class选择器：给指定元素加class属性，通过.获取class的值*/
.a{
color: red;
font-size: 70px;
}
.m{
background-color: yellow;
font-size: 40px;
}
</style>
</head>
<body>
<div class="a">中国</div>
<div class="m">韩国</div>
<div>英国</div>
<span class="a">
《唐诗三百首》<br>
《奇谈闲论》<br>
</span>
<span>
《假如给我三天光明》<br>
《唐吉可德》<br>
</span>
<input type="button" value="点我" name="1"/>
</body>
</html>
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试id选择器</title>
<style>
/*id选择器：给指定的元素加id属性，通过#获取id的值，值不要相同*/
#a{
font-size: 40px;
font-family: "楷体" ;
}
</style>
</head>
<body>
<div id="a">中国</div>
<div >韩国</div>
<div>英国</div>
<span id="a" >
《唐诗三百首》<br>
《奇谈闲论》<br>
</span>
<span>
《假如给我三天光明》<br>
《唐吉可德》<br>
</span>
<input type="button" value="点我" name="1"/>
</body>
</html>
分组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分组选择器</title>
<style>
/*分组选择器：把多个选择器的结果组成一组，统一设置样式*/
.b{
color: red;
font-size: 70px;
}
.m{
background-color: #FFFF00;
font-size: 40px;
}
#a{
font-size: 40px;
font-family: "楷体" ;
}
.b,.m,#a{
border: solid red;
border-radius: 25px;
}
</style>
</head>
<body>
<div id="a">中国</div>
<div class="b">韩国</div>
<div>英国</div>
<span class="m">
《唐诗三百首》<br>
《奇谈闲论》<br>
</span>
<span>
《假如给我三天光明》<br>
《唐吉可德》<br>
</span>
<input type="button" value="点我" name="1"/>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/*属性选择器：按照指定属性选中元素*/
input[type='text']{
text-shadow: 5px 5px 5px red;/* 加阴影 */
text-align:center;/* 文字居中 */
}
</style>
</head>
<body>
<div>中国</div>
<div>韩国</div>
<div>英国</div>
<span>
《唐诗三百首》<br>
《奇谈闲论》<br>
</span>
<span>
《假如给我三天光明》<br>
《唐吉可德》<br>
</span>
<input type="text" name="1" /><br>
<input type="button" value="点我" name="1"/>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 盒子模型</title>
<style>
/* input[type='text']{
margin: 10px;
border:10px dotted black;
} */
</style>
</head>
<body>
<!--css盒子模型：就是把网页里的所有元素，都看作是一个个个小盒子
内边距：padding是指内容和边框的距离
外边距：margin是指盒子和盒子的距离
边框：border是指边框的效果，宽度 颜色 实线
点线：dotted，实线：solid,虚线：dashed-->
<input type="text" placeholder="用户名" style="padding: 20px; border: 2px dashed red;"/><br />
<input type="text" placeholder="用户名" style="padding-top: 20px;"/><br />
<input type="text" placeholder="用户名" style="padding-left: 50px;"/><br />
<input type="text" placeholder="用户名" style="padding-bottom: 20px;"/><br />
<input type="radio" style="margin: 20px;" />男<br>
<input type="radio" style="margin-left: 20px;" />男
</body>
</html>
JavaScript
网页前后端是如何交互
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM0u5Bwp-1632484329159)(C:\Users\徐美富\Desktop\Blog\image\前后端交互.png)]
-
用户访问页面，页面触发事件创建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处理，最终回显到页面上。
-
-
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
-
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
-
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
-
-
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
- 一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
- 良好的交互性
- 跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
JS引入基本用法
- 注释
- 单行注释： //注释内容
- 多行注释： /* 注释内容 */
- 基本数据类型：包括:number/string/boolean/null/undefined
- 复杂数据类型：函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）
- js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
- javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。
<html>
<title>hello</title>
<meta charset="utf-8"/>
<script>/* JS代码 */
alert(100);
function fn(){
alert("111");
}
</script>
</head>
<body>
<a href="#" onclick="fn();">鼠标点击事件...</a><br>
<a href="#" onclick="alert(100)">dfs</a><br>
<a href="#" ondblclick="alert(200)">鼠标双击</a><br>
<a href="#" onmouseenter="alert(300)">鼠标划入</a><br>
<a href="#" onmouseout="alert(400)">鼠标划出</a><br>
</body>
</html>
<!---->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试JS的语言</title>
<script>
<!--内部JS-->
//JS是弱类型的语言，也有几种：number string Boolean null undefined
var a=10;
a =1.9+2.6;
a =1.9+2.1;
a =1.9+2.6;
a ="hello";
a =true;
a =null;
a=undefined;
alert(a);
var b='123'+'2323';
alert(b);//只定义而不赋值的变量，会得到提示undefined
var c = 12;
console.log(c);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = 3;
var b = 1;
console.log(a+b);//4
a+=4;
console.log(a+b);//8
//a+=4;
console.log(a==b); //true
console.log(a==="3"); //false 如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别！
console.log("1"=="1"); //true //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！
var a = 1;
alert(a++);//1
alert(++a);//3
alert(++a+a+++a);//4+4+5
alert(a>3?10:8);
var b = 10;
alert(a>b?a:b);//求两个数里的大数
var c = 8;
var d = a>b?(a>c?a:c):(b>c?b:c);
alert(d);//三个数里的大值
var e=1;
var f='1';
alert(e==f);//数据的值
alert(e===f);//数据的值+类型
//三元运算:比较两个数的最大值
alert(2<3?1:0);
var g =prompt("输入数字");//从浏览器输入的值
var h =prompt("输入数字");
alert(g>h?g:h);
var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string
alert(typeof 100);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//三元运算:比较两个数的最大值
console.log(2<3?1:0);
var g =prompt("输入数字");//从浏览器输入的值
var h =prompt("输入数字");
console.log(g>h?g:h);
var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string
console.log(typeof 100);
</script>
</head>
<body>
</body>
</html>
循环
for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试for循环</title>
<script>
for(var a=1;a<=10;a++){
console.log(a);
}
//计算1-100里的4的倍数的和
var sum=0;
for(var i=1;i<101;i++){
if(i%4==0){
sum+=i;
}
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
while循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试While</title>
<script>
var a=100000000;
var b=0;
while(a>1){
a=a/2;
b++;
}
console.log("总共花费"+b+"天");
</script>
</head>
<body>
</body>
</html>
选择结构
if-else语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试JavaScript中的ifelse</title>
<!--HTML中引入JS代码-->
<script>
var i=3;
if(i==4){
console.log("yes");
}else{
console.log("no");
}
var a=prompt("请输入数字");
if(100>=a&&a>=80){
console.log("优秀");
}else if(80>a&&a>=60){
console.log("中等");
}else if(60>a&&a>=0){
console.log("不及格");
}else{
console.log("输入错误");
}
</script>
</head>
<body>
</body>
</html>
switch-case结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试JS的switch case</title>
<script>
//alert()可以改为console.log();
var a =3;
console.log(a+a);
switch( a ){
case 1:
console.log("今天是星期一");
break;
case 2:
console.log("今天是星期二");
break;
case 3:
console.log("今天是星期三");
break;
case 4:
console.log("今天是星期四");
break;
case 5:
console.log("今天是星期五");
break;
default:
console.log("cw");
}
</script>
</head>
<body>
</body>
</html>
JS数组
-
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
-
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var arr1 = [];//声明一个空数组
console.log( arr1.length ); //此时数组长度为 0
arr1.length = 10;
console.log( arr1.length ); //此时数组长度为 10
arr1[99] = "abc";
console.log( arr1.length ); //此时数组长度为 100
arr1.length = 0;
console.log( arr1.length ); //此时数组长度为 0
var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
console.log(arr2.length);//3
console.log(arr2);
var arr4 = [];//声明一个空数组
console.log(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
console.log(arr4);
var arr=new Array(1,232,3343,4124,2343242,3242423);
for(var a=0;a<arr.length;a++){
console.log(arr[a]);
}
//增强for循环
for(var i in arr){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
JS函数
- 函数就是一个具有功能的代码块, 可以反复调用。
- 函数就是包裹在花括号中的代码块，前面使用了关键词 function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 声明：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例： */
a();//函数调用
b(1,"2");//函数调用
b(1,2);//函数调用
function a(){ //无参函数定义
var a = [1,2,3,4,5]; //定义数组
var sum =0; //定义变量
for (var i = 0; i <a.length; i++) {
if(a[i]%2==0){
sum+=a[i];
}
}
alert(sum);
}
function b(x,y){//定义含参函数
alert(x+y);
}
function a3(a){
return a;
}
function a4(a){
return 'sds';
}
alert(a3);
var s=a4();
alert(s);
var v = a3('java');
alert(v+'你好');
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 声明：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例 */
//fn2(); //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){ //定义无参函数
console.log(100);
}
fn2(); //函数调用
var fn3 = function(x,y){ //定义含参函数
console.log(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");//参数个数不匹配，王海涛undefined
var e = function(x,y){ //定义有返回值含参函数
return x-y;
}
console.log("函数返回值:::"+ e(1.1,10.9) ); //函数调用
</script>
</head>
<body>
</body>
</html>
JS对象
- 利用function关键字声明对象，用new关键字创建对象。
内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象的测试</title>
<!--Window对象-->
<script>
var a=window.prompt("数字"); //键盘输入会话框
console.log(typeof a);
var b = parseInt(a);
console.log(typeof b);
window.alert(100); //提示信息会话框
window.confirm("text"); //确认会话框
window.onload=function(){
console.log(typeof 100);
}; //在浏览器加载完整个html后立即执行!
window.document ; //window.document返回document对象，代表整个网页文件
window.document.write("你好");
window.document.getElementById(id);
window.document.getElementsByName(name);
window.document.getElementsByClassName();
window.document.getElementsByTagName();
window.event; //事件对象
</script>
</head>
<body>
</body>
</html>
自定义对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象的测试1</title>
<script>
//方法1：自定义对象
function Person(){}//定义对象
var p1 = new Person();//创建对象
//动态绑定属性
p1.name="张三";
p1.age=20;
console.log(p1);
p1.color='red';
p1.price=9.9;
console.log(p1.color);
console.log(p1.price);
console.log(p1);
//动态绑定函数
p1.say=function(){
console.log("hasasas");
}
//调用函数
console.log(p1);
//方法2：自定义对象
var p2 = {
"pname":"李四",
"page":100,
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
console.log(100);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/
</script>
</head>
<body>
</body>
</html>
DOM
DOM组成
- ECMAScript描述了javascript语言的语法和基本对象
- 文档对象模型DOM（Document Object Model）与HTML网页API接口
- 浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
- 核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function fun(){
//通过id的值，获取元素
var x=document.getElementById("a");
console.log(x);//打印元素
console.log(x.innerHTML);//获取元素
x.innerHTML="biansha";//设置内容
//通过class的值，获取元素
var y=document.getElementsByClassName("b");
console.log(y);//得到数组
y[0].innerText="nihap";
console.log(y[0]);
var z=document.getElementsByName("ps");
console.log(z);
z[0].innerHTML="dsd";
}
</script>
</head>
<body>
<div onclick="fun()">我是div1</div>
<div class="b">我是div2</div>
<span id="a">我是span</span>
<p name="ps">我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
<p>我是p4</p>
<p>我是p5</p>
</body>
</html>
总结
- 获取页面元素的4种方式:
- getElementsByTagName 标签名称，得到数组
- getElementsByName name属性，得到数组
- getElementsByClassName class属性，得到数组
- getElementById id属性，单个值
注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。
JSON
概念
- ajax往往要完整应用还会配合一个技术：JSON，那什么是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数据
-
var a =' "firstName" : "John" '
-
-
JSON对象
-
var a = '{ "firstName":"John" , "lastName":"Doe" }'
-
-
JSON数组
-
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';
-
转换工具
-
使用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>
//定义json数组
var b='[{"firstName":"John","lastName":"Doe","lastNasdme":"Dodse"},{"firstName":"Josdhn","lastName":"Doedsd"}]';
console.log(b);
console.log(b.substr(3));
console.log("============");
//把json字符串和js对象互转---JSON工具
//json字符串转成js对象:::为了调用属性，函数方便
var sx=JSON.parse(b);
console.log(sx);
console.log(sx[1].firstName);//获取对象身上的属性值
console.log(sx[0].lastName);//获取对象身上的属性值
console.log("============");
//js对象转成json字符串:::为了对字符串进行操作，给服务器发送数据
var sx1=JSON.stringify(sx);
console.log(sx1);
console.log(sx1.substr(3));
console.log("============");
console.log("============");
//1.定义json对象
var a='{"firstName":"John","lastName":"Doe"}';//是JSON字符串，用来交互数据的格式
var a1={firstName:"John",lastName:"Doe"};//JS对象，封装了属性函数
console.log(a);
console.log(a.substr(3));
console.log(a.concat(123));
console.log(a1);
console.log("============");
//1.定义json字符串
var c='"firstName":"sdsdJohn"';
console.log(c);
console.log(c.length);
console.log(c.concat(123));
console.log(c.substr(3));
//这里没有加大括号所以不可以转成JS对象
var x=JSON.parse(c);
console.log("============");
console.log("============");
console.log(x);
</script>
</head>
<body>
<div></div>
</body>
</html>
HTML与json分离
1.js
var b='[{"firstName":"John","lastName":"Doe","lastNasdme":"Dodse"},{"firstName":"Josdhn","lastName":"Doedsd"}]';
console.log(b);
console.log(b.substr(3));
console.log("============");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js/1.js"></script>
</head>
<body>
</body>
</html>
JQuery
ajax
概述
- AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。 - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBX1TVm7-1632484329161)(C:\Users\徐美富\Desktop\Blog\image\ajax原理图.png)]
核心对象XMLHttpRequest
- 所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 原生js提交form数据</title>
</head>
<body>
<form method="post" id="form">
<table style="margin: 30px;">
<h2 style="padding-left: 100px;">学生管理系统</h2>
<tr>
<td>姓名:</td>
</tr>
<tr>
<td>
<input type="text" name="name" placeholder="请输入姓名..."/>
</td>
</tr>
<tr>
<td>年龄:</td>
</tr>
<tr>
<td>
<input type="text" name="age" placeholder="请输入年龄..." />
</td>
</tr>
<tr>
<td>
性别：(单选框)
<input type="radio" name="sex" checked="checked" value="0"/>男
<input type="radio" name="sex" value="1" />女
</td>
</tr>
<tr>
<td>
爱好：(多选)
<input type="checkbox" name="hobby" checked="checked" value="ppq"/>乒乓球
<input type="checkbox" name="hobby" value="ps"/>爬山
<input type="checkbox" name="hobby" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
学历：(下拉框)
<select name="edu">
<option value ="1">本科</option>
<option value ="2">专科</option>
<option value ="3">研究生</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:
</td>
</tr>
<tr>
<td>
<input type="date" name="intime"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="保存" onclick="change()"/>
<input type="reset" value="取消" />
</td>
</tr>
</table>
</form>
<script>
function change(){
// 1. 创建xhr对象,用于同幕后服务器交换数据
var xhr = new XMLHttpRequest();
// 2. 定义当 readyState 属性发生变化时被调用的函数
xhr.onreadystatechange=function(){
//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
if(this.status==200 && this.readyState==4){
// document.getElementById("d1").innerHTML="hi ajax";
//5.以字符串返回响应数据,并展示
// document.getElementById("d1").innerHTML=this.responseText;
console.log(this.responseText);
}
}
//3.规定请求的类型(请求方式,文件位置,异步)
//xhr.open('get','1.json',true); //请求本地的json文件
//xhr.open('get','http://localhost:8080/car/get',true); //请求本地的服务器程序
// xhr.send(); //发送get请求
xhr.open('post','http://localhost:8080/stu/add',true);
//4.xhr将请求发送到服务器
var formdata=new FormData( document.getElementById("form") );
xhr.send(formdata); //发送post请求
}
</script>
</body>
</html>
vue的ajax
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RDRYCCF-1632484329164)(C:\Users\徐美富\Desktop\Blog\image\vue的ajax.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
{{info}}
</div>
<script>
new Vue({
el:"#app",
data:{
info:''
},
// 发ajax请求，用以获取数据
mounted:function(){
// axios.get('1.json').then(业务)//可以的读取文件里的json数据
axios.get('http://localhost:8080/hi').then( //可以跨域请求服务器数据
a => ( //a就是访问成功后返回的数据
// this.info = a.data.name
this.info = a.data //data已经是js对象了
)
).catch(function (e){
console.log(e)
})
}
})
</script>
</body>
</html>
或者
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03IYWovf-1632484329166)(C:\Users\徐美富\Desktop\Blog\image\0eajax.png)]
Vue
概述
Vue是一个渐进式的前端框架. 渐进式是指按需配置
安装Vue
-
官网
https://cn.vuejs.org/ #官网 https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本 -
特权
- 一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
- 是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
- 原生html页面是通过js 操作的是dom，而vue.js操作的是数据。
- 和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据。
- 优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8nTwd2bs-1632484329168)(C:\Users\徐美富\Desktop\Blog\image\vue.png)]
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试vue</title> <script src="../../js/vue.js"></script> </head> <body> <!--准备数据渲染区，{{msg}}叫插值表达式，是vue的固定语法， 获取msg变量的值，这里的msg是变量--> <div id="app">{{msg}}</div> <!--导入vue.js.vue就提供了Vue的工具，想用就new--> {{msg}} <script> //准备数据（js对象） var b={ msg:"sdsd" } //把数据渲染到挂载点 var com={ //el属性是用来描述元素（挂载点），data属性是具体要展示的数据 el:"#app",//通过css提供的id选择器，选中了id=a的元素 data:b//即将把b的数据渲染在挂载点 } //准备Vue对象 var v = new Vue(com); </script> </body> </html> -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试vue1</title> <script src="../../js/vue.js"></script> </head> <body> <!--准备数据渲染区，{{msg}}叫插值表达式，是vue的固定语法， 获取msg变量的值，这里的msg是变量--> <div id="app">{{msg}}</div> <!--导入vue.js.vue就提供了Vue的工具，想用就new--> {{msg}} <script> new Vue({ //el属性是用来描述元素（挂载点），data属性是具体要展示的数据 el:"#app",//通过css提供的id选择器，选中了id=a的元素 data:{ msg:"sdsd" }//即将把b的数据渲染在挂载点 }) </script> </body> </html> -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../../js/vue.js"></script> </head> <body> <div id="as">{{sds}}{{as}}</div> <script> new Vue({ el:"#as", data:{ sds:"sdsdsdsdsd", as:"name" } }) </script> </body> </html> -
MVVM框架
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJAZKYTW-1632484329170)(C:\Users\徐美富\Desktop\Blog\image\MVVM.png)]
-
上面看似结构非常简单，其实却深藏奥秘。和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。
-
而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。
-
简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fHudsMqC-1632484329170)(C:\Users\徐美富\Desktop\Blog\image\vue展示.png)]
基础语法
运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试Vue的运算符</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<!--准备数据渲染区-->
<span id="app">
<p>减法:{{a-b}}</p>
<p>加法:{{2+3}}</p>
<p>减法:{{2-3}}</p>
<p>乘法:{{2*3}}</p>
<p>除法:{{2/3}}</p>
<p>取模:{{2%3}}</p>
<p>自增:{{age++}}</p>
<p>自减:{{age--}}</p>
<p>三元表达式: {{age>10?'yes':'no'}}</p>
<p>字符串操作:</p>
<p> {{str}} </p>
<p>{{str.length}}</p>
<p>{{str.concat(1000)}}</p>
<p>{{str.substr(3)}}</p>
</span>
<script>
new Vue({
el:"#app",
data:{
str:"hellovue~",
age:12,
a:1,
b:2
}
})
</script>
</body>
</html>
方法methods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue数据的写法</title>
<script src="../../js/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()}}，名称后加小括号
Vue解析数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello vue</title>
<!-- 导入js -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>
vue解析变量：{{str}} {{str.length}}
{{str.replace('l','666')}} {{str.concat(123)}}
{{num}} {{num+10}} {{num/3}} {{num%4}}
{{num>5?1:0}} {{num--}}
</h1>
<h2>vue解析对象：{{p.name}} {{p.age}} </h2>
<h2>vue解析数组：{{arrays[1].name}} {{arrays[0].age}} </h2>
<h2>vue调用函数的语法:{{sout()}} </h2>
<button v-on:click="add(1,2)">点我</button>
<button @click="add(1,2)">点我</button>
</div>
<script>
var vm = new Vue({
el:"#app", //数据挂载点
data:{
str:"hello vue",
num:10,
p:{//vue定义对象
name:"lisi",
age:20
},
arrays:[//vue定义数组
{
name:"zhangsan",
age:20
},
{
name:"wangwu",
age:30
}
]
},
methods:{//vue定义方法
sout:function(){
console.log(100);
},
add:function(a,b){ //含参方法
console.log(a+b);
}
}
})
</script>
</body>
</html>
三种data值的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue里data的三种写法</title>
<script src="../../js/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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">name属性的值是：{{a.name}}
<p>age属性的值是：{{a.age}}</p>
<p>{{a.show()}}</p>
<p>bname属性的值是:{{ b.name }}, </p>
<p>abge属性的值是:{{b.age}} </p>
<p>调用函数: {{a.show()}} </p>
<p>解析数组里的数据(利用下标):
{{c[0].fristname}}</p>
</div>
<script>
new Vue(
{
el:"#app",
data:{
a:{
name:"xuhang",
age:12,
show(){
alert(23);
}
},
b : {
name : "rose",
age : 30
},
c : [//数组::::[ { k:v , k:v} ,{ k:v , k:v }
{fristname : "jack",lastname : 123},
{fristname : "rose",lastname : 456}
]
}
})
</script>
</body>
</html>
高级用法：v-命令
指令集
- 指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。
- 指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
- 常见的Vue指令:
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视图上。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o2eLn7nd-1632484329171)(C:\Users\徐美富\Desktop\Blog\image\双向绑定.png)]
闪现 v-cloak
- F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，观察问题。
- 遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？
- 在标签中增加指令：v-cloak
- 增加style标签，[v-cloak]属性选择器，设置先不展示display:none;
- 实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题
判断 v-if
- v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素
- v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的
- v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
事件 v-on
@click为v-on:click的缩写
绑定 v-bind
当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理
- 全称: v-bind:href
- 简称： :href 冒号开头就说明后面跟的是变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试Vue的指令</title>
<script src="../../js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{msg}}
<!--双向绑定-->
<input type="text" v-model="msg" /><br>
<span>{{age}}</span><br>
<!--v-if用来判断的，满足了条件才展示-->
<!--v-if和v-show的区别：都可以判断，但是后者
即使不满足条件也会被网页加载了只是隐藏了-->
<p v-show="age>=18">sds</p>
<!--v-if和v-else-if和v-else组合判断条件-->
<span v-if="age>=68">老年人</span>
<span v-else-if="age>=25">青壮年</span>
<span v-else-if="age>18">少年</span>
<span v-else>未成年人</span><br>
用下标获取数组中的元素：{{score[0]}},{{score[1]}},{{score[2]}}<br />
<!--v-for用来循环的,o是取到的数据，arr是数组名，相当于增强for循环-->
用v-for获取数组中的元素：
<h1 v-for="o in score">{{o}}</h1>
用v-for获取数组中的元素：
<h1 v-for="o,i in score">下标是：{{i}},数据是：{{o}}</h1>
<!--v-on用来绑定事件，点击按钮时触发函数,@是一种简写形式简化了v-on:-->
<button v-on:click="show()">点我</button>
<button v-on:dblclick="show()">双击点我</button><br>
<button @click="show()">点我</button>
<button @dblclick="show()">双击点我</button><br>
<!--v-bind用来获取变量的值-->
<a href="{{url}}">连接1</a><br>
<a v-bind:href="url">连接2</a><br>
<a :href="url">连接3</a>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"你好",
age:17,
score:["ysd","sdsa","sdad"],
url:"https://www.baidu.com/"
},
methods:{
show:function(){
console.log('爱我没见过')
}
}
})
</script>
</body>
</html>
Vue组件
概述
- 组件（Component）是 Vue.js 最强大的功能之一。
- 组件可以扩展 HTML 元素，封装可重用的代码。
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
使用
- 注册一个全局组件(所有实例都能用)语法格式如下：
- Vue.component(tagName, options)
- tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件:
- 也可以注册一个局部组件(只能在这个实例中使用)
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件定义</title>
</head>
<body>
<div id="app">
<!-- 如果需要使用组件,则在vue渲染区中中使用 -->
<!-- 规则:
1.在vue中使用标签时默认都是小写字母.如果需要
引入驼峰规则.则使用-线代替.
2.使用组件通过标签引用
-->
<add-num-com></add-num-com>
<add-num-com></add-num-com>
<add-num-com></add-num-com>
</div>
<!-- 定义模板标签语法 必须有根标签-->
<template id="numTem">
<div>
<h1>我是一个组件</h1>
获取数值: {{num}}
</div>
</template>
<!-- 1.导入JS -->
<script src="../js/vue.js"></script>
<!-- 2.定义全局组件 -->
<script>
/*
组件的定义
参数:
1.组件名称
2.组件实体内容
*/
Vue.component("addNumCom",{
//属性
data(){
return {
//自定义属性
num: 100
}
},
//页面标记
template: "#numTem"
})
/* 2.实例化vue对象 找到区域交给vue渲染 */
const apps = new Vue({
el: "#app"
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件定义</title>
</head>
<body>
<div id="app">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 定义app2 局部组件只能在特定位置使用,
所以该位置 不能解析-->
<div id="app2">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 模板标签必须定义在vue渲染div外边 -->
<template id="msgTem">
<div>
<h3>我是一个局部组件</h3>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
let msgCom = {
template: "#msgTem"
}
//定义局部组件 只对当前vue对象有效
const app = new Vue({
el: "#app",
components: {
//key: value
//msgCom: msgCom,
//如果在JS中key-value一样的.可以只写一个
msgCom
}
})
const app2 = new Vue({
el: "#app2",
})
</script>
</body>
</html>
Vue路由
概述
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
路由入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
</head>
<body>
<div id="app">
<h1>实现路由案例</h1>
<!-- 2.定义路由标签
1.a标签说明
标签说明: a标签 超链接标签
href属性: 请求跳转的地址
<a href="http://www.baidu.com">百度</a>
2.路由标签说明
router-link 解析为a标签
to 解析之后变成 href属性
-->
<router-link to="/home">主页</router-link>
<router-link to="/welcome">欢迎主页</router-link>
<!-- 3.指定路由填充位(占位符)
需要给组件一个展现的位置,需要提前定义.
-->
<router-view></router-view>
</div>
<!-- 定义template标签 -->
<template id="homeTem">
<div>
<h1>这里是系统首页</h1>
</div>
</template>
<template id="welcomeTem">
<div>
<h1>这里是系统首页s</h1><br />
<a href="http://baidu.com">baidu</a>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
<!-- 4.封装路由对象 -->
let HomeCom = {
template: "#homeTem"
}
let WelcomeCom = {
template:"#welcomeTem"
}
let router = new VueRouter({
//routes 定义请求与组件的映射关系
routes: [
{path: "/home", component: HomeCom},
{path:"/welcome", component:WelcomeCom}
]
})
/* 5.实现路由对象绑定 */
const app = new Vue({
el: "#app",
//router: router
router
})
</script>
</body>
</html>
Vue路由的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由的嵌套</title>
</head>
<body>
<div id="app">
<h1>江哥动物园</h1>
<router-link to="/tiger">老虎</router-link>
<router-link to="/lion">狮子</router-link>
<router-view></router-view>
</div>
<template id="tigerTem">
<div>
<h1>我是一只凶猛的喵</h1>
<img src="../img/老虎.jpeg"/>
</div>
</template>
<template id="lionTem">
<div>
<h1>我是狮子王 辛巴!!!!</h1>
<img src="../img/狮子.jpeg"/>
<h3>
<!-- 实现路由的嵌套机制 -->
<router-link to="/lion/one">猫咪</router-link>
<router-link to="/lion/two">iu</router-link>
<!-- 子级应该在该区域展现数据!!!! -->
<router-view></router-view>
</h3>
</div>
</template>
<template id="oneTem">
<div>
<h1>我是原配-老大</h1>
<img src="../img/猫咪.jpg"/>
</div>
</template>
<template id="twoTem">
<div>
<h1>我是iu-更喜欢我!!!</h1>
<img src="../img/iu.jpeg"/>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let tigerCom = {
template: "#tigerTem"
}
let lionCom = {
template: "#lionTem"
}
let oneCom = {
template: "#oneTem"
}
let twoCom = {
template: "#twoTem"
}
/*
1.如果需要在App根标签中跳转,则写到routes根目录下
2.如果需要进行父子嵌套,则应该使用children属性
3.如果使用children属性,则在自身的router-view展现数据
*/
let router = new VueRouter({
routes: [
{path:"/", redirect:"/lion"},
{path: "/tiger",component: tigerCom},
{path: "/lion",component: lionCom,
children: [
{path: "/lion/one",component: oneCom},
{path: "/lion/two",component: twoCom},
],
}
]
})
const app = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
Vue进阶
构建Vue项目 lifecycle+npm+webpack
Vue的生命周期 lifecycle
- 使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。
- 如页面创建时，页面加载时，页面更新时，页面销毁时？
- 在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。
- 生命周期函数：
-
vue实例在某一个时间点会自动执行这些函数；
-
生命周期钩子函数不允许写成箭头函数；
-
可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）
-
细分每个过程：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TiN5Vhkx-1632484329172)(C:\Users\徐美富\Desktop\Blog\image\vue.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liCwdrmJ-1632484329173)(C:\Users\徐美富\Desktop\Blog\image\挂载.png)]
npm概念
- 官网：英文官网：https://docs.npmjs.com/about-npm
- 中文官网：https://www.npmjs.cn/
- webpack：https://webpack.js.org/
vue-cli脚手架
-
安装nodejs并验证
-
node -v # v8.11.3，至少8以上,最新的是v15.11.0
-
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/ -
-i 安装指令，全拼： install -S 生产环境，全拼： --save -D 开发环境，全拼： --save—dev -O 可选依赖，全拼： --save—optional -E 精确安装指定模块版本，全称：--save—exact -g 全局安装，全拼： --global
-
脚手架安装
npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟
npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必
vue –V #查看版本
where vue #vue安装在哪里
扫一扫
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
