# 1、需要区分函数传参中传递的是值还是引用？

# 1、问题

首先是一个问题

function changeObjProperty(o){
            o.sitUrl = 'http://www.baidu.com';
            o = new Object();
            o.sitUrl = 'https://taou.cn/DdCw';
        }
        let websit = new Object();
        changeObjProperty(websit);
        console.log(websit.sitUrl)

答案打印 baidu 为什么不打印Google ？我开始寻思为什么不是两个都打印？

# 2、解答

分成两种 1）基本类型值　　在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量(命名参数或arguments对象的一个元素)

2）引用类型值（就是这个问题）

向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部

当在函数内部重写引用类型的形参时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁

希望可以解除你的疑惑留下我的 github 这里有你需要的一切欢迎关注交流 https://github.com/huanhunmao

<**********这是分割线>

# 2、css动画基础实用教程

# 1、基本操作

旋转操作
模块

# 2、回流（重排）和重绘

# 3、动画基础(transition)

# 4、动画基础(animation)

# 5、时间函数详解和举例

例子 html部分

<div class="loading">
   </div>

css部分

 .loading {
            width: 64px;
            height: 64px;
            background: url(./imgs/loading.jpg) no-repeat;
            animation: load 2s steps(12) infinite;
        }
        
        @keyframes load {
            100% {
                transform: rotate(360deg);
            }
        }

注意 steps(12) 这个写12 因为图片有12个小格子
实现效果转起来比较漂亮的 loading

# 6、动画状态的监听和思考

html

<div class="loading"></div>

css

.loading {
        width: 64px;
        height: 64px;
        background: url(./imgs/loading.jpg) no-repeat;
        animation: load 2s steps(12) 2;
      }

      @keyframes load {
        100% {
          transform: rotate(360deg);
        }
      }

js

let $loading = document.querySelector(".loading");
    //监听 动画开始
    $loading.addEventListener("animationstart", () => {
      console.log("runstart");
    });
    //监听动画结束
    $loading.addEventListener("animationend", () => {
      console.log("runend");
    });
    //监听动画的重复 用的比较少
    $loading.addEventListener("animationiteration", () => {
      console.log("iteration");
    });

在另外一个例子 transition.html中监听

# 7、实践篇

7-1 、落雨到红包雨实现

思路
1、落雨 是先加速后减速的过程
2、先写一个雨滴，再写其他的雨滴

代码拿走不谢

<!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>
      body,
      html {
        width: 100%;
        height: 100%;
      }
      .content {
        position: relative;
        background: #f2f2f2;
        height: 100%;
        overflow: hidden;
      }
      .content .yudi {
          /* 第一个雨滴定位住 */
        position: absolute;
        width: 4px;
        height: 6px;
        background: #ccc;
        clip-path: ellipse(10% 30% at 50% 50%);
        /* 放大/缩小 */
        transform: scale(6);
        /* 现在 不知道选什么时间函数  暂且勇 ease-in占位 */
        animation: drops 1.2s cubic-bezier(0.54, 0, 0.18, 0.34) infinite;

        /* 动画未启动时,不可见 */
        opacity: 0;
      }

      @keyframes drops {
        0% {
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          /* x y z 方向  */
          /* 1.vw：1vw等于视口宽度的1%。
        2.vh：1vh等于视口高度的1%。 */
          transform: translate3d(10px, 100vh, -10px);
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="yudi"></div>
    </div>
  </body>


  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  <script>
    //   使用jq 选中 content
      let $content = $('.content')
    // 初始化雨滴数
    let initNumber = 0;
    for(let i=0; i < 30; i ++){
        let lefts = Math.floor(Math.random()* 5 + 2)
        // 延时参数  记得Math.random() 后面一定记得加上括号
        let delay = Math.floor(Math.random() * 50 + 2)
        initNumber += lefts
        // jq创建一个 div 并使用 addClass添加class
        // 使用 .css 写效果 分布开
        let $div = $('<div/>').addClass('yudi').css({
            'left' :`${initNumber}%`,
            'top' : `${lefts}%`,
            // 设置延时
            'animation-delay' : `${delay/10}s`
        })
        // 将创建的div 添加到页面
        $content.append($div)
    }
</script>

  </script>
</html>

升级为红包雨

7-2 js配合动画属性实现图片无限滚动

直接看代码吧标注比较仔细了

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .marquee {
            overflow: hidden;
        }
        
        .content {
            display: flex;
            flex-direction: row;
        }
        
        .list {
            /* overflow: hidden; */
            display: flex;
        }
    </style>
</head>

<body>
    <!-- 这个标签可实现 从右往左不断循环滚动 -->
    <!-- <marquee behavior="" direction=""><img src="./imgs/tuzi.jpeg" alt=""></marquee> -->
    <div class="marquee">
        <div class="content">
            <div class="list"><img src="./imgs/tuzi.jpeg" alt=""></div>
            <div class="list"><img src="./imgs/tuzi.jpeg" alt=""></div>
            <div class="list"><img src="./imgs/tuzi.jpeg" alt=""></div>
        </div>
    </div>
</body>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
    // jq 挂载
    $(() => {
        console.log('页面元素加载完成后执行这里面的内容')
            // 使用jq 选择需要的元素
        var outerWidth = 600,
            outerHeight = 400,
            speed = 3
        var $marquee = $('.marquee')
        var $content = $marquee.find('.content')
        var $list = $content.find('.list')
        var listLength = $list.length
        var contentWidth = outerWidth * listLength

        // 获取样式表
        var style = document.styleSheets

        // 给最外层 $marquee 尺寸 上面需要声明使用的变量
        $marquee.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        })

        // 需要设定 list尺寸 
        $list.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        })

        // 计算得到 content尺寸
        $content.css({
            "width": `${contentWidth}px`,
            "height": `${outerHeight}px`,
            // 动画效果 
            "animation": `run ${speed * listLength}s linear infinite`
        })
        style[0].insertRule(`
        @keyframes run{
            100%{transform:translateX(-${contentWidth}px)}
        }`)

        // 克隆 作用是不断连续的滚动  不会滚动一次就停止
        var clone = $list.eq(0).clone()
        $content.append(clone)
    })
</script>

</html>

7-3 transition 实现轮播效果

效果比较完整可以试试哈

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .marquee {
            overflow: hidden;
        }
        
        .content {
            display: flex;
            flex-direction: row;
        }
        
        .list {
            /* overflow: hidden; */
            display: flex;
        }
    </style>
</head>

<body>
    <!-- 这个标签可实现 从右往左不断循环滚动 -->
    <!-- <marquee behavior="" direction=""><img src="./imgs/tuzi.jpeg" alt=""></marquee> -->
    <div class="marquee">
        <div class="content">
            <div class="list"><img src="./imgs/tuzi.jpeg" alt=""></div>
            <div class="list"><img src="./imgs/tuzi.jpeg" alt=""></div>
            <div class="list"><img src="./imgs/tuzi.jpeg" alt=""></div>
        </div>
    </div>
    <button id="preBtn">
        << pre </button> <button id="nextBtn"> next >>
    </button>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">
</script>
<script>
    // jq 挂载
    $(() => {
        console.log('页面元素加载完成后执行这里面的内容')
            // 使用jq 选择需要的元素
        var outerWidth = 600,
            outerHeight = 400,
            speed = 3,
            initIndex = 0,
            setTimeId = null,
            transitionTime = 0.1
        var $marquee = $('.marquee')
        var $content = $marquee.find('.content')
        var $list = $content.find('.list')
        var listLength = $list.length
        var contentWidth = outerWidth * listLength

        // 获取样式表
        var style = document.styleSheets

        // 给最外层 $marquee 尺寸 上面需要声明使用的变量
        $marquee.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        })

        // 需要设定 list尺寸 
        $list.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        })

        // 计算得到 content尺寸
        $content.css({
                "width": `${contentWidth}px`,
                "height": `${outerHeight}px`,
                // 动画效果 
                // "animation": `run ${speed * listLength}s linear infinite`
            })
            //运动
            // style[0].insertRule(`
            // @keyframes run{
            //     100%{transform:translateX(-${contentWidth}px)}
            // }`)

        // 克隆 作用是不断连续的滚动  不会滚动一次就停止
        var clone = $list.eq(0).clone()
        $content.append(clone)

        // 需要无限的轮询播放
        function autoPlay() {
            // 上面初始化这个地方使用 ++ 

            setTimeId = setInterval(() => {
                initIndex++
                // 移动 content
                $content.css({
                    "transition": `transform ${transitionTime}s ease`,
                    "transform": `translateX(-${outerWidth * initIndex}px)`
                })
                initIndex === listLength ? initIndex = 0 : ''
            }, speed * 1000)


        }
        // autoPlay()

        // 最后一张图片到第一张图片 切换有跳动效果  怎么处理？
        $content[0].addEventListener('transitionend', () => {
            $content.css({
                "transition": `none`,
                "transform": `translateX(-${outerWidth * initIndex}px)`
            })
        })
        $('#preBtn').mouseenter(() => {
            if (initIndex === 0) {
                initIndex = listLength
                $content.css({
                    "transition": `none`,
                    "transform": `translateX(-${outerWidth * initIndex}px)`
                })
            }
        })
        $('#preBtn').click(() => {
            // console.log('pre clicked')
            initIndex === 0 ? initIndex = listLength : ''
            initIndex--
            // 移动 content
            $content.css({
                "transition": `transform ${transitionTime}s ease`,
                "transform": `translateX(-${outerWidth * initIndex}px)`
            })

        })

        $('#nextBtn').click(() => {
            // console.log('next clicked')
            initIndex++
            // 移动 content
            $content.css({
                "transition": `transform ${transitionTime}s ease`,
                "transform": `translateX(-${outerWidth * initIndex}px)`
            })
            initIndex === listLength ? initIndex = 0 : ''
        })
    })
</script>

</html>

<**********这是分割线>

# 3、实现微信小程序-简历篇

# 1、流程

1、满足硬件要求
2、下载微信开发工具稳定版本
3、搜索 微信公众平台 注册账号 
4、拿到 app id
5、新建小程序

# 2、小程序基础

1、清理一下不用的page 下面两个页面
2、并将下面的内容清除掉 只保留格式
3、写全局样式

# 3、复习 flex布局

1、flex 更好适配不用设备的尺寸
2、
3、

# 4、设计简历封面

1、先清理之前写的 flex
2、先写index.js  获得屏幕的宽度和高度
3、新建 imgs文件夹 并放一个半身的照片 
4、设置照片居中 并且底对齐
5、加姓名 设置位置
6、加气泡效果 设置位置
7、设置 向右滑动导航效果

# 5、设置简历页面标题栏

1、先写结构
2、有个技巧  调试时候 需要频繁滑动到右边  我直接 将第一个页面注释掉 就可直接展示第二个页面

# 5、设置简历基本信息栏目

1、先设置结构
2、补充缺少的 data数据 
3、设置样式 
4、有个技巧 一行有多列 可以使用 css column-count: xx  多列布局

实现的效果

# 6、设置简历主要技能栏目

1、上面的主要技能 可以直接复用第一部分的内容  
2、下面的文字需要 循环 传入 
3、进度条 直接使用 微信的 progress 实现

# 6、设置简历教育经历栏目

1、先在 data 中定义相关的信息
2、写结构  渲染出来
3、更改一下样式
4、需要注意如果添加多段教育经历  需要更改一下样式
5、需要注意 每段教育经历之间 虚线分割 最后一段教育经历 不要虚线
6、加上页码  page

# 7、设置简历工作经历栏目

1、和上面的思路很相似
2、先在模型层 data 里面定义数据 
3、再通过循环渲染出来 
4、需要注意 如果工作经历 分级多个表示出来的话 应该将 rich-text 换成 text 会自动换行

# 8、设置简历项目经历栏目

1、data定义数据 
2、写结构渲染 
3、改动样式
4、有一点是有效的  右键可格式化代码 
5、

# 9、设置简历自我评价栏目

1、和前面步骤相似 
2、请看前面部分

# 10、上架发布小程序

1、上传
2、微信公众平台填写 相关信息
3、发布

# 11、怎么编写工作经历简历？

# 12、怎么编写项目经历简历？

# 13、学习展望

# 14、我的简历初稿

欢迎扫描二维码取阅个人简历
博客
https://huanhunmao.github.io/

<**********这是分割线>

# 4、使用python实现自动打印

# 1、环境准备

首先需要按住 py环境
安装 pip install win32

# 2、思路

思路是先将文件夹的所有文件遍历出来，然后拷贝到另外一个文件夹

# 3、代码实现

import win32print
import tempfile
import win32api
import os
import shutil
def print_file(filename):
    open(filename,"r")
    win32api.ShellExecute(
        0,
        "print",
        filename,
        '/d:"%s"' % win32print.GetDefaultPrinter(),
        ".",
        0
    )




#对象文件的类型指定
file_type_list = ['pdf','txt','xls','xlsx','pptx','doc']  
src_folder = r'C:\Users\13119\Desktop\py-test2'
#取得文件夹下面的所有指定类型的文件全名（路径+文件名）
# os.walk() 方法用于通过在目录树中游走输出在目录中的文件名，向上或者向下。
# for dirpath,dirnames,filenames in os.walk(folder):
#     print(dirnames)
def get_file_list(folder):
    filelist = []  #存储要copy的文件全名
    for dirpath,dirnames,filenames in os.walk(folder):
        for file in filenames:
            file_type = file.split('.')[-1]
            if(file_type in file_type_list):
                file_fullname = os.path.join(dirpath, file) #文件全名
                filelist.append(file_fullname)
    return filelist


#将文件list里面的文件拷贝到指定目录下
def copy_file(src_file_list, dst_folder):
    print('===========copy start===========')
    for file in src_file_list:
        shutil.copy(file, dst_folder)
    print('===========copy end!===========')

# filelist = get_file_list(src_folder)

if(__name__=="__main__"):
    #copy源所在目录
    src_folder = r'C:\Users\13119\Desktop\py-test'  #路径最后不要加\  
    #copy到的指定目录
    dst_folder = r'C:\Users\13119\Desktop\py-test2'   #路径最后不要加\ 
    
    #取得文件夹下所有指定类型的文件全名
    filelist = get_file_list(src_folder)
    copy_file(filelist, dst_folder)


path = r"C:\Users\13119\Desktop\py-test2"
for i in os.listdir(path):
    file_path = os.path.join(path,i)
    print("你要打印的文件是%s"%i)
    print_file(file_path)

# 4、代码测试

py print.py测试
注意python 需要注意缩进问题

<**********这是分割线>

# 5、Nuxt.js 炒鸡基础教程(一)

# 0、完整示例代码地址欢迎取阅

https://github.com/huanhunmao/daily-practice/tree/master/nuxt-app/my-first-nuxt-app

# 1、搭建 nuxt脚手架

1、基于 node.js 需要先安装
2、全局安装npm i -g create-nuxt-app  
3、cd desktop
4、mkdir nuxt-app
5、cd nuxt-app
6、create-nuxt-app my-first-nuxt-app 选择最简单方式创建 

启动
7、cd my-first-nuxt-app
8、npm run dev

展示效果

# 2、项目结构和特色之一

1、按两次 ctrl + c 就可 关掉当前服务 
2、输入  code .   会自动将文件在  vscode里打开  
3、在 vscode 中 直接 按住ctrl + tab上面的键  可以打开该文件所在终端 
4、

# 3 路由和链接

<template>
    <div>
        <input type="text" name="" id="" v-model="userId">
        <button @click="onLoadUser">用户详情</button>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            userId:''
        }
    },
    methods:{
        onLoadUser(){
            this.$router.push('/users/' + this.userId)
        }        
    }
}
</script>

# 4、 nuxtLink validate验证动态路由

# 5、路由嵌套 nuxt-child

再将输入框和点击结果放到父级

# 6、layouts 布局

默认 pages 下的页面会使用 layouts 下的 default.vue
定义之后如何 使用自定义的 users.vue 呢
自己可以定义出现问题后展示的界面信息

# 7、nuxt-components 组件用法

接下来我们 现在 components 里面定义一个 Header.vue 并在 pages下使用
并且点击对应的内容 可以实现跳转很nice !
那我现在有个需求将这个组件应用在每一个 pages下（这不是扯淡吗）
直接在layouts default.vue里面引入 Header.vue

<template>
  <div>
    <Header />
    <Nuxt />
    
  </div>
</template>

<script>
import Header from "~/components/Header.vue"
export default {
    components:{
      Header
    }

}
</script>

并且把 pages下的 users.vue layout 也改成 default
另外一个问题如何消除初始的 margin padding
可以在 assets 下新建文件 common.css
那如何使得 pages 下的页面生效呢？

<**********这是分割线>

# 6、浏览器开发工具使用技巧篇（一）html +css调试

# 1-1 开篇

在这里插入图片描述

# 1-2 来，认知一手我们的开发者工具

在这里插入图片描述

# 1-3 编辑样式

<!DOCTYPE html>
<html>
  <head>
    <title>document</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .logo {
        width: 200px;
        height: 200px;
      }
      .box {
        margin-left: 450px;
        margin-top: 150px;
        background-color: yellow;
        width: 400px;
        height: 400px;
      }
      .logo {
        margin-top: 150px;
        margin-left: 10px;
      }
      div {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="1.pn" class="logo" />
    </div>
  </body>
</html>
<script type="text/javascript"></script>

1、我写了一段很简单的测试代码，里面包含几个错误，我怎么排查，如果是几千行的话？ 2、在这里插入图片描述

# 3、我们在检查页面对这个元素尝试放在中心位置别忘了对本来的编译器vs code 也要修改哦

在这里插入图片描述

# 1-3-2. 编辑样式再来一课

在这里插入图片描述

在这里插入图片描述 依旧需要注意的是这个地方的改动编辑器不会同时进行改动需要将这部分内容复制到编辑器才会同时发生改动

接下来想说的是如何存图片 1、可以选择图片右键，图片另存为就可 2、右键检查，选中图片，然后右键在这里插入图片描述打开图片新页面后右键另存为即可

在这里插入图片描述注意：黑色小圆点不是黑色感叹号哈

如果页面是动态效果，怎么进行编辑？ 1、鼠标移动触发动态效果 2、右键检查就会在代码中展示选择的位置 3、可进行编辑

# 如果想请请作者喝一杯卡布奇诺

在这里插入图片描述

<**********这是分割线>

# 7、浏览器开发工具使用技巧篇（二）js调试+ 与后台对接的错误调试

# 1-1 js调试

在这里插入图片描述 有个描述有问题：点上对勾之后，不管函数体内部还是外部都可以显示错误

# 2-1 与后台对接的错误调试

在这里插入图片描述

# 3-1 事件监听断点

在这里插入图片描述

# 4-1 模拟移动端的两种方法

在这里插入图片描述

# 5-1 IE浏览器

在这里插入图片描述

# 6-1 火狐浏览器

模拟分辨率但是不能模拟真实的设备

到此就完结啦

# 如果想请请作者喝一杯卡布奇诺

在这里插入图片描述

<**********这是分割线>

# 8、总结写页面的经验篇（一）对新人特别友好哦

我们尝试理清楚，写一个页面的步骤 1）引入基本的css common.css index.css reset.css base.css widge.css 2）先分析一下页面的大块的逻辑（容器）分布，把整体一部分大的结构写出来 3）再看每一块对应的 css 怎么写 4）常规情况下如果大的结构里面有小的容器，会用到 position : relative position : absolute 或者利用float : left float : right 5)一些基本的东西需要知道

# 1、

输入框 内写文字 用的是 value              `<input type="text" class="headerSearch" value="抢10亿神券">`

# 2、

输入框旁边的搜索             `<input type="button" class="searchBtn">`

# 3、

常规引入小图标的两种方式
3-1    `background: url("../../img/3.jpg") no-repeat 0 -15px;`

3-2

background-image: url("../../img/4.jpg");
  background-repeat: no-repeat;
  background-position: 6px -10px;
  background-color: #e1251b;

# 4、

如果不是固定的小图标  要这样写  `比如这个小图标是变化的`

在这里插入图片描述

                <li class="pr">京东超市<i class="hot pa" style="top:-15px;right:-9px;"></i></li>

这个地方很妙在这里插入图片描述

# 5、

一定要小心细节 像前面写的 id = "mainId" 后面写css 写成 #mianId{} 排查好久

# 6、

在这里插入图片描述

# 7、

轮播图常规情况包含3层一个大的带着几个小的一起走，还有一个控制可看到的范围在这里插入图片描述

# 8、

z-index 展示的顺序 z-index 值越大展示在上层 解决的是有的层被遮住看不到的问题

# 9、

写轮播图上的小白点有个要注意的地方 如果大容器是半透明则里面的小容器也会是半透明 小白点想居中 先调节自身和小框的 left : 50% 然后再 margin-left : width / 2

# 10、

在这里插入图片描述

# 11、

在这里插入图片描述

# 12、

如何实现里面的这一块的部分在这里插入图片描述 css

.productBlock dl dt {
    width: 97px;
    height: 40px;
    margin: 45px auto 0 auto;
    /* 怎么实现上下两根线的操作 */
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    /* 水平居中的操作 */
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 22px;
}

.productBlock dl dd {
    width: 97px;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 12px;
}```
html

智能生活: 引领智能新风尚

``` # 13、做页面的顺序从外到内从上到下从左到右

# 14、

一个大图片 里面一个小的图标怎么实现? 比如这样的东西在这里插入图片描述

html

<!-- 里面图片的大小 -->
        <div class="productImg">
            <!-- 里面的小放大镜 -->
            <i class="icons"></i>
        </div>
    </div>

css

/* 左边图片占据的空间  */
.productImg {
    width: 495px;
    height: 495px;
    border: 1px solid #ddd;
    position: relative;
}

/* 左边图片旁边的小圆圈 */
.productImg i.icons {
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url('../../icon/1.jpg') no-repeat -4px -4px;
}

实现之后是这样的在这里插入图片描述

# 15、

常规情况下写左右两个小箭头 使用 <label></label> <span></span> 组合

# 16、

要限时去学习去写代码快速提升代码文件

# 17、

命名大容器的时候不要写死写的太特殊写成这样比较好 productImageWrap fl 后面的fl
我写在公共的 common.css里面 float : left;

# 18、

一个好玩的事情你怎么实现这样的东西？在这里插入图片描述上面的部分需要加

 position:relative；
 z-index : 5；
 // 先全部加上边框
  border : 1px solid #ccc ;
  background : #fff;
//  然后把下边框去掉
  border-bottom : 0;

下面的部分需要加

border : 1px solid #ccc;
background : #fff;
margin-top : -1px 往上一点

# 19、

overflow : hidden 可以将超出容器宽度的部分隐藏掉 不然的话就会超出来我们举个例子说明一下这个情况
这个块加上的时候是这样的在这里插入图片描述如果不加则会挤下来变成这个样子

占据其他的位置

# 20、

常规的左右居中 margin : 0 auto； 表示上下 0 左右居中

# 21、

在这里插入图片描述

# 22、

一个容器里面的东西居中的方法是文字高度和容器等高就可 height : 51px ; line-height : 51px;

# 23、

# 如果想请作者喝一杯卡布奇诺

在这里插入图片描述

<**********这是分割线>

# 9、vue 精简教程（一） dev tools mvvm spa单页面数据定义和渲染

# 一、vue dev tools下载安装？

直接翻墙 chorme 商店搜索下载

# 二、什么是mvvm ? 什么是spa单页面web应用？

# 1.mvvm

在这里插入图片描述

# 2.spa单页面web应用

在这里插入图片描述

# 三、数据定义和渲染？

# 1、我们先看一下 vue 都可以定义那些数据，以及如何定义？

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">

    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                // 定义字符串
                name: 'fhj',
                // 定义数字
                age: 18,
                // 定义对象
                obj1: {
                    name: 'wang',
                    age: 19
                },
                // 定义数组
                arr1: [{
                    name: 'li',
                    age: 20
                }],
            }
        },
        // vue 生命周期 已经创建完成
        created() {
            console.log(this.name);
            console.log(this.obj1);
            console.log(this.arr1);
        }
    })
</script>

# 2、我们写的这些数据如何在页面中渲染出来？

有一个需要很注意的事情 v-for 循环需要注意绑定一个:key="data.id"


<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">
        <!-- 数字和字符串 直接渲染 -->
        <h2>{{name}}-{{age}}</h2>
        <!-- 对象需要使用属性渲染 -->
        <h2>{{obj1.name}}-{{obj1.age}}</h2>
        <h2>----分隔开----</h2>
        <!-- 数组先循环一下 再按照属性渲染出来（数组里面是对象） -->
        <h2 v-for="data in arr1" :key="data.id">{{data.name}}-{{data.age}}</h2>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                // 定义字符串
                name: 'fhj',
                // 定义数字
                age: 18,
                // 定义对象
                obj1: {
                    name: 'wang',
                    age: 19
                },
                // 定义数组  这个数组里面是两个小对象
                arr1: [{
                    name: 'li',
                    age: 20
                }, {
                    name: 'zhang',
                    age: 21
                }],
            }
        },
        // vue 生命周期 已经创建完成
        
    })
</script>

# 3、如果只是单独的数组，只需要循环出来就行

在这里插入图片描述

# 4、可以迭代数字

在这里插入图片描述

# 5、可插入 html标签

在这里插入图片描述

# 总结

<**********这是分割线>

# 10、vue 精简教程（二）常用指令用法更新超长版本一次看个过瘾好吧

# 前言

# 一、vue常用指令 + 事件+样式？

# 1、v-for

这个我们已经说过了，需要注意的是，需要加:key="data.id"

# 2、v-if v-show

v-if 如果是false 会直接删除 v-show 不会删除只会隐藏

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">
        <h2 v-show="isShow">显示</h2>
        <button @click="isShow=!isShow">click</button>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                isShow: false,
            }
        },


    })
</script>

# 3、filter 筛选避开 v-if v-for 一起使用

因为v-if和v-for在同一个节点上使用，v-for具有更高的优先级，也就是循环一个元素就要进行一次判断

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">
        <h2 v-show="isShow">显示</h2>
        <button @click="isShow=!isShow">click</button>
        <ul>
            <li v-for="data in datalist" :key="data">
                {{data.name}}
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                isShow: false,
                datalist: [{
                        name: 'lili',
                        age: 20,
                        sex: 1
                    },
                    {
                        name: 'pp',
                        age: 19,
                        sex: 2
                    }
                    // 官方推荐在这个地方 使用 filter 先筛选一下  再使用 不建议v-if v-for 一起用
                ].filter(data => {
                    return data.sex === 2
                })
            }

        },



    })
</script>

# 4、v-bind v-model

先看一下 v-bind 简写 : 动态绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 100px;
        height: 100px;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <ul>
            <!-- 循环列表 -->
            <li v-for="data in datalist">
                {{data.name}}
                <!-- 这个地方动态绑定图片   -->
                <img :src="data.photo" alt="">
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        // 下面这个是数据
        data() {
            return {
                // 列表数组 里面包含两个对象
                datalist: [{
                        name: 'fhj',
                        age: 18,
                        photo: './img/1.png',
                    },
                    {
                        name: "ppx",
                        age: 19,
                        photo: './img/2.png',
                    }
                ]
            }
        }

    })
</script>

可以绑定其他的东西再举一个例子默认勾选 checked 在这里插入图片描述

再来看一下 v-model 这个叫双向绑定
在这里插入图片描述

# 5、监听器 watch

1）我们做一个字体大小的进度理解一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
   // 这个是进度条  type="range"
        <input type="range" v-model="fontSize">
    </div>
</body>

</html>
<script>
//     vue 实例
    var vm = new Vue({
        el: "#box",
     // 这个地方的data函数  需要加return {xxx}
        data() {
            return {
                fontSize: 24
            }
        },
     //   这个地方是监听机制
        watch: {
      //  有两个参数 新的值 和  老的值
            fontSize(newvalue, oldvalue) {
                console.log('我监听到了')
                console.log(newvalue, oldvalue)
            //    这里做一个限制
            // 字体大于 50 会弹窗提示 并且将 老的值赋给 fontSize
            // vue 中的this 指向的是实例化对象 可以访问到fontSize
                if (newvalue > 50) {
                    this.fontSize = oldvalue
                    alert('字体太大了')
                    return;
                }
            }
        }
    })
</script>

# 6、计算属性

1）举一个简单的实现相加的例子 两个输入框输入数字可以直接得到和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <input type="range" v-model="fontSize"> <br>
        <input type="text" v-model="count1.num"> <br>
        <input type="text" v-model="count2.num"> <br>
        和:{{sum}}
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                fontSize: 24,
                // 这里给定两个初始值 
                count1: {
                    num: 0,

                },
                count2: {
                    num: 0,

                }
            }
        },
        watch: {
            fontSize(newvalue, oldvalue) {
                console.log('我监听到了')
                console.log(newvalue, oldvalue)
                if (newvalue > 50) {
                    this.fontSize = oldvalue
                    alert('字体太大了')
                    return;
                }
            }
        },
        // 计算属性  
        computed: {
            sum() {
                // 利用  parseInt 将后面的东西 转成整数类型
                return parseInt(this.count1.num) + parseInt(this.count2.num);
            }
        }
    })
</script>

# 7.vue 事件

点击事件 v-on 简写 @ @click="xxx" 这个实现的是没点击一次次数就会增加一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="box">
        <h2>{{count}}</h2>
        <button @click="count++">click</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                count: 0,
            }
        }
    })
</script>

</html>

2、我现在将方法写在下面因为实际情况逻辑可能比较复杂 写在 methods里面写两个方法并且调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="box">
        <h2>{{count}}</h2>
        <button @click="count++">click</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                count: 0,
            }
        }
    })
</script>

</html>

实现的效果
在这里插入图片描述

# 8、按键事件

先说一点 vue生命周期 created 和 beforeCreate
一个按键事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        img {
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">

        <ul>
            <li v-for="data in userlist">{{data.name}}
                <img :src="data.pic" alt="">
            </li>
        </ul>

        <form action="">
            <!-- 这个地方需要注意一件事情   @keyup.enter = "submit" 不知道为啥不起作用 -->
            <input type="text" v-model="user.pic" @keyup.down="submit">
            <!-- <button @click.prevent='submit'>提交</button>  -->
        </form>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                count: 0,
                userlist: [],
                user: {
                    name: 'ppx',
                    pic: ''
                }
            }
        },
        methods: {
            loadDate() {
                // 初始化数据 假数据
                const res = [{
                        name: 'fhj',
                        age: 18,
                        pic: './img/1.png'
                    },
                    {
                        name: 'wu',
                        age: 19,
                        pic: './img/2.png'
                    }
                ]
                // 将模拟后台的数据 给这个空的userlist
                this.userlist = res;
            },
            submit() {
                // 这个函数将 user 内容 放进 userlist 存在问题
                this.userlist.push(this.user);
            }
        },
        created() {
            // 初始化 数据
            this.loadDate();
        },

    })
</script>

</html>

在这里插入图片描述这个太丑了我们怎么解决这个问题？

# 9、样式处理

1）先比较一下普通写死和动态绑定的区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color {
            color: red;
        }

        .font {
            font-size: 36px;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <!-- 第一种   这是常规的表达 写死的情况  但是这样是不好的 -->
        <!-- <div class="color">展示一手</div> -->

        <!-- 第二种   这个是比较好的动态绑定的方式 -->
        <div :class="{color:isShow}">再来展示一下</div>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            isShow: false
        }
    })
</script>

2）如何使用三木也是很重要的？ 在这里插入图片描述 3)加一个 button 动态使得两种情况下切换
4) 我们可以 动态绑定一个东西在下面进行更改 5）另外一种表达 6) 我们来实现一个列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color {
            color: red;
        }

        .font {
            font-size: 36px;
        }

        .active {
            color: skyblue;
            cursor: pointer;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <ul>
            <!-- 前面绑定 0 1 2  后面点击之后对应的 0 1 2  就可以实现切换 -->
            <li :class="{active:showIndex==0}" @click="showIndex=0">回复我的</li>
            <li :class="{active:showIndex==1}" @click="showIndex=1">@我的</li>
            <li :class="{active:showIndex==2}" @click="showIndex=2">我的收藏</li>
        </ul>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            // 这个地方 showIndex 默认我设置为0 从0开始
            showIndex: 0,
        }
    })
</script>

# 10、动态行内式

1）基本的行内写法 在这里插入图片描述 2) 3) 展示一个从小到大的过程

# 二、过渡效果和动画？

1、第一种方法 过渡效果代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 开始的样式 */
        .fhj-enter {
            /* 透明度 */
            opacity: 0;
        }

        .fhj-enter-active {
            /* 全部过度效果 1s 时间一秒 ease 缓慢  */
            transition: all 1s ease;
        }

        .fhj-enter-to {
            font-size: 64px;
        }

        /* 离开的样式 */
        .fhj-leave {
            opacity: 1;
        }

        .fhj-leave-active {
            transition: all 1s ease;
        }

        .fhj-leave-to {
            opacity: 0;
            font-size: 64px
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- vue 用来包裹和执行过渡动画和效果  -->
        <!-- 需要注意的是这个里面可以写 name="fhj" 则上面的v 都需要换成fhj -->
        <transition name="fhj">
            <h2 v-show="isShow">我变化了</h2>
        </transition>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                isShow: true,
            }
        }
    })
</script>

2、第二种方法 动画效果利用关键帧的写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 关键帧 动画的代码 */
        .big-enter-active {
            animation: anil 1s ease;
        }

        .big-leave-active {
            animation: anil 1s ease;
        }

        @keyframes anil {
            0% {
                font-size: 24px;
            }

            50% {
                font-size: 80px;
            }

            100% {
                font-size: 24px;
            }
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- vue 用来包裹和执行过渡动画和效果  -->
        <!-- 需要注意的是这个里面可以写 name="fhj" 则上面的v 都需要换成fhj -->
        <transition name="big">
            <h2 v-show="isShow">我变化了</h2>
        </transition>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                isShow: true,
            }
        }
    })
</script>

3、第三种方法引用 animate.css 动画库
1）引用这个 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> 2）使用 animate.css库 (opens new window)里面的东西前面写 animated 后面写方法名字在这里插入图片描述 4、第四种方法 javascript 钩子函数
需要注意的几点内容 1）:css='false'什么意思？：css =' false'-删除模板中包含的默认CSS

：js =' false'-删除模板中r包含的默认JS

2） el.offsetWidth 啥意思？ HTMLElement.offsetWidth只读属性返回一个元件作为一个整数的布局宽度

3）el.style.transition = 'all 2s ease'什么意思？控制动画速度的方法控制2s内完成

4)钩子函数上面的写法及下面的函数表达很重要

@before-enter @enter @after-enter

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>

    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- vue 用来包裹和执行过渡动画和效果  -->
        <transition :css='false' @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="isShow">我变化了</div>
        </transition>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                isShow: true,
            }
        },
        methods: {
            beforeEnter(el, done) {
                el.style.opacity = 0
            },
            // 必须使用回调才能继续执行下面的代码
            enter(el, done) {
           // HTMLElement.offsetWidth只读属性返回一个元件作为一个整数的布局宽度
                el.offsetWidth;
                el.style.fontSize = "50px";
            // 控制动画速度的方法  控制2s内完成
                el.style.transition = 'all 2s ease';
                done();
            },
            afterEnter(el, done) {
                el.style.opacity = 1;
            }
        }
    })
</script>

5、列表渲染多个元素过渡 1)先弄一个transition-group 组件 展示一个列表然后点击一个删除一个 2) 删除用到点击事件和自定义的方法这个方法使用es6 filter筛选 3）加的动画使用animate

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>

    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <!-- 特别注意针对多个元素 需要使用transition-group         -->
        <!-- 这个地方使用 animated  效果是bounce -->
        <transition-group name="xxx" leave-active-class="animated bounce">
            <div v-for="data in datalist" :key="data" @click="del(data)">{{data}}</div>
        </transition-group group>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                datalist: [1, 2, 3, 4]
            }
        },
        methods: {
            del(data) {
                // 使用es6 筛选方法  实现筛选出的东西不要 
                // 配合点击事件 点击之后 删除 
                this.datalist = this.datalist.filter(item => {
                    return item != data
                })
            }
        }
    })
</script>

# 总结

练一下复习一手吧
效果更佳哦

待续.......

# 1、需要区分函数传参中传递的是值还是引用？

# 1、问题

# 2、解答

# 2、css动画 基础实用教程

# 1、基本操作

# 2、 回流（重排）和 重绘

# 3、动画基础(transition)

# 4、动画基础(animation)

# 5、时间函数详解和举例

# 6、动画状态的监听和思考

# 7、实践篇

# 3、实现微信小程序-简历篇

# 1、流程

# 2、小程序基础

# 3、复习 flex布局

# 4、设计简历封面

# 5、设置简历页面标题栏

# 5、设置简历基本信息栏目

# 6、设置简历主要技能栏目

# 6、设置简历教育经历栏目

# 7、设置简历工作经历栏目

# 8、设置简历项目经历栏目

# 9、设置简历自我评价栏目

# 10、上架发布小程序

# 11、怎么编写工作经历简历 ？

# 12、怎么编写项目经历简历 ？

# 13、学习展望

# 14、我的简历 初稿

# 4、使用python实现自动打印

# 1、环境准备

# 2、思路

# 3、代码实现

# 4、代码测试

# 5、Nuxt.js 炒鸡基础教程(一)

# 0、完整示例代码地址 欢迎取阅

# 1、搭建 nuxt脚手架

# 2、项目结构和特色之一

# 3 路由和链接

# 4、 nuxtLink validate验证动态路由

# 5、路由嵌套 nuxt-child

# 6、layouts 布局

# 7、nuxt-components 组件用法

# 6、浏览器开发工具使用技巧篇（一）html +css调试

# 1-1 开篇

# 1-2 来，认知一手我们的开发者工具

# 1-3 编辑样式

# 3、我们在检查页面对这个元素尝试放在中心位置 别忘了对本来的编译器vs code 也要修改哦

# 1-3-2. 编辑样式再来一课

# 如果想请请作者喝一杯卡布奇诺

# 7、浏览器开发工具使用技巧篇（二）js调试+ 与后台对接的错误调试

# 1-1 js调试

# 2-1 与后台对接的错误调试

# 3-1 事件监听断点

# 4-1 模拟移动端的两种方法

# 5-1 IE浏览器

# 6-1 火狐浏览器

# 如果想请请作者喝一杯卡布奇诺

# 8、总结写页面的经验篇（一）对新人特别友好哦

# 1、

# 2、

# 3、

# 4、

# 5、

# 6、

# 7、

# 8、

# 9、

# 10、

# 11、

# 12、

# 14、

# 15、

# 16、

# 17、

# 18、

# 19、

# 20、

# 21、

# 22、

# 23、

# 2、css动画基础实用教程

# 2、回流（重排）和重绘

# 11、怎么编写工作经历简历？

# 12、怎么编写项目经历简历？

# 14、我的简历初稿

# 0、完整示例代码地址欢迎取阅

# 3、我们在检查页面对这个元素尝试放在中心位置别忘了对本来的编译器vs code 也要修改哦

# 9、vue 精简教程（一） dev tools mvvm spa单页面数据定义和渲染

# 三、数据定义和渲染？

# 1、我们先看一下 vue 都可以定义那些数据，以及如何定义？

# 2、我们写的这些数据如何在页面中渲染出来？

# 3、如果只是单独的数组，只需要循环出来就行

# 10、vue 精简教程（二）常用指令用法更新超长版本一次看个过瘾好吧

# 3、filter 筛选避开 v-if v-for 一起使用