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,103 @@
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<img src="jd.gif" alt="图片无法加载"/>
<!--
有序列表 & 无序列表
-->
<ul>
<li>
第一天HTML学习
<ul>
<li>ddddd</li>
<li>ddddd</li>
<li>ddddd</li>
</ul>
</li>
<li>第一天HTML1学习</li>
<li>第一天HTML2学习</li>
</ul>
<ol>
<li>第一天HTML学习</li>
<li>第一天HTML1学习</li>
<li>第一天HTML2学习</li>
</ol>
<p>sss &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sss</p>
<input type="text" placeholder="请输入你的姓名"/>
<br/>
<input type="password" placeholder="请输入你的密码"/>
<br/>
<input type="button" value="登 录"/>
<button>登 录</button>
<br/>
<input type="file">
<br/>
<input type="date">
<br/>
<input type="number" placeholder="请输入手机号" />
<br/>
<h2>(多选)请选择你的爱好:</h2>
A <input type="radio" name="gh"> 睡觉 <br>
B <input type="radio" name="gh"> 吃饭 <br>
C <input type="radio" name="gh"> dededed <br>
D <input type="radio" name="gh"> 不上班 <br>
A <input type="checkbox" name="dd"> 睡觉 <br>
B <input type="checkbox" name="dd"> 吃饭 <br>
C <input type="checkbox" name="dd"> 打游戏 <br>
D <input type="checkbox" name="dd"> 不上班 <br>
<br/>
<!--
GET: 明文地址栏传递参数.
POST: 参数放在请求体里面,不在地址栏.
--->
<form action="http://127.0.0.1/login.php" method="POST" >
<input type="text" placeholder="账户名" name="username" required readonly> <br>
<input type="password" placeholder="密码" name="userpwd" required> <br>
<input type="submit" value="登 录" >
</form>
<a href="http://www.runoob.com/java/java-tutorial.html" title="java学习" target="_blank"> java学习 </a>
<video src="xiaojieje.mp4" controls autoplay muted loop width="200" poster="jd.gif">
抱歉您的浏览器不支持video视频播放请更换新的浏览器打开本网站
</video>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

View File

@@ -0,0 +1,45 @@
html: 超文本标记语言,相当于人的骨骼
css: 层叠样式表,相当于人的外观和衣服
javascript运行在客户端浏览器上的脚本语言(相当于人的思想)
html
标签
<开始标签> </结束标签>
<html>
<head>
给浏览器看的代码
</head>
<body>
给用户看的代码
</body>
</html>
title : 设置网站的标签卡
meta: 元数据标签
参考地址https://blog.csdn.net/qq_16559905/article/details/51182085
h1 ~ h6 标题,一般用于文章内容标题
任务:
在网页播放 mp3
看文档http://www.runoob.com/html/html-intro.html

View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签分类</title>
</head>
<body>
<p>我是p</p>
<h2>我是h2</h2>
<a href="">超链接1</a>
<strong>我是 strong</strong>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 学习</title>
<!-- <link rel="stylesheet" href="css/index.css"> -->
<style>
* {
color: #8d8d8d;
}
.blue {
color: blue;
}
.red {
color: green;
}
.green {
color: green;
}
.header h2,
.footer h2{
font-size: 100px;
}
.font14 {
font-size: 14px;
}
.colorGreen {
color: green;
}
a {
color: chocolate;
}
a:hover {
color: yellow;
font-size: 24px;
}
.ser {
width: 100px;
transition: all 1s ease-in;
}
.ser:focus {
width: 200px;
}
</style>
</head>
<body>
<!-- <p class="blue">我是p标签1</p>
<p class="red">我是p标签2</p>
<p class="green">我是p标签3</p>
<p class="red">张三</p>
<p id="UserName">你好1</p>
<h2>dddd</h2>
<a href="">dddd</a> -->
<div class="header colorGreen font14">
<h2>我是头部</h2>
</div>
<div class="footer font14">
<h2 class="font14">我是版权</h2>
</div>
<a href="">hover悬浮</a>
<input class="ser" type="text" placeholder="请输入用户名">
</body>
</html>

View File

@@ -0,0 +1,3 @@
p {
color:red;
}

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
请选择你的爱好:
<select name="">
<option value="0">--请选择--</option>
<option value="1">编程</option>
<option value="2">骑车</option>
<option value="3">游泳</option>
<option value="4">跑步</option>
</select>
<table>
<tr>
<th>价格</th>
<th>品牌</th>
</tr>
<tr>
<td>100</td>
<td>小米</td>
</tr>
<tr>
<td>200</td>
<td>魅族</td>
</tr>
</table>
<p>
<strong>1. doctype 声明是不区分大小写的</strong> , 用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<big>在HTML</big> 4.01 中,<!DOCTYPE><small>明需引</small> 用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGMLStandard Generalized Markup Language 标准通用标记语言)。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明分别是Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML因此不要求引用 DTD。
2. 对于 <del>中文网页</del> 需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。
</p>
<pre>
function loggingDecorator(wrapped) {
return function() {
console.log('Starting');
const result = wrapped.apply(this, arguments);
console.log('Finished');
return result;
}
}
</pre>
</body>
</html>

View File

@@ -0,0 +1,84 @@
html 标签分类
1块级标签
在浏览器里面会独占一行的标签
块级标签 具有宽高属性也就是说可以通过css代码对标签进行宽高的设置
2行内标签
不会独占一行的标签,元素宽度由内容决定
行内标签 不具有宽高属性也就是说无法通过css代码对标签进行宽高的设置
作用:
为了实现网页中更加自由的布局
css 三种写法
1内联语法
<p style="color:red;font-size: 14px;">我是p标签</p>
2内部写法
选择器 {
属性名: 属性值;
}
3: 外链写法
创建一个 xxx.css 文件这里面放css代码
在html里面
<link rel="stylesheet" href="css/index.css"/>
优先权:
1 > 2 > 3
!important 提升某条css属性的优先权
选择器:
1标签选择器(标签名字)
2class 选择器 ( " .名称 " ), 可以取多个名字xxx xxx xxx
class 选择器在网页中取的名字可以无限次重复并使用
3id 选择器 ( " #名称 " )
一般通过id取的名字在网页是唯一的不推荐重复使用。
为什么?
一般通过id取名字的元素是给js来使用, 所以不应该重复
4* 通配符选择
5: 父元素 子元素 选中父元素内部的子元素
6
父元素 子元素,
父元素 子元素
同时对 规则 1 和 2 设置相同的css代码
7: hover 监听元素的鼠标悬浮事件
8: focus 监听input输入框获得焦点的事件
预习任务:
课下学习更多的css属性
http://css.doyoe.com/
1css属性学习
2css定位盒子模型浮动
3写一些网页效果
4弹性布局 + 媒体查询 + rem
5各种造网站pc网站 + 手机网站)

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 150px;
height: 150px;
background: red;
/* padding: 10px; */
/* padding: 10px 20px; */
/* padding: 10px 20px 30px; */
/* padding: 10px 20px 5px 9px; */
/* padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px; */
/* border: 1px solid #000; */
border-right-color: blue;
border-right-style: solid;
border-right-width : 10px;
border-top-color: palevioletred;
border-top-style: solid;
border-top-width : 10px;
border-left-color: yellow;
border-left-style: solid;
border-left-width : 10px;
border-bottom-color: green;
border-bottom-style: solid;
border-bottom-width : 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>float</title>
<style>
.left {
float: left;
}
.box1 {
width: 150px;
height: 150px;
background: red;
}
.box2 {
width: 150px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div class="box1 left">
</div>
<div class="box2 left">
</div>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input[lb="zhanghao"] {
background: red;
}
input[placeholder="输入昵称"] {
background: yellow;
}
.main::after {
content: "建设银行卡"
}
</style>
</head>
<body>
<div class="box4">
<input type="text" lb="zhanghao" placeholder="请输入账号">
<input type="text" placeholder="输入昵称">
<input type="password" placeholder="输入密码">
<input type="submit" value="登 录">
</div>
<p class="main">
请输入卡片号:
</p>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位</title>
<style>
body {
margin: 0;
height: 1000px;
}
.width150 {
width: 150px;
height: 150px;
float: left;
}
.box1 {
background: yellow;
}
.box2 {
background: green;
position: relative;
left: 260px;
top: 30px;
z-index: -21;
}
.box3 {
background: red;
}
.box4 {
background: blue;
position: relative;
}
.box4-1 {
width: 80px;
height: 80px;
background: #8d8d8d;
position: absolute;
right: -20px;
top: -20px;
}
.box5 {
background: palevioletred;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1 width150"></div>
<div class="box2 width150"></div>
<div class="box3 width150"></div>
<div class="box4 width150">
<div class="box4-1"></div>
</div>
<div class="box5 width150"></div>
</body>
</html>

View File

@@ -0,0 +1,36 @@
position
relative 相对定位
相当原本初始位置进行移动,原本位置还在文档流中
absolute 绝对定位
当一个元素被设置绝对定位后,原本位置将会从文档流中被删除,其他元素占据他的原本位置。
参考对象:
1如果 被设置绝对定位 的元素有父级元素,且父元素已经定位,那么参考父元素进行定位
2如果 被设置绝对定位 的元素有父级元素,且父元素没有定位,那么参考浏览器边框
父元素已经定位:
relative, absolute, fixed
fixed 固定定位
参考对象:浏览器边框
盒子模型
padding 内边距
border 边框
margin 外边距
content 内容
计算规则:
元素的真实宽高 = content + (padding + padding) + (border + border)

View File

@@ -0,0 +1,6 @@
/* 专门用来清除浏览器默认的css样式 */
body,p {
margin: 0;
padding: 0;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/clear.css">
<title>仿百度效果</title>
<style>
.main {
width: 500px;
height: 313px;
background: url("./img/back.jpeg");
position: relative;
overflow: hidden;
}
.main_info {
position: absolute;
width: 100%;
height: 60px;
left: 0;
bottom: -60px;
background: #0000007d;
color: #fff;
padding-top: 8px;
padding-left: 8px;
box-sizing: border-box;
transition: all .3s ease;
}
.main_info span {
color: #8d8d8d;
}
.main:hover .main_info {
bottom: 0px;
}
.main:hover+.demo {
color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="main_info">
<p>第一次发帖必须是小福利</p>
<span>1920x1200</span>
</div>
</div>
<p class="demo">你好</p>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3动画</title>
<style>
.box {
width: 150px;
height: 150px;
background: red;
animation: changeColor 3s infinite alternate;
}
@keyframes changeColor {
/* 开始第一步
from {
box-shadow: 1px 1px 1px #000;
border-radius: 0;
background: red;
}
最后一步
to {
box-shadow: 1px 1px 24px #000;
border-radius: 100%;
background: yellow;
} */
0% {
box-shadow: 1px 1px 1px #000;
border-radius: 0;
background: red;
}
50% {
box-shadow: 1px 1px 1px #000;
border-radius: 50%;
background: blue;
}
100% {
box-shadow: 1px 1px 1px #000;
border-radius: 100%;
background: yellow;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雪碧图</title>
<style>
.box {
width: 42px;
height: 45px;
background: url("./img/icenter.png");
background-position: 0 -45px;
background-repeat: no-repeat;
}
</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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>头像旋转</title>
<style>
.main {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box {
position: absolute;
width: 240px;
height: 240px;
border-radius: 100%;
background: url("./img/back.png");
background-size: cover;
animation: changeBack 0.1s infinite;
}
img {
position: absolute;
width: 100px;
border-radius: 100%;
transition: all 1s ease;
left: 70px;
top: 70px;
}
img:hover {
transform: rotate(360deg)
}
@keyframes changeBack {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
<img src="./img/user.png" alt="">
</div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>媒体查询(响应式)</title>
<style>
ul,body{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.pc li {
float: left;
}
.wap {
display: none;
}
@media screen and (max-width: 750px) {
.wap {
display: block;
}
.pc {
display: none;
}
}
</style>
</head>
<body>
<ul class="pc">
<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>
<ul class="wap">
<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,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例学习</title>
<style>
.box {
width: 80px;
margin: 100px auto;
position: relative;
}
span {
position: absolute;
top: -18px;
right: -14px;
background: red;
color: #fff;
font-size: 12px;
border-radius: 5px;
padding: 2px 3px;
transform: scale(0.8);
animation: changeTop .8s infinite alternate;
}
@keyframes changeTop {
0% {
top: -18px;
}
100% {
top: -25px;
}
}
</style>
</head>
<body>
<div class="box">
GIF动态图
<span>new</span>
</div>
</body>
</html>

View File

@@ -0,0 +1,23 @@
1雪碧图
是什么?
将很多张小的图标放到一张大的背景图上
好处:
减少网络请求的次数,提高页面访问速度,节省用户流量
实现:
1建立空的盒子注意盒子的大小和你要显示的图片大小应该一致
2通过 backgroundbackground-position
css3动画
1定义动画 @keyframes 动画名称 {}
2使用动画

View File

@@ -0,0 +1 @@
# demo

View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex</title>
<style>
body {
margin: 0;
padding: 0;
}
.main {
display: flex;
justify-content: center;
}
.box {
width: 150px;
height: 150px;
background: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem</title>
<style>
body {
margin: 0;
}
/* html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
@media only screen and (min-width: 320px) {
html {
font-size: 17.1px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 20px !important;
}
}
@media only screen and (min-width: 768px) {
html {
font-size: 41px !important;
}
} */
.box {
width: 1.87rem;
height: 1.87rem;
float: left;
}
.box_1 {
background: yellow;
}
.box_2 {
background: green;
}
</style>
</head>
<body>
<div class="box_1 box">
</div>
<div class="box_2 box">
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.0-beta3/jquery.js"></script>
<script>
function setFont() {
let window_width = window.innerWidth;
let font_size = parseFloat(window_width / 3.75);
$('html').css('font-size', font_size);
}
$(window).on('resize', function () {
setFont();
});
setFont();
</script>
</body>
</html>

View File

@@ -0,0 +1,21 @@
元素计算后的真实宽高(px) = 你代码中设置的rem * 网站html标签的font-size(浏览器默认16px)
1: 通过 媒体查询 检查 用户手机的宽度,然后动态修改 font-size
2: 通过js来检测然后动态修改 font-size
flex 弹性盒子有12css属性
1: 有6 用在父容器
flex-direction 设置子元素是水平放置还是垂直放置
justify-content 设置元素在主轴(x)的对齐方式
align-items 设置y轴的对齐方式
flex-wrap 当一行放不下的时候,决定元素如何换行
2: 有6 用在子元素
order 设置子元素的排序数值越小越靠start位置
flex-grow 设置元素的所占空间比
align-self 设置单个元素进行不同其他元素的布局

View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 第一课</title>
</head>
<body>
</body>
<script>
// 定义了一个变量,变量的名字叫 name
// var a = 1000;
// var b = 1
// console.log(a); // 1000
// a = 99
// console.log(a); // 99
var a = 1;
var b = "1";
// + 有两个功能
// + 左右两边的数据类型必须都是number那么进行数学运算
// + 左右两边只要有一个不是number那么进行 字符串 拼接
// - 会将左右两边的数据强制转换成 number然后进行减法运算
// console.log(b - a);
// * \
// console.log(a / b);
// console.log(a % b);
// ++ 让一个变量 自增 1
// ++a 首先让变量自增1然后把自增后的a带入程序中运算
// a++ 首先把变量的数值带入程序运算然后等程序运算完成后变量再自增1
// -- 让一个变量 自减 1
// console.log(a++)
// console.log(a++)
// console.log(a)
// a+=b --> a = a + b
// console.log(a+=b); // *= -= /= %=
// += 一般用来实现字符串的累加
// = 赋值
// == 等于 只会去检查两个数值是否一样
// === 全(绝对)等于
// 同时会去检查两个数值是否一样,并且去检查两个数值的数据类型是否完全一样,
// 当两个满足才返回true否则false
// var a = 1;
// var b = "1";
// console.log( (a == b) + a );
// console.log( ++( (++a) === b) + --(a == b) );
</script>
</html>

View File

View File

@@ -0,0 +1,91 @@
概念:运行在客户端浏览器上的编程语言
JS(JavaScript) 前端语言,后端语言 (全栈语言)
作用:
以前:
1用来在网站上实现网页的动画效果并且实现用户交互
2用来表单验证一般用于登录注册的信息校验是否合法
现在:
什么都能干...
比如写app写电脑上的软件写网站写后端写硬件编程
Nodejs 底层采用c++编写上层对js暴露了一些了的接口
注意nodejs只是js运行在服务器上的一个运行环境
Js --> Nodejs(c++) --> 后端(各种数据库,操作系统[ windows linux(unix), 后端服务器(apache,tomact..) ]
1变量
概念:在程序内存中随意可以改变的数据就叫变量
定义:
通过系统关键字 var 变量名称 = 你要赋值给变量的数值
变量名命名的规则:
1不能以数字和特殊符号开头来命名命令
2: 特殊符号 $ _ 可以使用
3: 虽然可以使用中文命名,但是基本从来不用
4: 严格区分大小写
5: 驼峰命名法
6: 先定义,再使用变量
2常量
概念:在程序内存中不可随意改变的数据就叫常量
定义:
const 常量命 = 你要赋值给常量的数值
3: 数据类型
按照程序的功能对数据进行分类
1: string (字符串),凡是用双引号("")或单引号('')
2: number (数字), 0 ~ 9
3: null (空) 什么都没有
4: Undefined 未定义
// 这个先不讲
5: Object 对象
6: Array 数组
7: Function 函数(方法)
4运算符
1: 算术运算符
+ - * / %(求余)
2: (比较)逻辑运算符
继续完善 比较 和 逻辑 运算符
4js 写法
注意浏览器是自上而下解析我们的html里面的代码如果遇到js文件或者js代码
浏览器会停止继续解析去下载或者运行js直到完成js的代码后次啊会接着去渲染html和css
一般把js放在最底部所有html的最下面
1 <script> 你的js代码 </script>
2 <script src="./index.js"></script>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>for 循环语句</title>
</head>
<body>
<script>
// for 循环
// 概念:在你设定好的条件内帮你执行一个重复的任务
// () for循环的条件
// var num = [ 2,3,4,5,7,899,[ "4","5","6","7","8" ] ]
// for (var i = 0; i < num.length - 1; i++) {
// console.log(num[i]);
// }
// for (var j = 0;j<num[num.length - 1].length;j++) {
// console.log(num[num.length - 1][j]);
// }
// 实现 1 —— 1000 的累加和
// var he = 0;
// for (var i = 1; i<=1000; i++) {
// he += i
// }
// console.log(he);
// 求数组最大值
// var num = [ 1,3,4,2,5,6,7,8,9 ], max = 4;
// for(var i =0;i<num.length;i++) {
// if(max > num[i]) {
// max = num[i]
// }
// }
// console.log(max);
// 打印 99 乘法表
// var $99 = "";
// for (var i = 1; i< 10;i++) {
// for (var j = 1;j<=i;j++) {
// $99 += j + 'x' + i + '=' + i*j + "&nbsp;&nbsp;"
// }
// $99+= "<br/>"
// }
// document.write($99)
// 数组排序 从小到大
var list = [ 3,6,1,7,9,2,5,4 ] // 1,2,3,4,5,6,7,8
var ddd = list.sort(function(a,b){
return b - a
})
console.log(ddd);
</script>
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// if 条件语句
// if () {
// }
// if () {
// }else {
// }
// var fenshu = 98;
// if (fenshu < 60) {
// console.log("不及格");
// } else if ( fenshu >= 60 && fenshu<=70) {
// console.log("一般");
// } else if (fenshu > 70 && fenshu<=80) {
// console.log("良好");
// } else {
// console.log("优秀");
// }
// if() {
// if() {
// }else {
// }
// }else {
// }
// 三目运算符
// var a = "张三"
// if(a == "张三") {
// console.log("你好张三");
// }else {
// console.log("你不是张三");
// }
// a == "张三" ? console.log("你好张三") : console.log("你不是张三")
// var b = "hello";
// switch (b) {
// case "张三":
// console.log("张三");
// break;
// case "李四":
// console.log("李四");
// break;
// case "hello":
// console.log("hello");
// break;
// default:
// console.log("都不满足");
// break;
// }
</script>
</body>
</html>

View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// var a = 3, b = 4, c = 5;
// // 条件表达式两边的结果必须为 true才回返回 true否则都为flase
// console.log(a != b && b != c); //false true
// // 条件表达式两边的结果 只要有一个为true那么直接返回为true
// // 两个都为falsefalse
// console.log( a == c || b == a ); // true
// console.log( !(a==c) );
// 数组
// 概念类似数学里面的集合他是众多数据stringnumberbooleanundefinednullobjectarray的的集合
// 下标永远从0开始
// 定义 三种方式
// 1:
// var num = new Array();
// num[0] = 1;
// num[1] = "张三";
// num[2] = 3;
// num[10] = "我是10"
// console.log(num);
// 2
// var num = new Array(1,'张三',3,'我是10');
// console.log(num);
// 3
var num = [ 1,'张三',3,'我是10', '哈哈哈' ];
console.log(num);
// 数组的增删改查
// 增
// 1:通过下标新增数据 low
//num[5] = "23"
// 2: 获取数组长度访问数组添加新值
// num[num.length] = "sdddd"
// 3: 系统内置的方法 push 向最后追加数据
// num.push("push追加的数据","你好")
// 系统内置的方法 unshift 向开始追加数据
// num.unshift("unshift追加的数据","顶顶顶顶")
// console.log(num);
// 删
// 1: 构造新数组然后循环判断数据 low
// var del = '张三', newArr = [];
// num.forEach(function(val,index,arr){
// if(val != del) {
// newArr.push(val)
// }
// })
// 2: 使用 splice 对数组进行删除,注意 第一个参数可以是正负数
// num.splice(2,1,"splice添加的数据")
// console.log(num);
// 改
// 1
// num[1] = "李四"
// console.log(num);
// 2使用循环进行批量改操作
// 查
// 1
console.log(num[1]);
// 2: 使用循环进行批量查操作
</script>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>while</title>
</head>
<body>
<script>
//var i = 10;
// while (i<10) {
// console.log(i);
// i++
// }
// do {
// console.log(i);
// i++
// } while (i<8);
// 使用 while 重写 99乘法表
// var i = 1, $99 = "";
// while (i< 10) {
// var j = 1;
// while(j<=i){ // j = 3
// $99 += j + 'x' + i + '=' + i*j + "&nbsp;&nbsp;";
// j++
// }
// $99+= "<br/>"
// i++
// }
// document.write($99)
</script>
</body>
</html>

View File

@@ -0,0 +1,4 @@
下节课对象函数document

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 事件</title>
</head>
<body>
<!-- <button onclick="buttonClick()" >点我</button> -->
<button>点我</button>
<script>
// 第一种定义事件的方法
// 不好的地方:
// function buttonClick() {
// alert("不要点我")
// }
// 第二种定义事件的方法
//
// document.querySelector("button").onclick = function () {
// document.querySelector("button").innerText = "不要点我1";
// }
// 第三种定义事件的方法
// document.querySelector("button").addEventListener("click",function(){
// alert(1)
// })
// document.querySelector("button").addEventListener("click",function(){
// alert(2)
// })
// 使用js获取元素的几种方法
// document.getElementById
// document.getElementsByClassName
// document.getElementsByTagName
// document.getElementsByName
// document.querySelector(".name p");
// document.querySelectorAll(".name p");
</script>
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>function</title>
</head>
<body>
<script>
// 定义了一个方法
function getUsername(price,color) {
var newcart = "你给了我"+ price + "万元钱,你想买"+color+"色的车!!";
return newcart
}
// 使用 函数名()
//getUsername()
// 函数名() 表示立即执行函数里面的代码
// 函数名 表示 把函数里面的所有代码块 作为参数赋值给其他的变量
// var names = getUsername;
// names()
// 方法 分为两类:
// 按照参数进行分类
// 1: 无参函数
// 2: 有参函数
let mycart = getUsername(120,'黑');
console.log(mycart);
// 按照是否具有函数名分类
// 1:匿名函数
// 2:正常的函数
// var getcart = function () {
// console.log("获取车的函数");
// }
// function getcart () {
// console.log("获取车的函数");
// }
// getcart()
// var a = 1;
// // var b = 2
// function carts () {
// var b = 2;
// // b = 2;
// console.log(b)
// }
// console.log(a) // 1
// carts() // 2
// console.log(b) // 2
// 定义在函数内部的变量,他是那个函数独有的,作用域仅限在函数内部使用,外部无法使用
// 变量 有作用域
// 局部作用域(变量)
// 全局作用域(变量)
// 当不使用var来定义变量的时候浏览器会把变量进行变量提升提升到全局
</script>
</body>
</html>

View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对象 object</title>
</head>
<body>
<script>
// var obj = new Object();
// obj.names = "张三"
// obj.age = "18"
// console.log(obj);
// var obj = new Object({
// names: '张三',
// age: "18"
// });
// var obj = {
// names: '张三',
// age: "18"
// }
// console.log(obj);
var cart = {
price: '25万',
color: 'red',
speed: '7',
opendoor: function() {
console.log("打开车门");
},
start: function () {
console.log("点火");
},
run: function () {
console.log("上路跑");
}
}
cart.opendoor()
cart.start()
cart.run()
// json
// 概念 object + array
// 他是一种描述数据格式和结构的方法,以前用 xml
// 作用:
// 前后端分离后后端把数据构造成json格式给前端前端拿到json渲染页面
var json1 = {
status: 200,
result: [
{
id: 1,
title: '今天天气很好'
},
{
id: 2,
title: '今天天气很好2222'
}
]
}
console.log(json1.result[0].title);
</script>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>乞丐版hao123</title>
</head>
<body>
<select class="search-list" id="">
<option value="null">--请选择搜索引擎--</option>
<option value="https://www.baidu.com/s?wd=">百度</option>
<option value="https://www.google.com/search?q=">谷歌</option>
<option value="https://www.sogou.com/web?query=">搜狗</option>
<option value="https://yandex.com/search/?text=">Yandex</option>
</select>
<input type="text" placeholder="请输入关键词">
<input type="button" value="搜索">
<script>
document.querySelector("input[type='button']").onclick = function () {
var select = document.querySelector(".search-list");
var select_value = select.options[select.selectedIndex].value;
var keyword = document.querySelector("input[type='text']").value
if(select_value == "null" || keyword.length == 0) {
alert("搜索引擎和关键词都需要填写")
}else {
open(select_value+keyword)
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户登录</title>
</head>
<body>
<div class="login">
<input class="username" type="text" placeholder="请输入用户名"> <br>
<input class="userpwd" type="password" placeholder="请输入密码"> <span>显示/隐藏</span> <br>
<button>登 录</button>
</div>
<script>
var showstatus = true;
document.querySelector("button").onclick = function () {
var username = document.querySelector(".username").value;
var userpwd = document.querySelector(".userpwd").value;
if (username == "2271608011" && userpwd == '123456') {
alert("login success")
}else {
alert("login error")
}
}
document.querySelector("span").onclick = function () {
if(showstatus){
//console.log("显示密码");
(document.querySelector(".userpwd")).setAttribute("type","text");
showstatus = false
}else {
//console.log("隐藏密码");
(document.querySelector(".userpwd")).setAttribute("type","password");
showstatus = true
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tabs</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.main{
width: 400px;
margin: 100px auto;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
padding: 5px 10px;
}
.tabs_content ul {
padding-left: 10px;
}
.tabs_content li {
display: none;
}
.content_on {
display: block !important;
}
.title_on {
color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="tabs_title">
<ul>
</ul>
</div>
<div class="tabs_content">
<ul>
</ul>
</div>
</div>
<script>
var title = [ '公告','论坛','规则','安全','公益' ]
var content = [ '公告的内容','论坛的内容','规则的内容','安全的内容','公益的内容' ]
var titleArray = document.querySelectorAll(".tabs_title li");
var contentArray = document.querySelectorAll(".tabs_content li");
// function changeTitle (index) {
// for (var i =0;i<titleArray.length;i++) {
// titleArray[i].className = ""
// contentArray[i].className = ""
// }
// titleArray[index].className = "title_on"
// contentArray[index].className = "content_on"
// }
function renderli () {
// 遍历所有元素绑定 onmouseover 事件
for (let i =0;i<titleArray.length;i++) {
titleArray[i].onmouseover = function () {
// 遍历所有元素清除样式
for (var j =0;j<titleArray.length;j++) {
titleArray[j].className = ""
contentArray[j].className = ""
}
// 为你悬浮的元素设置样式
titleArray[i].className = "title_on"
contentArray[i].className = "content_on"
}
}
}
renderli()
</script>
</body>
</html>

View File

@@ -0,0 +1,18 @@
对象
概念:对象是具有自身的属性和方法的集合
存储数据:
key: value
function 方法,函数
概念:函数 是程序中某些具有相同功能或者属性的代码的集合
事件:
概念:用户在页面上的一些交互操作,比如键盘,鼠标,浏览器的一些动作

View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
/* .more {
display: none;
} */
</style>
</head>
<body>
<div class="main">
</div>
<div class="page">
<span class="next"> > 加载更多 < </span>
<span style="display: none;">...正在请求,请稍后</span>
</div>
<script>
// 1拿出电话 创建ajax请求
// var ajax = new XMLHttpRequest();
// // 2: 输入号码 设置ajax请求参数
// ajax.open("GET","http://127.0.0.1:9999/api/v1.0/index");
// // 3: 拨打电话 发送ajax请求
// ajax.send();
// // 对打电话的状态进行监听 监听ajax是否发送成功
// ajax.onreadystatechange = function () {
// if(ajax.readyState == 4 && ajax.status == 200) {
// // JSON.parse 把string格式的数据转换为json格式
// // JSON.stringify 把json格式转换为string格式
// var list = JSON.parse(ajax.responseText);
// for (var i =0;i<list.data.length;i++) {
// document.querySelector(".main").innerHTML += `
// <div >
// <a href="${list.data[i].href}">
// <h3>${list.data[i].title}</h3>
// <img src="${list.data[i].imgurl}"/>
// </a>
// </div>
// `
// }
// }else {
// if(ajax.status == 0){
// alert("抱歉, 您的网络不好请重试")
// }
// }
// }
var current_page = 1;
function getdata() {
console.log(this);
$.ajax({
type: 'GET',
url: 'http://127.0.0.1:9999/api/v1.0/index',
data: {
page : current_page
},
success: function (result) {
result.data.forEach(function(value){
$(".main").append(` <div > <a href="${value.href}"> <h3>${value.title}</h3> <img src="${value.imgurl}"/> </a> </div>`)
});
//$("span:last").addClass("more")
$("span:last").css({
"display": "none"
})
},
error: function (err) {
alert("抱歉,您的网络不好")
}
})
}
// 加载更多被点击的时候
$(".next").on("click",function() {
//$(".more").removeClass("more")
$("span:last").css({
"display": "inline-block"
})
current_page += 1
getdata()
})
getdata()
</script>
</body>
</html>

View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.main{
width: 400px;
margin: 100px auto;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
padding: 5px 10px;
}
.tabs_content ul {
padding-left: 10px;
}
.tabs_content li {
display: none;
}
.content_on {
display: block !important;
}
.title_on {
color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="tabs_title">
<ul>
</ul>
</div>
<div class="tabs_content">
<ul>
<!-- <li class="content_on">安全的内容</li>
<li>公告的内容</li>
<li>最新的内容</li>
<li>热点的内容</li> -->
</ul>
</div>
</div>
<script src="./tabs.js"></script>
<script>
var title = [ '公告','论坛','规则','安全','公益' ]
var content = [ '公告的内容','论坛的内容','规则的内容','安全的内容','公益的内容' ]
new Tabs({
titleArray: title,
contentArray: content
});
</script>
</body>
</html>

View File

@@ -0,0 +1,104 @@
// 自执行函数
// 形成一个独立的作用域
// 通过原形模拟类
// 注意 以前js没有类的概念现在有
// 以前没有类的概念,但是我们可以通过其他方法来模拟类
// 挂载到window上的方法或者变量都将成为全局变量|方法
(function (bom,dom) {
// 插件的默认配置
var defaultOption = {
// 内容被激活的类名
contentActive: "content_on",
// 标题被激活的类名
titleActive: "title_on",
titleFather: ".tabs_title",
contentFather: ".tabs_content"
};
function tabs(params) {
if(typeof params == "object"
&& params.hasOwnProperty("titleArray")
&& params.hasOwnProperty("contentArray")) {
// 将用户传递过来的参数进行保存,保存到 tabs中
///成tabs的私有属性然后下面的其他方法就可以使用了
this.option = {
titleArray: params.titleArray,
contentArray: params.contentArray
};
// 不必要的参数,如果用户传递了标题和内容的激活类名,那么采用用户的,如果没传
// 那么采取系统默认的
defaultOption.titleActive = params.titleActive || defaultOption.titleActive
defaultOption.contentActive = params.contentActive || defaultOption.contentActive
// 不用 + 进行字符串拼接
this.dom = {
titleFather: document.querySelector(`${defaultOption.titleFather} ul`),
contentFather: document.querySelector(`${defaultOption.contentFather} ul`)
}
this.init();
}else {
//console.error("抱歉,插件运行需要参数")
throw new Error("抱歉,插件运行需要参数");
}
}
tabs.prototype = {
// 插件初始化方法
init() {
this.renderPage();
this.dom.titleChildenli = document.querySelectorAll(`${defaultOption.titleFather} ul li`)
this.dom.contentChildenli = document.querySelectorAll(`${defaultOption.contentFather} ul li`)
this.bindEvent()
},
// 渲染数组成为页面
renderPage() {
var title = "",content="";
for(var i = 0;i<this.option.titleArray.length;i++) {
title += `<li class="${ i == 0 ? defaultOption.titleActive : '' }">${this.option.titleArray[i]}</li>`
content += `<li class="${ i == 0 ? defaultOption.contentActive : '' }">${this.option.contentArray[i]}</li>`
}
this.dom.titleFather.innerHTML = title
this.dom.contentFather.innerHTML = content
},
// es5 老旧的js语法
// es6, 7 => `` let
// babel 将最新的js语法转换为 es5(浏览器能认识的兼容性比较好的)
bindEvent() {
var self = this;
for(let i= 0;i<this.dom.titleChildenli.length;i++) {
this.dom.titleChildenli[i].onmouseover = function () {
for(let j= 0;j<self.dom.titleChildenli.length;j++) {
self.dom.titleChildenli[j].className = ""
self.dom.contentChildenli[j].className = ""
}
self.dom.titleChildenli[i].className = defaultOption.titleActive;
self.dom.contentChildenli[i].className = defaultOption.contentActive;
}
}
}
}
bom.Tabs = tabs
})(window,document)

View File

@@ -0,0 +1,39 @@
1后端渲染开发网站
前端20% (就是写页面工作没有技术含量很low)
后端80% (写功能 + 写页面)
问题:
1页面中各种编程语言代码都杂烩在一起导致项目升级的时候代码不容易修改
2项目需要升级迭代的时候前后端项目版本不统一导致各种问题交流成本太高改起来太难
2前后端分离开发网站 (ajax + json)
前端50% 60% (写页面 + 写功能)
后端50% 40% (写数据)
ajax
概念:一种无刷新(局部刷新)更新网站的技术
主要作用前端使用ajax技术和后端进行数据交互 (json 来描述数据(想法)) 前后端分离
ajax 跨域
1: 跨域 是谁导致的?
2: 为什么需要解决跨域,如何解决跨域?有几种方法解决?
win + r
cmd 回车

View File

@@ -0,0 +1,29 @@
const express = require('express')
const app = express()
app.get('/back/jsonp', function(req, res) {
var fun = req.query.fun;
console.log("前端函数名为:"+fun)
var listdata = {
status: 200,
message: "nodejs 后端,请求成功",
data: [
{
id: 1,
title: "新闻1"
},
{
id: 2,
title: "新闻2"
}
]
};
res.end(`${fun}(${JSON.stringify(listdata)})`)
//getNodeJsData(listdata)
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})

View File

@@ -0,0 +1,15 @@
{
"name": "back",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: 'http://127.0.0.1/myphp.php',
type: 'GET',
success: function(res) {
console.log(JSON.parse(res));
},
error: function(err) {
console.log("网络请求失败");
}
})
</script>
</body>
</html>

View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> ajax 跨域 </title>
</head>
<body>
<script>
// ajax 跨域
// 导致的原因:浏览器的 [ 同源策略 ] 规则
// 作用为了保护后端api接口
// 同源策略 规则:
// 会检查你的前端的访问地址和ajax将要访问的接口地址 是否一致?
// 前端http://127.0.0.1:5500/2019-05-05/ajax.html
// 后端http://127.0.0.1:9999/api/v1.0/index
// 怎么检查?
// 1: 协议是否完全相同 (http协议 默认端口80https协议 默认端口 443)
// 2: 域名是否完全相同
// 3: 端口是否完全相同
// 是否完全一致,只要有一个不一致,那么就会导致跨域,浏览器报错信息如下:
// Access-Control-Allow-Origin
// 解决跨域
// 1: 后端允许跨域(CORS)
// 2: jsonp 跨域 披着羊皮骗过保安
// 原理
// 1: 浏览器只会去拦截ajax请求但是不会拦截资源文件请求(js,css,html,img,font,mp4)
// 实现
// 发请求:前端使用 script 文件请求绕过浏览器的安全检查,发送函数名给后端
// 接受数据:后端接受函数名,然后调用函数把数据传递给前端
// 3: 服务端代理
// A(自己的前端) ---> C(别人的后端) 跨域
// A(自己的前端) ---> B(自己的后端) 也存在跨域,但是可以设置 CORS
// B(自己的后端) ---> C(别人的后端) 完全访问
// C(别人的后端) --数据---> B(自己的后端) --数据---> A(自己的前端)
</script>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
</head>
<body>
<script>
function getNodeJsData(res) {
console.log(res)
}
</script>
<script src="http://127.0.0.1:3000/back/jsonp?fun=getNodeJsData"></script>
</body>
</html>

View File

@@ -0,0 +1,29 @@
@font-face {
font-family: qj;
src: url("../font/qianqian.ttf")
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
body,ul,h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,15 @@
.header {
display: flex;
justify-content: space-between;
padding: .05rem .1rem;
height: .4rem;
align-items: center;
}
.header p{
width: 100%;
text-align: center;
}
.header .icon {
width: .3rem;
height: .3rem;
}

View File

@@ -0,0 +1,4 @@
body {
background: linear-gradient(180deg, #148beccc, #b4b4f1);
color: #fff;
}

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>天气预报</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<script src="http://at.alicdn.com/t/font_1152627_d7uz2eiah9c.js"></script>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/index.css">
<style>
</style>
</head>
<body>
<div class="main">
<div class="header">
<p class="title_city">合肥</p>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use>
</svg>
</div>
<div class="content">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/wather.js"></script>
<script>
new Weather();
</script>
</body>
</html>

View File

@@ -0,0 +1,59 @@
(function (designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem, rootStyle;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
}
;
if (width > maxWidth) {
width = maxWidth;
}
//与淘宝做法不同直接采用简单的rem换算方法1rem=100px
var rem = width * 100 / designWidth;
//兼容UC开始
rootStyle = "html{font-size:" + rem + 'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if (!document.getElementById('rootsize')) {
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id = 'rootsize';
}
if (rootItem.styleSheet) {
rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
} else {
try {
rootItem.innerHTML = rootStyle
} catch (f) {
rootItem.innerText = rootStyle
}
}
//兼容UC结束
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(375, 750);

View File

@@ -0,0 +1,41 @@
(function(window,document) {
function weather () {
this.init()
}
weather.prototype = {
init () {
console.log("init");
this.get("http://127.0.0.1:3000/getWeather",{
cityname: '合肥',
},function(result) {
console.log(result);
})
},
get (url,params,callback) {
$.ajax({
type: 'GET',
url: url,
data: params,
success: function (res) {
callback(res)
},
error: function (err) {
throw new Error(JSON.stringify(err))
}
})
}
}
window.Weather = weather
})(window,document)

View File

@@ -0,0 +1,25 @@
const express = require('express');
const request = require('request')
const app = express()
var BaseUrl = {
url: 'http://v.juhe.cn/weather/index',
appkey: '62a1ba7a26c06fa3720a8e91c103d5b5'
}
app.all("*",function(req,res,next){
res.header('Access-Control-Allow-Origin', '*');
next();
})
app.get('/getWeather', function(req, res) {
var cityName = req.query.cityname;
var url = `${BaseUrl.url}?key=${BaseUrl.appkey}&cityname=${encodeURI(cityName)}`;
request(url,function(error, response, body) {
res.json(JSON.parse(body))
})
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})

View File

@@ -0,0 +1,16 @@
{
"name": "service",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"request": "^2.88.0"
}
}

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Vue.js </title>
<script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<!-- 所有的html代码都必须要包含在这个顶级父元素内部
view 层
-->
<div id="lb">
{{ names }}
{{age}}
<ul>
<li v-for="a in list">{{a.title}} {{a.id}}</li>
</ul>
</div>
<script>
// Vue 就是 vm
new Vue({
el: "#lb", // 告诉Vue你需要监听的页面顶级父元素的id
data: { // Vue开发中所有的变量基本上都放在data中 数据层 model
names: "刘兵",
age: 14,
list: [
{
id: 1,
title: '新闻1'
},
{
id: 2,
title: '新闻2'
},
{
id: 3,
title: '新闻3'
}
]
}
})
</script>
</body>
</html>

View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue 指令</title>
<script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<a :href="address" target="_blank">百度</a>
<img :src="vueLogo" :alt="message">
<button v-on:click="clickMore">点我</button>
<p v-html="h2">
</p>
<input @input="clickTwo" v-model="UserInfo.UserName" type="text" placeholder="请输入账户名">
<p v-if="showStatus">未登录</p>
<p v-else>已经登录</p>
<button @click="changeLoginStatus">切换登录状态</button>
<p v-for="(a,index) in list" :class="index == 0 ? 'hello' : '' "> {{a}} | {{ index }}</p>
</div>
<script>
/**
*
* v-bind: 把莫个变量绑定到标签的莫个属性上
* 简写 ":"
*
* v-on: 为莫个标签绑定事件
* 简写:@
*
* v-html 把字符串解析成html渲染到页面上类似 innerhtml
*
* v-model: 专门用来获取存放输入框里面用户输入的数据
*
* v-if : 条件判断,根据条件的真和假决定显示还是隐藏元素
* v-else
*
* v-if
*
* v-else-if
* v-else-if
* v-else
*
* v-for 专门用来变量数组渲染页面的
*
*/
new Vue({
el: "#app",
data: {
message: '你好我是Vue',
address: 'http://www.baidu.com',
vueLogo: 'https://cn.vuejs.org/images/logo.png',
h2: "<h2>我是h2标签</h2>",
UserInfo: {
UserName: null
},
showStatus: true,
list: [
4,5,7,2,4,7
]
},
// Vue开发中基本上所有的事件处理函数都放在 methods: {} 里面
methods: {
clickMore() {
alert(this.message)
//this.clickTwo()
},
clickTwo() {
console.log(this.UserName)
},
changeLoginStatus() {
this.showStatus = !this.showStatus
}
},
});
</script>
</body>
</html>

View File

@@ -0,0 +1,29 @@
Vue.js
概念:前端 m(model)v(view)v(view)m(model) 框架
model: 数据(ajax请求后返回的json)
viewmodel (vm): 数据和页面的中间层 在ajax数据请求成功后每次都需要获取父元素然后遍历数据再innerhtml到页面上
view 视图层
后端mvc
model(数据) view(视图 html + css + js) controller(控制器)
1: view 就是前端用户看到的页面
2: controller 接受用户在view层产生的具体意图然后把用户的意图转发到具体的model交给model来处理
3model 主要和数据库进行打交道,完成 controller 传过来的意图
view ---> controller ----> model
model ---> controller --> view
Vue用法
1传统js用法
2用过node来使用

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue 天气预报</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in futureList">{{item.temperature}}</li>
</ul>
</div>
<script>
//
new Vue({
el: '#app',
mounted() {
this.getData()
},
data:{
ajaxUrl : 'http://103.91.219.160:3000/getWeather',
futureList: []
},
methods: {
getData() {
this.$http.get(this.ajaxUrl, {
params: {
cityname: '合肥'
}
})
.then( function(success) {
this.futureList = success.data.result.future
},function(error) {
console.log(error)
})
}
},
})
</script>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入便签内容" v-model="UserMessage">
<button @click="addList">提交</button>
<div v-if="listData.length==0">
暂无便签内容...
</div>
<ul v-else>
<li v-for="(item,index) in listData">
{{ index+1 }} : {{item}}
<span @click="deleteList(index)"> x </span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
listData: [],
UserMessage: null
},
mounted () {
this.listData = this.getLocalStorage("localData")
},
methods: {
addList () {
this.listData.push(this.UserMessage)
this.setLocalStorage(this.listData)
this.UserMessage = null
},
deleteList(index) {
this.listData.splice(index,1)
this.setLocalStorage(this.listData)
},
getLocalStorage(key) {
return JSON.parse(localStorage.getItem(key))
},
setLocalStorage(value) {
localStorage.setItem("localData",JSON.stringify(value))
}
},
})
</script>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
body,ul{
margin: 0;
padding: 0;
}
body,html,#app,.main {
width: 100%;
height: 100%;
}
ul li {
list-style: none;
}
.onActive {
color: red;
}
.weight {
font-weight: bolder
}
</style>
</head>
<body>
<div id="app">
<div class="main" :style="{background: `url(${currents})`}">
<ul>
<li v-for="item in imgList">
<img :src="item.url" alt="" @click="changeImg(item.url)">
</li>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
currents: 'https://yanxuan.nosdn.127.net/43c9272008bd5af7d259eb9afdcf9c68.jpg?imageView&thumbnail=420x420',
imgList: [
{ url: 'https://yanxuan.nosdn.127.net/43c9272008bd5af7d259eb9afdcf9c68.jpg?imageView&thumbnail=420x420' },
{ url: 'https://yanxuan.nosdn.127.net/3e95a7c4c5d78f9ad6e925d8a3248af0.jpg?imageView&quality=95&thumbnail=420x420' },
{ url: 'https://yanxuan.nosdn.127.net/a4f49393001daef6c1ae9d9dcb2614c9.jpg?imageView&quality=95&thumbnail=420x420' }
]
},
methods: {
changeImg(imgurl) {
this.currents = imgurl
this.changeHEllo()
}
},
computed: { // computed 会缓存计算结果,下次再被调用的时候不需要重新计算,一般用在一些计算上,例如购物车商品总价的计算
changeHEllo() {
console.log("changeHEllo")
}
},
})
</script>
</body>
</html>

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<lb-children @father-enent="fatherClick" :wdfewefe="msg"></lb-children>
<div class="content">主体内容</div>
<lb-footer></lb-footer>
</div>
<script>
// 父组件可以向子组件通过 props传递数据
// 但是 反过来 子组件 没有办法直接访问或者修改父组件里面的任何数据
// 子组件需要通过事件向父组件提交数据
// 1局部注册组件
// 1 先定义
// 2: 在Vue里面挂载一下
var children = {
props: [ "wdfewefe" ],
template: `
<div class="footer">
<ul>
<li v-for="item in wdfewefe">
<img :src="item.url" alt="">
<p>{{ item.title }}</p>
</li>
</ul>
<button @click="submit()">点我</button>
</div>`,
data() {
return {
titlejubu: '局部注册组件'
}
},
methods: {
alerts() {
alert("局部注册")
},
submit() {
this.$emit("father-enent","我是子组件")
}
},
}
// // 2: 全局注册组件
// Vue.component("lb-footer",{
// data () {
// return {
// list: [
// { url: './img/book.png',title: '书架' },
// { url: './img/chat.png',title: '书城' },
// { url: './img/man.png',title: '' },
// { url: './img/music.png',title: '轻音乐' },
// { url: './img/user.png',title: '我的' }
// ]
// }
// },
// template: `<div class="footer">
// <ul>
// <li v-for="item in list">
// <img :src="item.url" alt="">
// <p>{{ item.title }}</p>
// </li>
// </ul>
// </div>`
// })
new Vue({
el: '#app',
data: {
msg: [
{ url: './img/book.png',title: '书架' },
{ url: './img/chat.png',title: '书城' },
{ url: './img/man.png',title: '' },
{ url: './img/music.png',title: '轻音乐' },
{ url: './img/user.png',title: '我的' }
]
},
methods: {
fatherClick(res) {
console.log(res)
}
},
components : {
'lb-children': children
}
})
</script>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script src="https://unpkg.com/vue-router@3.0.6/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">去底部</router-link>
<router-link to="/bar">去头部</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 0. 如果使用模块化机制编程导入Vue和VueRouter要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>底部</div>' }
const Bar = { template: '<div>头部</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.on {
color: red;
}
</style>
</head>
<body>
<div class="lb">
<h2> {{ hello }} </h2>
<a :href="baidu"> {{ hello }} </a>
<img :src="img" alt="">
<p v-html="texts">
</p>
<input v-model="UserName" type="text" placeholder="用户名字">
<button @click="getUserName">提交</button>
<ul>
<li v-for="(item,index) in list" :class=" index == 0 ? 'on' : '' "> {{ index }} | {{ item.title }} </li>
</ul>
<p v-if="showLogin == 1"> 今天天气不错1</p>
<p v-else-if="showLogin == 2">没有登录2</p>
<p v-else-if="showLogin == 3 ">没有登录3</p>
<p v-else=>没有登录4</p>
<p v-show="showLogin == 2">v-show 2</p>
<h2>{{ getname }}</h2>
<!-- <div>
<slot name="header"></slot>
</div>
<h1 slot="header">Here might be a page title</h1> -->
</div>
<script>
// vue 指令
// v-bind: 帮变量绑定到 标签的属性上
// 简写 ” : “
// v-html : 将变量里面的html渲染到页面
// v-text: ....
// v-model 获取输入框的的内容实时存放到变量里面
// v-on: 为标签绑定事件(点击事件,悬浮事件...)
// 简写:@
// v-for 渲染数组到页面
// v-if v-else 根据条件决定是否显示元素
// 元素不符合条件的时候会把元素从html里面删除
// v-show 和v-if 类似,但是只是把不符合条件的元素隐藏起来 none
var vm = new Vue({
el: ".lb",// view
data: { // model
message: "测试哦",
hello: "defdewfew ",
baidu: 'http://www.baidu.com',
img: 'https://images.gitee.com/uploads/images/2018/1226/113456_cd3d317c_1305863.png',
texts: '<h2>我是h2</h2>',
UserName: null,
list: [
{ id: 1, title: '哈哈哈' },
{ id: 2, title: '顶顶顶顶' }
],
watchData: null,
showLogin: 3
},
watch: {
watchData(newVal,oldVal) {
console.log("newVal: ",newVal)
console.log("oldVal: ",oldVal)
}
},
computed: {
getname () {
return this.UserName
}
},
// 所有的方法必须放到 methods
methods: {
getUserName () {
console.log("用户输入的:",this.UserName)
this.setUserName()
},
setUserName() {
this.UserName = "刘兵"
console.log("setUserName: ", this.UserName)
}
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,17 @@
Vue m(model) v (view) vm (view model)
m(model): json 数据
vm (Vue)
view 页面
m(model 数据) v(view 视图) c(controller 控制器)
v(view 视图) 界面
m(model 数据):负责和数据库进行交互
c(controller 控制器) v, c的中间层

View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

View File

@@ -0,0 +1,4 @@
/build/
/config/
/dist/
/*.js

View File

@@ -0,0 +1,29 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

View File

@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

View File

@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

View File

@@ -0,0 +1,92 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

View File

@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

View File

@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

View File

@@ -0,0 +1,7 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

View File

@@ -0,0 +1,76 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

View File

@@ -0,0 +1,4 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myvueapp</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -0,0 +1,73 @@
{
"name": "myvueapp",
"version": "1.0.0",
"description": "这是我的第一个Vue程序",
"author": "bmy <2271608011@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

View File

@@ -0,0 +1,25 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/index">index</router-link>
<router-link to="/about">about</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,19 @@
<template>
<div class="about">
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg: '关于我页面'
}
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,32 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: '首页页面'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -0,0 +1,15 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

View File

@@ -0,0 +1,21 @@
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
name: 'index',
component: Index
},
{
path: '/about',
name: 'index',
component: About
}
]
})

View File

@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue 组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.on {
color: red;
}
</style>
</head>
<body>
<div id="app">
<input v-model="userInput" type="text" placeholder="输入备忘内容">
<button @click="addList">提交</button>
<ul v-if="listArray.length != 0">
<li v-for="(item,index) in listArray"
:key="index"
@click="changeOn(index)"
:class=" index == currentIndex ? 'on' : '' ">
{{ item }}
<span @click="deleteTag(index)"> x </span>
</li>
</ul>
<p v-else>抱歉,没有数据</p>
<!-- <aa-button @father="getChildEvent" :a="list"/> -->
<v-jubu></v-jubu>
</div>
<script>
// 实现一个任务便签
// 组件 ?积木
// 全局注册
// 局部注册
// 父子组件
// 父子组件的数据传递
// 两种方式:
// 父 --> 子 props
// 子 --> 父 ,不允许 props但是可以通过 $emit 触发事件来回调 提交数据给父
// 官方文档地址https://cn.vuejs.org/v2/api/#vm-emit
// 局部注册
// 1: 先定义局部组件
// 2: 在你需要用的地方(父组件)进行注册,然后使用。
// 全局注册
// 官方文档地址https://cn.vuejs.org/v2/guide/components-registration.html
// Vue.component('aa-button', {
// props: ['a','b'],
// data () {
// return {
// }
// },
// methods: {
// hello() {
// this.$emit("father","aa-button 的数据")
// }
// },
// template: `
// <ul>
// <li @click="hello" v-for="(item,index) in a" :key="index"> {{ item.title }} </li>
// </ul>
// `
// });
// 局部注册
var childenComponents = {
template: `<h2>{{ msg }}</h2>`,
data () {
return {
msg: "我是局部注册的组件"
}
},
methods: {
}
};
new Vue({
el: '#app',
data : {
userInput: null,
listArray: [],
currentIndex: null,
list: [
{ id: 1,title: '哈哈哈哈' },
{ id: 2,title: '顶顶顶顶' }
],
listArr: [
{ id: 1,title: '哈哈哈哈wwwww' },
{ id: 2,title: '顶顶顶顶www' }
]
},
created() {
console.log(this.userInput)
},
methods: {
addList() {
this.listArray.push(this.userInput)
this.userInput = null
},
deleteTag(key) {
console.log(key)
this.listArray.splice(key,1)
},
changeOn (key) {
this.currentIndex = key
},
getChildEvent (key) {
console.log("父组件接收到子组件传递过来的数值为:", key)
}
},
components: {
'v-jubu': childenComponents
},
})
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More