first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://element.eleme.io/#/zh-CN/component/image" target="_blank">超链接</a>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法显示">
<p>段落</p>
<span> span标签 一般用于行内布局,用来放文字</span>
<div>div 用来实现布局(画网页结构的)</div>
<ul>
<li>无序列表1 用在重复性布局上</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay loop
poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></video>
<audio src=""></audio>
<input type="text" name="userName" placeholder="请输入账户" disabled>
<input type="number" name="userPhone" placeholder="请输入手机号" readonly>
<input type="password" name="userPwd" placeholder="亲输入密码">
<input type="submit" value="登录">
<input type="button" value="登录">
<button>登录</button>
<input type="file">
<input type="color">
<input type="date">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test1">
<input type="radio" name="test1">
<input type="radio" name="test1">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="range">
<form action="127.0.0.1/login.php" method="get">
</form>
<i>你还一 存放图标的</i>
<select name="">
<option value="">--请选择城市--</option>
<option value="nj">南京</option>
<option value="hf">合肥</option>
<option value="wh">武汉</option>
</select>
<textarea name="" cols="30" rows="10" placeholder="请输入留言"></textarea>
<table border="1">
<tr>
<th>年份</th>
<th>岁数</th>
</tr>
<tr>
<td>1999</td>
<td>11</td>
</tr>
<tr>
<td>2000</td>
<td>22</td>
</tr>
</table>
<div>
在 <small>本教</small> 程中,<big>你将</big> 学习如<em>何使</em>用 HTML 来 <strong>创建站</strong> 点。 HTML 很 <sub>容易</sub> 学习!你
<sup>会喜欢</sup> 它的! 现在开始学习 HTML!HTML 实例 学习 <del>100</del> 个实例!使用我们的编辑器,你可以编辑 HTML,然后点击测
</div>
<div>
return function() {
    let context = this;
    let args = arguments;
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(function() {
      result = func.apply(context, args);
    }, wait);
    return result;
   }
</div>
<pre>
return function() {
    let context = this;
    let args = arguments;
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(function() {
      result = func.apply(context, args);
    }, wait);
    return result;
   }
</pre>
</body>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="header_top">
<div class="location">
<img src="" alt="">
<span></span>
</div>
<ul class="menu">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
<div class="header_botttom">
<img src="" alt="" class="left">
<div class="center">
<div class="search">
<div class="search_left">
<div class="search_input">
<input type="text">
<img src="" alt="">
</div>
<ul>
<li></li>
</ul>
</div>
<div class="search_right">
<img src="" alt="">
<span>我的购物车</span>
</div>
</div>
<ul></ul>
</div>
<img src="" alt="" class="right">
</div>
</div>
<div class="content">
<div class="type">
<ul>
<li>
<a href=""></a>
</li>
</ul>
<div class="banner">
<div class="big_banner"></div>
<ul class="small_banner">
<li><img src="" alt=""></li>
</ul>
</div>
<div>
<div class="user_login">
<div class="user_img">
<img src="" alt="">
<div class="user_img_right">
<p>Hi~欢迎逛京东!</p>
<div>
<span>登录</span> | <span>注册</span>
</div>
</div>
</div>
<div class="user_button">
<div></div>
<div></div>
</div>
</div>
<div class="new">
<div class="new_title">
<p></p>
<div class="more">
<span>更多</span>
<img src="" alt="">
</div>
</div>
<ul class="news_list">
<li>
<span></span>
<p></p>
</li>
<li>
<span></span>
<p></p>
</li>
</ul>
</div>
<ul>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,71 @@
git
linus
版本控制软件
公共(远程)仓库
github,gitee(码云),conding,gitlab
本地仓库
分支:
开发 dev
测试 test
上线 build
git 命令
git init 初始化本地仓库
git add -A
git commit "" 设置提交备注
git push 上传本地文件到服务器
测试!!!
11111
dsvbjvbs jhfbjwebfhe
dsvbjvbs 111 222
dsvbjvbs 111 你好哈哈哈哈
标签分为两:
块标签:
在网页中,会独占一行的标签
特征:可以设置宽高
哪些:h1~h6 p div ul ol
行标签:
在网页中,不会独占一行的标签(可以多个放在一行)
特征:不可以设置宽高
哪些:span a img
请求方式
1:get 读操作
2:post 新增操作
3:delete 删除操作
4:put 更新操作
请求的组成方式:
到后面ajax再讲

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构学习</title>
</head>
<body>
<div class="header">
<div class="logo"></div>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
<div class="content">
<div class="content_text">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
/* border: 10px solid red; */
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
/* margin: 50px; */
/* margin: 50px 40px; */
/* margin: 50px 30px 40px; */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 50px; */
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
float: left;
}
.box_2 {
background: blue;
}
.box_3 {
width: 150px;
height: 150px;
background: cadetblue;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1">
</div>
<div class="box box_2">
</div>
</div>
<div class="box_3">
<span>ccwqwcq</span>
</div>
</body>
</html>

View File

@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test, .test2 {
color: red;
}
.main h1 span{
color: yellow;
}
.demo p + span {
color: violet;
}
.demo > p {
color: tomato;
}
.htest:hover {
font-size: 40px;
}
.news li:nth-child(5n) {
color: palevioletred;
}
.news li:last-child {
color: rgb(4, 247, 17);
}
.news li:first-child {
color: rgb(247, 32, 4);
}
.username:focus {
width: 300px;
background: yellow;
}
.ba::before {
content: "before的使用";
}
.ba::after {
content: "after的使用";
}
::selection {
background: red;
color: blue;
}
.login input[placeholder="输入手机号"] {
height: 60px;
}
.login input[type="password"] {
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<h1>
<a href="">
<p>
<span>你好</span>
</p>
</a>
</h1>
<span>dwededes</span>
</div>
<div class="demo">
<p>哈哈哈1</p>
<p>哈哈哈4</p>
<span>哈哈哈2</span>
<span>
<p>ccccc</p>
</span>
</div>
<p class="test2">qdqwdwq</p>
<h2 class="test">wqdwqdqw</h2>
<div class="htest">你好</div>
<ul class="news">
<li>你好测试:1</li>
<li>你好测试:2</li>
<li>你好测试:3</li>
<li>你好测试:4</li>
<li>你好测试:5</li>
<li>你好测试:6</li>
<li>你好测试:7</li>
<li>你好测试:8</li>
<li>你好测试:9</li>
<li>你好测试:8</li>
<li>你好测试:9</li>
<li>你好测试:8</li>
<li>你好测试:9</li>
<li>你好测试:8</li>
<li>你好测试:9</li>
<li>你好测试:8</li>
<li>你好测试:9</li>
<li>你好测试:10</li>
</ul>
<div class="login">
<input class="username" type="text" placeholder="输入用户名">
<input type="number" placeholder="输入手机号">
<input type="password" placeholder="输入密码">
</div>
<div class="ba">
这是测试文字
</div>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 50px;
top: 30px;
}
.box_2 {
background: blue;
position: relative;
}
.box_2_3 {
width: 150px;
height: 150px;
background: black;
position: absolute;
left: 10px;
top: 30px;
}
.box_3 {
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
.box_4 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_2_3"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"></div>
</body>
</html>

View File

@@ -0,0 +1,3 @@
p {
color: blue !important;
}

View File

@@ -0,0 +1,133 @@
html , css, javascript (全栈 语言)
css 三种写法:
内联写法 优先级最高
内部写法
外链写法
!important 改变css默认的优先级
选择器 {
css属性名: css属性值
}
// 同时选中
选择器, 选择器 {
css属性名: css属性值
}
// 嵌套的意思,后面的选择器是前面选择器的子元素
选择器 选择器 选择器{
css属性名: css属性值
}
// 选择同级别标签
选择器 + 选择器{
css属性名: css属性值
}
// 选择父元素内部第一层子元素
选择器 > 选择器{
css属性名: css属性值
}
选择器:
class .
id #
标签选择器
通配符符选择器 * 一般用来清除标签的默认样式
伪类选择器
盒子模型
外边距 margin
内边距 padding
边框 border
border: 边框的粗细 边框的类型 边框的颜色
内容 content
盒子模型真实宽高的计算规则??
真实宽高 = 你写的宽高(content) + 边框 + 内边距
box-sizing: border-box; 改变盒子模型的计算规则
浮动:
让元素漂浮起来,可以左右的漂浮移动
子元素 漂浮后,父容器将没有高度,那么父容器后面div将挤上去
解决方案:
1:给父容器设置高度(等于子元素高度)
2:给父容器设置 overflow: hidden; (让浏览器自动设置父容器的高度)
3: 给子元素加 clear: both;
定位:
为了让元素产生堆叠(重叠),或者放在任意一个位置!
相对定位 relative
当元素设置 相对定位 后,元素原本位置还在(没有被删除)
定位参考对象:
他原本的位置·
绝对定位 absolute
当元素设置 绝对定位 后,元素原本位置不在,被删除了
定位参考对象:
父元素设置 定位,那么参考父元素的位置(当前位置)
父元素没有设置 定位,那么参考浏览器边框
固定定位 fixed
当元素设置 固定定位 后,元素原本位置不在,被删除了
定位参考对象:
浏览器边框
calc() 支持写数学表达式
元素垂直水平居中的N中场景和N方法:
定位
水平 子元素 left 50% , margin-left: -子元素宽度一半
垂直 子元素 top 50% , margin-top: -子元素高度一半
块标签内部的文字需要:
垂直(单行文字) line-height: 数值等于父元素的高度
多行文字:padding-top: 8.86px; 父元素高度一半 - 内部子元素高度一半
水平居中 text-align: center;
块标签内部的块标签需要:
垂直: 给父元素设置 padding-top: (父元素高度 - 子元素高度) / 2 ,还需要加上: box-sizing: border-box;
水平:margin: 0 auto;
两个行内标签设置垂直方向对象:
高度高的元素:vertical-align: middle;

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
@media screen and (min-width: 768px) {
.box {
width: 384px !important;
height: 384px !important;
}
}
@media screen and (min-width: 1024px) {
.box {
width: 512px !important;
height: 512px !important;
}
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box_1 {
background-color: red;
}
.box_2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,5 @@
媒体查询:
动态监测屏幕的宽度变化,然后修改css样式,达到自适应屏幕

View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
align-items: center;
height: 40px;
justify-content: space-around;
}
ul li {}
</style>
</head>
<body>
<ul>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
<li>首页5</li>
<li>首页6</li>
<li>首页7</li>
<li>首页8</li>
<li>首页9</li>
<li>首页10</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,44 @@
弹性盒子
主要用来实现布局的兼容
13个css属性
display: flex 开启弹性盒子 加载父元素上
父元素上6个:
justify-content:设置元素在X轴上的对齐方式
space-between space-around center
align-items: 设置单根轴线(x轴) 元素在Y轴上的对齐方式
center
多根 align-content
flex-wrap: wrap; 一行放不下的时候,进行换行
flex-direction 设置元素排列方向,
如果设置column,justify-content 和 align-items 作用交换
flex-flow: 是 <flex-direction> || <flex-wrap> 简写
子元素上6个:
flex-grow 设置元素所占的空间比例(放大)
flex-shrink 设置为0,表示不挤压元素的空间,一般做横向滑动配合overflow-x
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
一般都写一个属性,即表示 flex-grow
align-self 允许某个元素 不遵守父元素上的 align-items 规则
order 设置元素的位置,数值越小越靠前
尺寸兼容
rem
html上的font-size 16px
你写的单位rem * 基准数值 = 真实的尺寸
1: 媒体查询
2: js 实现

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: green;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 变量</title>
</head>
<body>
</body>
<script>
// js 版本
// es5 es6 es7 es8 .......
// 变量
// 计算机内部用来存储数据的(被存储的数值是可以修改的)
// 如何定义?(先定义后使用)
// 不给默认数值,那么就是 undefined
// 常量
// 计算机内部用来存储数据的(被存储的数值是不可以修改的)
// const c = 10;
// var a = 1;
// 变量名有个命名规范
// 变量名一般用字母开头,特殊情况 ( _ $ )
// 变量名不可以使用特殊符号,( _ $ )
// 变量名可以使用中文名 ,一般绝对不用
// 变量名区分大小写
// 变量名都需要具有含义,多个单词,用驼峰(全驼峰)命名法
// 数据类型
// typeof 求数据类型
// 基础数据类型
// 字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol
// 布尔(Boolean) true:真 1, false: 假 0
// 场景:用于条件语句的判断条件
// 空(Null) 就是不存在
// Symbol 表示唯一的
var a = 2, b = 2, c = 3;
// = 赋值
// == 判断是否相等,只会判断数值是否相等
// === 强等于 判断是否相等,判断数值和类型是否相等
// 算术运算符 +=-/ % ++ --
// 赋值运算符 += -= *= /= %=
// 比较运算符
// 逻辑运算符 && ||
// ++
// a++ 先用a,用完后再+1
// ++a 先+1,然后再用a
// --
// console.log(++a); // 2
// console.log(a); // 2
// console.log( ++a - ( (a++) - a - (a - c++) ) + (c+(b--) - b) );
// console.log( ( (++a) - a++ ) + ( --a + (--c) ) );
// console.log( ( 1 - (++c) ) + ( 1 + (--c) + 1) );
// + 加法两边如果都是number,才会进行数学运算
// + 只要有一个不是number,那么进行 拼接字符串
// console.log(a + b);
// console.log( !(a !== b) );
// 引用数据类型
// 对象(Object)、数组(Array)、函数(Function)
// 对象(Object)
// 1 数据类型之一,用来存储数据的
// 2 现实生活中具有属性和功能的事物在编程中的抽象概念,一般用于实现代码封装
// 如何定义?
// key: value,
// ket: value
// var obj = new Object();
// obj.name = "刘兵"
// obj.age = 18
// console.log(obj);
// var obj = new Object({ name: '刘兵', age: 18 });
// var obj = {
// name: '刘兵',
// age: 18,
// test: '111'
// }
// console.log(obj.name);
// console.log(obj["name"]);
// var car = {
// color: 'blue',
// weight: '1吨',
// speed: 6,
// start: function() {
// console.log("车辆启动");
// },
// stop: function() {
// console.log("车辆停止");
// }
// }
// if
// 三目(元)运算符
// if ( 60 < a && a < 70) {
// console.log("hahha");
// } else {
// console.log("dddd");
// }
// 1 > 2 ? console.log("hahha") : console.log("dddd")
// if 用的多,switch 少
// for while
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i
// }
// console.log(sum);
// var i = 0;
// while (i <= 100) {
// sum += i
// i++
// }
// console.log(sum);
// var i = 1
// do {
// console.log(i);
// i++
// } while (i<10);
// 数组(Array)
// 通过下标来存储数据的
// var arr = new Array();
// arr[0] = "哈哈哈1"
// arr[1] = "哈哈哈2"
// arr[2] = "哈哈哈3"
// arr[3] = "哈哈哈4"
// var arr = new Array(["哈哈哈1","哈哈哈2","哈哈哈3","哈哈哈4"]);
// var arr = ["哈哈哈1","哈哈哈2","哈哈哈3","哈哈哈4"];
// console.log(arr);
// for(var i = 0; i < arr.length; i++ ) {
// console.log(arr[i]);
// }
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑过渡</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 410px;
height: 231px;
overflow: hidden;
position: relative;
}
.main img {
width: 100%;
height: 100%;
}
.menu {
width: 100%;
height: 45px;
position: absolute;
background: #000;
color: #fff;
text-align: center;
line-height: 45px;
position: absolute;
left: 0;
right: 0;
bottom: -45px;
transition: all 0.3s;
}
.main:hover .menu {
bottom: 0 !important;
}
</style>
</head>
<body>
<div class="main">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639829018&t=80bf1b5305782cf9e22394e469bccec1"
alt="">
<div class="menu">
<p>哈哈哈哈</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,7 @@
html
css
js : 写功能,实现特效

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
</head>
<body>
<!-- <button onclick="test()">点我1</button> -->
<button class="two">点我2</button>
<!-- <button class="three">点我3</button> -->
</body>
<script>
// 1
// function test() {
// alert("hahha")
// }
// 2
// document.querySelector(".two") 返回的是一个js对象
// 虚拟 dom
document.querySelector(".two").onclick = function (event) {
console.log(event);
alert("哈哈哈1")
}
// // 3
// document.querySelector(".three").addEventListener('click', function () {
// alert("1")
// })
</script>
</html>

View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// return 返回方法的运行结果的
// 参数
// 无参方法
// 有参方法
// 匿名方法
// 作用域
// 全局作用域
// 局部作用域
// var a = 1;
// function test (num1,num2) {
// c = "2"; // 没有var,涉及到 变量提升
// return num1 + num2;
// }
// var d = test;
// console.log( d(100,300) );
// console.log(c); // ??
// function c () {
// console.log(arguments);
// }
// c(10,11,1,2,13,15,16,25,678,5,333,673,355)
// 异步
// 1: 回调 callback 回调地狱 回调多层嵌套
// 2: promise
// 同步
// function a(callback) {
// var c = null;
// setTimeout(function() {
// c = "哈哈哈哈"
// callback(c)
// }, 3000)
// }
// a( function(d) {
// console.log(d);
// } )
// function demo(callback) {
// callback("demo")
// }
// demo(function (ddd) {
// console.log(ddd);
// })
// es5 来实现js没有的类的概念
// function ddd() {
// }
// 原型 prototype
// ddd.prototype.name = "张三"
// ddd.prototype.test = function () {
// return this.name;
// }
// console.log(ddd.prototype);
// console.log( new ddd().test() );
// es6 class 语法糖
// var name = "里斯"
// 继承 extends
// 封装
// 多态
// class test {
// hello = "还是说"
// }
// 子类 派生类
// 父类 基类
// class ddd extends test {
// name = "张三";
// // 构造函数,类被初始化的时候第一个走的方法
// // 参数的默认设置,用来接收参数
// constructor () {
// super()
// console.log("类被初始化了");
// }
// test () {
// return this.hello;
// }
// }
// var a = new ddd(); // 初始化一个类,得到 类的实列
// console.log( a.test() );
// this
// 指向问题
</script>
</html>

View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.active_title {
color: red;
}
.tabs_content li {
display: none;
}
.active_content {
display: inline-block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">搞笑</li>
<li>综艺</li>
<li>娱乐</li>
<li>动漫</li>
</ul>
<ul class="tabs_content">
<li class="active_content">搞笑的内容</li>
<li>综艺的内容</li>
<li>娱乐的内容</li>
<li>动漫的内容</li>
</ul>
</body>
<script>
var titleArr = $(".tabs_title li");
var contentArr = $(".tabs_content li");
titleArr.forEach(function (v,i) {
v.onclick = function () {
// 批量的类名清除操作
titleArr.forEach(function (item,index) {
// 清除标题
item.className = ""
// 清除内容的类名
contentArr[index].className = ""
});
this.className = "active_title"
contentArr[i].className = "active_content"
}
});
function $(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.active_title {
color: red;
}
.tabs_content li {
display: none;
}
.active_content {
display: inline-block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
// json 文本数据交换格式
var tabsData = [
{
title: '搞笑2',
content: [
{ text: '搞笑的内容1' },
{ text: '搞笑的内容2' },
{ text: '搞笑的内容3' },
{ text: '搞笑的内容4' },
{ text: '搞笑的内容5' },
]
},
{
title: '综艺',
content: [
{ text: '综艺的内容1' },
{ text: '综艺的内容2' },
{ text: '综艺的内容3' },
]
},
{
title: '娱乐',
content: [
{ text: '娱乐的内容1' },
{ text: '娱乐的内容2' },
{ text: '娱乐的内容3' },
]
},
{
title: '动漫',
content: [
{ text: '动漫的内容1' },
{ text: '动漫的内容2' },
{ text: '动漫的内容3' },
]
}
]
function rendderTitle() {
tabsData.forEach(function (v, i) {
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `
<li class="${i == 0 ? 'active_content' : ''}">
${
v.content.map(function (item, index) {
return `<p>${item.text}</p>`
}).toString().replaceAll(",", "")
}
</li>
`;
console.log(v)
});
BindEvent();
}
function BindEvent() {
var titleArr = document.querySelectorAll(".tabs_title li");
var contentArr = document.querySelectorAll(".tabs_content li");
titleArr.forEach(function (v,i) {
v.onclick = function () {
// 批量的类名清除操作
titleArr.forEach(function (item,index) {
// 清除标题
item.className = ""
// 清除内容的类名
contentArr[index].className = ""
});
this.className = "active_title"
contentArr[i].className = "active_content"
}
});
}
rendderTitle()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,16 @@
函数(方法):function
作用:实现代码封装的(具有相同功能代码的集合)
事件:
在网页中的所有操作都是事件
三要素
1:事件源
2:事件类型
3:事件处理函数

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<!-- <script>
function getData(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/?v=getData"></script> -->
<script>
// 创建一个新的ajax对象,拿出电话
var xhr = new XMLHttpRequest();
// methos 四种 请求方式
// POST 给的动作,新增
// GET 要的动作
// PUT 给的动作,更新
// DELETE 给的动作,删除
// 设置请请求方式和地址
xhr.open("POST", "http://127.0.0.1/my.php")
// 发送请求,开始拨号
// xhr.setRequestHeader("Content-Type","application/json; charset = UTF-8");
// var res = new FormData();
// res.append("id", 1)
// res.append("name", 2)
// var dara = JSON.stringify({ id: 1, name: 2 });
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
// data.result.model.res.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.preview}" alt="">
// </li>
// `
// });
} else {
console.log("暂无数据");
}
}
}
</script>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<ul>
</ul>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
async function GetIndex() {
var res = await server.classList({
page: 0,
id: 124
});
renderPage(res.result.data)
}
function renderPage(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">
<h2>${v.title}</h2>
<img src="${v.preview}" alt="">
</a>
</li>
`
});
}
GetIndex();
</script>
</html>

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>详情</title>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
var page = 1, total_page = null;
async function GetInfo() {
var res = await server.info({
id: location.search.split("=")[1],
page: page
})
total_page = res.result.total_page
renderPage(res.result.data)
}
function renderPage(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<img src="${v.src}" alt="">
</li>
`
});
}
document.querySelector("button").onclick = function () {
page+=1;
if (page <= total_page) {
GetInfo();
}
}
GetInfo()
</script>
</html>

View File

@@ -0,0 +1,31 @@
// 专门用来存放所有的接口地址
var config = {
// 基地址 dev(开发阶段) test(测试阶段) prod(正式)
devUrl: 'http://127.0.0.1:3000/api/json',
testUrl: 'http://127.0.0.1:9090/api/json',
prodUrl: 'http://127.0.0.1/api/json',
stage: 'dev',
urlList: {
index: '/index',
info: '/info',
classList: '/classList'
},
checkUrl: function () {
switch (this.stage) {
case "dev":
return this.devUrl
break;
case "test":
return this.testUrl
break;
case "prod":
return this.prodUrl
break;
default:
break;
}
},
}

View File

@@ -0,0 +1,39 @@
class HTTP {
constructor() {
this.xhr = new XMLHttpRequest();
}
get(option) {
return new Promise((success, error) => {
var GetParams = ""
for (const key in option.data) {
GetParams += `&${key}=${option.data[key]}`
}
GetParams = GetParams.replace("&", "?")
option.url += GetParams;
this.xhr.open("GET", config.checkUrl() + option.url)
this.xhr.send()
this.onreadystatechange(success, error)
})
}
post() { }
onreadystatechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
success(JSON.parse(this.xhr.responseText));
} else {
console.log("暂无数据");
error(this.xhr)
}
}
}
}
}

View File

@@ -0,0 +1,25 @@
class Server {
async index(data) {
return (new HTTP()).get({
url: config.urlList.index,
data: data
})
}
async classList(data) {
return (new HTTP()).get({
url: config.urlList.classList,
data: data
})
}
async info(data) {
return (new HTTP()).get({
url: config.urlList.info,
data: data
})
}
}
var server = new Server()

View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<div class="two"></div>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
// callback
// function ajax(option) {
// var xhr = new XMLHttpRequest();
// var GetParams = ""
// if (option.type == "GET") {
// for (const key in option.data) {
// GetParams += `&${key}=${option.data[key]}`
// }
// GetParams = GetParams.replace("&", "?")
// option.url += GetParams
// }
// xhr.open(option.type, option.url)
// xhr.setRequestHeader("Content-Type", "application/json; charset = UTF-8");
// xhr.send(option.type == "GET" ? null : JSON.stringify(option.data))
// xhr.onreadystatechange = function () {
// if (xhr.readyState == 4) {
// if (xhr.status == 200) {
// option.success(JSON.parse(xhr.responseText))
// } else {
// console.log("暂无数据");
// option.error(xhr)
// }
// }
// }
// }
// callback
// ajax({
// type: "POST",
// url: 'http://127.0.0.1/index.php',
// data: {
// id: 1,
// name: '张三'
// },
// success: function (res) {
// console.log("====== success: ", res);
// },
// error: function (err) {
// console.log("====== error: ", err);
// },
// })
// promise
// var http = new HTTP();
// http.get({
// url: 'http://127.0.0.1/index.php',
// data: {
// id: 1,
// name: '222'
// }
// })
// .then(function(res){
// console.log(res);
// })
// .catch(function(err){
// console.log(err);
// })
// console.log("=======");
var a = async () => {
let res = await server.index({ id: 1, name: '222' });
// var res = await http.get({
// url: 'http://127.0.0.1/index2.php',
// data: {
// id: 1,
// name: '222'
// }
// });
console.log("=== ",res);
}
a()
</script>
</html>

View File

@@ -0,0 +1,30 @@
ajax 主要是前后端数据交互的一种方式(通讯技术)
单向通讯技术
前端 ----> 后端
ajax 同源策略 跨域(Access-Control-Allow-Origin)
协议
域名
端口
前端:http://127.0.0.1:8000/api/demo/js
后端:http://127.0.0.1:3000/api/json/index
解决 跨域
1:cors 后端设置请求头(Access-Control-Allow-Origin),允许跨域
2:jsonp,通过js资源文件请求,绕过同源策略,再加上callback拿回数据 是js文件请求,不是ajax
3:后端代理
get
http://127.0.0.1/my.php?id=1&page=2&num=10
post
请求体

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>我是首页</h2>
</body>
</html>

View File

@@ -0,0 +1,19 @@
// var a = require("./util");
// var { test } = require("./util");
//
// test();
const http = require('src/http');
const fs = require('fs');
// 创建本地服务器来从其接收数据
const server = http.createServer((req, res) => {
var data = fs.readFileSync("index.html");
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data.toString());
});
server.listen(80);
// http 80
// http 443

View File

@@ -0,0 +1,18 @@
{
"name": "2021-12-08",
"version": "1.0.1",
"description": "nodejs 学习",
"main": "index.js",
"scripts": {
"start": "node-dev index.js",
"pc": "node src/index.js"
},
"author": "bmy",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"axios": "^0.24.0",
"cheerio": "^1.0.0-rc.10",
"iconv-lite": "^0.6.3"
}
}

View File

@@ -0,0 +1,4 @@
module.exports = {
url: 'https://pic.netbian.com/4kmeinv/',
picUrl: 'https://pic.netbian.com'
}

View File

@@ -0,0 +1,26 @@
const axios = require('axios');
const iconv = require('iconv-lite');
const cheerio = require('cheerio');
class Http {
constructor() {
this.instance = axios.create({
timeout: 10000,
headers: {}
});
}
async get (params) {
let res = await this.instance.get(params.url, {
responseType: params.type == 1 ? "arraybuffer" : "stream"
});
if (params.type == 1) {
return cheerio.load(iconv.decode(res.data, 'gbk'));
}
return res.data;
}
}
module.exports = new Http();

View File

@@ -0,0 +1,73 @@
const http = require('./http');
const config = require('./config');
const fs = require('fs');
let urlArr = [] // 存放被请求的页面地址
let urlArrIndex = 0; // 默认从第几页开始爬
let pageArr = [] // 存放每一页的20条li数据
let pageArrIndex = 0 // 默认爬第几页的第几个图片
for (let i = 1; i <= 10; i++) {
if (i == 1) {
urlArr.push(`${config.url}index.html`)
} else {
urlArr.push(`${config.url}index_${i}.html`)
}
}
async function getUrlArr() {
let $ = await http.get({
url: urlArr[urlArrIndex],
type: 1
});
$(".slist li").each(function () {
pageArr.push({
title: $(this).find("b").text(),
img: config.picUrl+$(this).find("img").attr("src"),
url: config.picUrl+$(this).find("a").attr("href")
})
});
getPageArr()
}
async function getPageArr() {
console.log(`已获取第 ${urlArrIndex + 1}页, 的第几张 ${pageArrIndex + 1}图`)
let $ = await http.get({
url: pageArr[pageArrIndex].url,
type: 1
});
downImg(config.picUrl + $(".photo-pic img").attr("src"))
}
async function downImg(url) {
let res = await http.get({
url: url,
type: 2
});
res.pipe(fs.createWriteStream(`img/${fileName()}.jpg`));
pageArrIndex += 1;
if (pageArrIndex <= 19) {
getPageArr()
} else {
urlArrIndex += 1;
if (urlArrIndex < 10) {
pageArrIndex = 0;
pageArr = [];
getUrlArr()
}
}
}
function fileName() {
return `${Math.random() * 1000000}${Date.parse(new Date())}`
}
getUrlArr()

View File

@@ -0,0 +1,12 @@
class util {
test () {
console.log("test函数");
}
}
module.exports = new util();
// 导出
// 想用的地方导入

View File

@@ -0,0 +1,66 @@
lsnodejs :不是编程语言,也不是js插件,它是一个让js可以成为后端编程语言的 运行环境
npm: 包(依赖“插件”)管理工具
https://www.npmjs.com/
jquery
运行环境
v8(运行js) + c++
nodejs (js) 想要读取c盘文件列表
|
| v8 运行js
|
c++
|
操作系统
nodejs: 让js编程一个强大的后端编程语言
js: 必须依赖浏览器 (js引擎 v8)
前端:html + css + js
后端:php,java,go,c#,python
1: html + css + js
2:jquery mvc阶段
nodejs
3:vue.js react.js mvvm
npm init 初始化一个全新的nodejs项目
创建文件:package.json 最核心的文件!!!!!!不能丢!!!!
package.json:记录了项目的作者,代码运行方式,依赖的信息等等等
npm install(i) 参数 插件名(系统提供内置插件 & 你自己下载) 下载安装插件
cnpm
参数
--save (-S) 把插件安装到正式阶段
--save-dev(-D) 把插件安装到开发阶段
-g 把插件安装到系统全局
install 安装的插件会自动放在 node_modules 文件夹中
dependencies:依赖信息 正式阶段
devDependencies: 开发阶段
npm run 命令 运行你的命令
后端渲染
前后端分离
爬虫:

View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component 组件</title>
</head>
<body>
<div class="app">
<h2>app 父组件</h2>
<lb-test></lb-test>
<item :list-data="newsList" @tap="goToInfo"></item>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件 封装html代码的一种方案
// 全局组件 导入 注册 使用
// 局部组件 导入 注册 使用
// 组件通讯(数据传递)
// 父组件 ---> 子组件
// props
// 子组件 ---> 父组件
// $emit
// 兄弟组件 ---> 兄弟组件
// 插槽
// vue-router
// 组件名 html标签名称
// 全局组件
Vue.component('item', {
// props: [ 'list' ],
props: {
listData: {
type: Array,
default: () => []
}
},
data() {
return {
title: '全局组件 - 底部导航组件'
}
},
template: `
<div class="footer">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="change(index)">
{{ item.title }}
</li>
</ul>
</div>
`,
methods: {
change(i) {
this.$emit("tap", i)
}
}
})
var a = {
data() {
return {
title: '局部组件 - 测试',
list: [
{ id: 1, title: '社会1' },
{ id: 2, title: '社会2' },
{ id: 3, title: '社会3' },
{ id: 4, title: '社会4' },
]
}
},
template: `
<div class="test">
<p>{{ title }}</p>
<item :list-data="list" @tap="priimg"></item>
</div>
`,
methods: {
priimg(index) {
console.log("显示图片预览:", index);
}
}
}
var vm = new Vue({
el: '.app',
data: {
newsList: [
{ id: 1, title: '首页1' },
{ id: 2, title: '首页2' },
{ id: 3, title: '首页3' },
{ id: 4, title: '首页4' },
]
},
methods: {
goToInfo(index) {
console.log("goToInfo 进详情: ", index);
}
},
components: {
'lb-test': a
}
})
</script>
</html>

View File

@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 ref="demos">{{ hello | shengflh }}</h2>
<a :href="href">vue官网</a>
<ul>
<li v-for="(item,index) in list" :key="index">
<a :href=" './info.html?id='+item.id ">{{ item.text }}</a>
</li>
</ul>
<ul>
<li v-for="(value,key) in test">
{{ value }} | {{ key }}
</li>
</ul>
<input type="text" placeholder="输入用户名" v-model.trim="userName">
<p v-once>你输入的用户名:{{ userName }}</p>
<p>你输入的用户名2:{{ userName }}</p>
<hr>
<div v-html="h2Demo"></div>
<div v-text="h2Demo"></div>
<hr>
<div class="test">
<div v-if="type == '1' ">群主</div>
<div v-else-if="type == '2' ">管理员</div>
<div v-else>群成员</div>
</div>
<div v-show="isShow">v-show的使用</div>
<button @click="hahah('1111')">点我</button>
<hr>
<div class="1">{{ total }}</div>
<div class="2">{{ total }}</div>
<div v-lb="ffff"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var loadMore = {
data() {
return {
page: 1,
totalPage: 0,
ffff: '哈哈哈哈哈哈哈'
}
},
methods: {
load() {
console.log("滚动加载...");
}
}
}
var vm = new Vue({
el: '.app',
mixins: [loadMore],
// 定义变量的地方
// 指令 (标签的属性)
// v-bind 将变量绑定到 标签的属性上
// 简写: :
// v-for 用来遍历数组 或 对象的
// v-model 专门给输入框用 <input> <select> <textarea>
// v-html 把变量中保存的html渲染到网页上
// v-text 把变量中保存的html显示到网页上
// v-if 根据条件的true false 对元素进行显示隐藏
// 不符合条件的html元素会被删除
// 1: 条件较多的时候
// v-else
// v-if v-else-if ..... v-else
// v-show 根据条件的true false 对元素进行显示隐藏
// 不符合条件的html会被display: none;
// 2: 数据量较大的时候,需要提高性能的时候
// v-on 绑定事件()
// 简写: @
// 混入 用于代码封装 解决this指向问题
// 生命周期 created mounted
// ref
data: {
hello: '你好啊,Vue.js!!',
href: 'https://cn.vuejs.org/',
userName: "刘兵",
list: [
{ id: 1, text: '新闻1' },
{ id: 2, text: '新闻2' },
{ id: 3, text: '新闻3' },
],
test: {
id: 1,
text: '新闻1'
},
h2Demo: '<h2>哈哈哈哈哈</h2>',
type: '1', // 1 2 3
isShow: false
},
// 发送ajax请求
filters: {
shengflh(val) {
return val.substring(0, 3) + "..."
}
},
directives: {
lb: {
// 指令的定义
inserted: function (el, binding) {
// console.log("=========:",el, binding.value);
document.title = binding.value
}
}
},
created() {
console.log(this.page);
console.log(this.load());
console.log(this.$refs.demos);
},
mounted() {
console.log(this.$refs.demos);
},
updated() {
console.log("监听到页面改变");
},
// 定义方法
methods: {
hahah(num) {
console.log('你点了我,哈哈 ', num);
this.testss()
},
testss() {
console.log(this.userName);
}
},
computed: {
total() {
console.log("total....");
return 1 + 1
}
},
watch: {
userName(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
})
</script>
</html>

View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.tabs_title .active {
color: red;
}
.tabs_content li {
display: none;
}
.tabs_content .active {
display: inline-block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<li :class=" index == currentIndex ? 'active' : '' "
v-for="item,index in tabs"
@click="change(index)"
:key="index">
{{ item.text }}
</li>
</ul>
<ul class="tabs_content">
<li :class=" index == currentIndex ? 'active' : '' "
v-for="item,index in tabs"
:key="index">
<p v-for="v,i in item.content" :key="i">{{ v.text }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{
id: 1,
text: '军事',
content: [
{ text: '军事的内容1' },
{ text: '军事的内容2' },
{ text: '军事的内容3' },
]
},
{
id: 2,
text: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' },
]
},
{
id: 3,
text: '体育',
content: [
{ text: '体育的内容1' },
{ text: '体育的内容2' },
{ text: '体育的内容3' },
]
}
]
},
methods: {
change(i) {
this.currentIndex = i
}
}
})
</script>
</html>

View File

@@ -0,0 +1,37 @@
vue.js 是一个 mvvm 框架
mvc : model(数据 数据库) view(页面) controller(控制器)
mvvm: model(数据 ajax) view(页面 原生js,vue) view and model
view and model
数据双向绑定
组件系统
dom 原生js,jq
去dom操作
前端三大框架:
angular.js 最早出来
react.js 偏向前端新语法
php laravel
vue.js 尤雨溪
vue 1.x
typescript 强类型的javascript语法
vue 2.x
option api 语法 60%
this 指向
class api 语法
vue 3.x ++ 基于 typescript 开发
Composition API 40%

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<div>首页的轮播图</div>
<swiper :list="homeSwiper">
<template v-slot:default="{ item }">
<a :href=" 'info.html?id='+ item.id">
<img :src="item.img" alt="">
</a>
</template>
</swiper>
<hr>
<div>详情页的轮播图</div>
<swiper :list="infoSwiper">
<template v-slot:default="{ item }">
<img :src="item" alt="">
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 作用域插槽
Vue.component('swiper', {
data() {
return {
}
},
props: {
list: {
type: Array,
default: () => []
}
},
template: `
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item,index in list" :key="index">
<slot :item="item"></slot>
</div>
</div>
</div>
`,
methods: {
clickData() {
}
}
});
new Vue({
el: '.app',
data:{
homeSwiper: [
{ id: 1, img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4fd0e71e2ba1dac1a3b685417393e52c.jpg?thumb=1&w=720&h=360' },
{ id: 2, img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b2fe8572343d83cd84aa6d0c04b8390.jpg?thumb=1&w=720&h=360' },
],
infoSwiper: [
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6ff526b9d75342f0995778b56060b85.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beac5a54f4f4d93cb3f680a097b4f644.jpg?f=webp&w=1080&h=660&bg=F5F5F5'
]
},
methods:{
getChange(data) {
this.text = data
}
}
})
</script>
</html>

View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<item1 @change="getChange">
<template v-slot:back>
<i class="iconfont test"></i>
<span>返回</span>
</template>
<template v-slot:icon>
<i class="iconfont test"></i>
<i class="iconfont test"></i>
</template>
</item1>
<item2 :demo="text"></item2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 作用域插槽
Vue.component('item1', {
data() {
return {
title: 'item1',
test: 'item1 test data'
}
},
template: `
<div class="item1" @click="clickData">
<div class="back">
<slot name="back"></slot>
</div>
<div class="icon">
<slot name="icon"></slot>
</div>
</div>
`,
methods: {
clickData() {
this.$emit("change", this.test)
}
}
});
Vue.component('item2', {
props: {
demo: {
type: String,
default: ''
}
},
data() {
return {
title: 'item2'
}
},
created() {
console.log(this.$parent.$children[0].$data.test);
},
watch: {
demo(n,o) {
console.log(n,o);
}
},
template: `
<div class="item2">item2</div>
`
});
new Vue({
el: '.app',
data:{
text: ''
},
methods:{
getChange(data) {
this.text = data
}
}
})
</script>
</html>

View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> vue-router</title>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/type">分类</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/me">我的</router-link>
</p>
<div class="content">
<transition name="bounce">
<router-view></router-view>
</transition>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// vue-router 路由管理工具 管理页面地址,你输入什么地址看到什么页面
// 路由?
// 你输入一个地址,看到对应页面
// router-link 标签(组件) 页面跳转(a)
// 两种路由模式
// hash 路由
// http://www.bmy.com/#/about
// http://www.bmy.com/#/index
// http://www.bmy.com/#/info?id=3
// window.location.hash 和 hashchange 事件 来实现
// history 路由
// http://www.bmy.com/about
// http://www.bmy.com/index
// history.pushState 和 history.replaceState 和 onpopstate 事件 来实现
// query
// http://www.bmy.com/#/about?id=1&page=1
// params
// http://www.bmy.com/#/about/1/1
// $router 获取路由跳转的各个方法
// $route 获取路由访问的地址信息
// 导航守卫
// 全局守卫
// 路由独享的守卫
// 组件独享的守卫
const Home = {
data() {
return {
list: [
{ id: 1, title: '商品1' },
{ id: 2, title: '商品2' },
{ id: 3, title: '商品3' },
{ id: 4, title: '商品4' },
]
}
},
template: `
<div class="home">
<ul>
<li v-for="(item,index) in list" :key="index" @click="goInfo(index)">
{{ item.title }}
</li>
</ul>
</div>
`,
methods: {
goInfo(index) {
this.$router.push({
name: 'info',
query: {
id: this.list[index].id,
title: this.list[index].title,
}
})
}
}
}
const Type = {
template: '<div>分类</div>'
}
const Car = {
template: '<div>购物车</div>'
}
const Me = {
template: `
<div >
我的
</div>`
}
const Info = {
template: `
<div class="info">详情</div>
`,
created() {
console.log(this.$route.query.id);
console.log(this.$route.query.title);
}
}
const Login = {
template: `
<div class="login">
登录页面
<button @click="UserLogin">点击登录</button>
</div>
`,
methods: {
UserLogin() {
// 调用ajax 拿到token,保存到本地
localStorage.setItem("token", "wqewqrr")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace("/")
}
}
}
}
const routes = [
{
path: '/',
redirect: '/home',
meta: {
isLogin: false
}
},
{
path: '/home',
component: Home,
meta: {
isLogin: false
}
},
{
path: '/type',
component: Type,
meta: {
isLogin: false
}
},
{
path: '/car',
component: Car,
meta: {
isLogin: true
}
},
{
path: '/me',
component: Me,
meta: {
isLogin: true
}
},
{
path: '/info',
name: 'info',
component: Info,
meta: {
isLogin: false
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
isLogin: false
}
},
]
const router = new VueRouter({
mode: 'hash',
routes
});
// 登录拦截
router.beforeEach((to, from, next) => {
// 表示未登录
if (localStorage.getItem("token") == null) {
// 需要登录才可以查看的页面
if (to.meta.isLogin) {
next({
path: "/login",
query: {
from: to.fullPath
}
})
// 不需要登录就可以查看的页面
} else {
next()
}
// 表示登录过了
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

View File

@@ -0,0 +1,13 @@
// 兄弟组件 ---> 兄弟组件
// 插槽
// vue-router
vue cli
vue 2.x
vue cli 2.x
vue 3.x
vue cli 3.x