Html、CSS、JavaScript、Vue笔记

Html教程：HTML 教程 | 菜鸟教程 (runoob.com)

Css教程：CSS 教程 | 菜鸟教程 (runoob.com)

Vue教程：Vue3 教程 | 菜鸟教程 (runoob.com)

Html

div 块状元素，一个占一行

span 行内元素，可以挨在一起

h1-h6 标题，从大到小

i 图标

strong 加粗

a 链接

img 引入图片

        相对路径：相对当前文件的路径

        绝对路径：电脑中任一文件都能找到

video 引入视频 controls 控制按钮，可以使视频播放

input 表单

textarea 表单域，可拉伸

button

CSS布局思路

元素的总高度和宽度包含内边距和外边框（padding 和 border）

* {
    box-sizing: border-box;
}

1、盒子模型

        1.1、外边距 margin

        1.2、内边距 padding

        1.3、边框 border

        1.4、阴影 box-shadow: h-shadow v-shadow blur spread color inset; ( box-shadow: 0 0 10px -2px rgba(0,0,0,.5));

        1.5、边角

        1.6、内容 

                1.6.1、css换行：word-wrap: break-word;

2、Flex布局

 Flex 布局语法教程 | 菜鸟教程 (runoob.com)

        2.1、flex-direction row column

        2.2、flex-wrap wrap

        2.3、justify-wrap flex-start | flex-end | center | space-between | space-around

        2.4、align-items flex-start | flex-end | center | baseline | stretch

CSS布局元素

1、宽度 width
        1.1、固定宽度 百分比宽度
        1.2、最大宽度
        1.3、最小宽度
        1.4、水平居中 margin: auto
2、高度 height
        2.1、固定高度
        2.2、最大高度
        2.3、最小高度
        2.4、行高对齐 line-height
3.字体
        3.1.颜色 color 十六进制、rgb、英文
        3.2.大小 font-size
        3.3.粗细 font-weight bold
4.背景

        4.1、https://color.d777.com/
        4.2、颜色 background-color

        4.3、图片 background-img: url(...)

5.定位position
        5.1.absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

        5.2.relative 生成相对定位的元素，相对于其正常位置进行定位
        5.3.fixed 生成固定定位的元素，相对于浏览器窗口进行定位

6. overflow: hidden scroll

JS

js是学习编程最简单的语言

JavaScript 教程 | 菜鸟教程 (runoob.com)

对象操作

对象增删改查
        创建对象 let obj ={} const obj2 ={} var obj3={} (不常用)
        新增属性 obj.a=1
        修改属性 obj.a ='a'
        查询属性 obj.a
        删除属性 delete obj.a
其他操作
        obj[a]=1 a是字符串
        object.assign() 把后一个的属性赋值到前一个

         浅拷贝 修改其中一个另一个也会改变

let teacher2 = user

          深拷贝

object.assign(teacher, user)

let userStr = JSON.stringify(user)
let teacher3 = JSON.parse(userStr)

         解构语法 let { name }= user
        ?.b=a?.name a是undefined或者null b不报错。一种很安全的访问数据的方法

        ?? b=a??c a是undefined或者null 则赋值c给b 有点像三目运算符，但必须是标准的JSON格式

        ||b=a || c a是undefined或者null 则取c

        ?? = b??=a 左侧是undefined或者nu!! 则取右侧的值

循环对象属性for key in obj Object.keys(obj)

== 只比较值 ===比较值和类型

数组操作

数组的增删改查
        创建数组 let arr =[]  let arr1 = new Array()
        新增元素 arr[0]=1 arr[2]= 3
                       arr.push('hh')

                       unshift()
        删除元素

                      splice() 可以根据从第几个，删几个

                      shift 把第一个删掉

                      pop() 把最后一个删掉
        修改元素 arr[index]=1
        查询元素 arr[index]
        截取数组 slice() 包头不包尾
        合井数组 concat()
        字符串变数组 split()
        数组变字符串 join()默认使用','号分割
        排序sort()[有坑][1,2,10]->[1,10,2] 根据unicode编码排序

        正确排序

let sortArr =[1, 2, 10, 8, 6, 22, 11]
let newSortArr = sortArr.sort((a,b) => a-b)

 
        逆序reverse()

        正确排序

let sortArr =[1, 2, 10, 8, 6, 22, 11]
let newSortArr = sortArr.sort((a,b) => b-a)

        获取元素序号indexOf() 没有的时候是-1，有这个元素就从0开始编号

                             lastlndexOf()
        [神器]fiter0()可以筛选和删除元素

let users = [{name: '张三', age: 20},{ name: '李四', age: 21}]
let newUser1 = users.filter(aaa => aaa.age > 20)

let newArr = users.filter(v => v.name !== '李四'）

        [神器] find()
       [神器] map()[1,2,3].map(v =>v*2)[{name: 'a’}, {name:b)].map(v => v.name)
        forEach()
        reduce
                语法:arr.reduce(function(prev,cur,index,arr){..}, init);
                prev累计器累计回调的返回值，表示上一次调用回调时的返回值，或者初始值 init
                cur表示当前正在处理的数组元素
                index表示当前正在处理的数组元素的索引
                arr表示原数组
                init初始值
                arr=[1,2,3] let sum=arr.reduce((pre,cur)=>pre + cur)

JSON-数据传输的格式

https://www.json.cn/
标准的JSON
        json对象(
        json数组 0
·json数据格式:{"name":"张三","age":23,"man",true, "children":[{"name":"张小宝","age": 20}]}

Vue

Vue起步(Vue2)
文档 https://v2.cn.vuejs.org/
语法

var example1 = new Vue({
   el:'#example-1',
   data: {
      counter:0
   }
}）

· {{}}  变量、表达式渲染
· v-html html模板，渲染html
· v-model 绑定值(双向绑定)
· v-if v-else-if v-else 判断
· v-bind 简写 :  绑定属性
· v-on 简写 @  事件绑定
· v-for 循环
动态 class style
下载软件nodejs v16