前端学习笔记(参考how2java)

HTML

html基础

• p：是段落标签，可自动换行!!
• pre：是预格式标签，可展示标签内文字原本的格式(方便代码展示)
• div：通常结合css用于布局，没有任何显示效果，div是块元素，会自动换行
• span：与div用法相似，但是span是内联元素，即不会换行

html积累

• nav也是用于布局，但是方便搜索引擎识别

CSS

基础

• css语法
  selector {property: value} => 即 选择器{属性:值}
• css选择器
  1.元素选择器 => 直接使用元素类型，如p
  2.id选择器 => #
  3.类选择器 => .
• css文本
  1.color
  2.text-align:对齐=>div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提; span是内联元素其默认宽度就是其文本内容的宽度简单说就是文本已经粑在其边框上了，对齐是看不出效果来的
  …参考：https://how2j.cn/k/css2/css2-text/241.html#nowhere
• cusor：鼠标样式
• css表格
  1.表格布局=>table-layout:automatic|fixed，前者由内容决定，后者是固定值
  2.表格边框=>border-collapse:separate|collapse，前者是分开的双层边框，后者是单层边框
• css边框
  参考：https://how2j.cn/k/css2/css2-border/246.html#nowhere
• css内边距
  指的是元素里的内容与边框之间的距离
  属性：
      padding-left: 左内边距
      padding-right: 右内边距
      padding-top: 上内边距
      padding-bottom: 下内边距
      padding: 上 右 下 左
• css外边距
  指的是元素边框(border外的框)和相邻元素盒模型最外层(margin外的框)之间的距离
  属性：
      margin-left: 左外边距
      margin-right: 右外边距
      margin-top: 上外边距
      margin-bottom: 下外边距
• css盒模型
  
  蓝色部分是内容； 红色虚线是边框；
  通常还有一个border属性，可以理解为边框的宽度(显示的时候夹在padding和margin之间)
• css超链状态
  link - 初始状态，从未被访问过
  visited - 已访问过
  hover - 鼠标悬停于超链的上方
  active - 鼠标左键点击下去，但是尚未弹起的时候
• css隐藏
  display:none=> 隐藏一个元素，这个元素将不再占有原空间， “坑” 让出来了
  visibility:hidden=> 隐藏一个元素，这个元素继续占有原空间，只是“看不见”
• css优先级
  1.style标签与外部文件style.css样式重复 => 优先使用最后出现的一个
  2.style标签内的与style属性冲突 => 优先使用style属性
  3.如果样式上增加了!important，则优先级最高，甚至高于style属性
• 关于html标签上的属性
  有的标签有自带的默认属性，可以直接在元素上修改； 对于没有该属性的标签，要想修改样式需要使用外部样式(css文件)或者行内样式(style="…")

css布局

• css盒模型
  见css基础部分
• 绝对定位
  position:absolute(相对于其他元素移动)
  参考：https://how2j.cn/k/css2/css2-absolute/250.html
  设置了绝对定位的元素，相当于该元素被从原文档中"删除了"
  绝对定位是基于最近的一个定位了的父容器
  如果没有定位了的父容器，则是相对于body进行定位
  z-index:通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
• 相对定位
  position:relative(相对于自己正常的位置移动)
  与绝对定位不同的是，相对定位不会把该元素从原文档"删除"掉，而是在原文档的位置的基础上，移动一定的距离(原位置处保持空白，不会被删除)
  参考：https://how2j.cn/k/css2/css2-relative/251.html
• css浮动
  float:left|right
  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。原来的“坑”就让出来了，剩余元素会去占用这个“坑”，如果原来的元素属性是浮动，但是并没有离开该坑，剩余元素就会围绕在原来元素的旁边
  1.右：并且是在原来的高度的基础上，向右浮动
  2.左：…
  3.如果剩余元素不想围绕在浮动元素的旁边 => 设置属性clear，如clear:left 即达到不允许浮动元素出现在左边的效果
  4.水平排列div：默认的div排列是会换行的=>如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方；如果超出了父容器，还会有自动换行的效果
• css显示方式
  元素的display显示方式有多种 => 隐藏(none)、块级(block)、内联(inline)、内联-块级(inline-block)
  1.display:none：使得被选择的元素隐藏，并且不占用原来的位置
  2.display:block;：表示块级元素。块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效。 div默认是块级元素；span默认是内联元素(不会有换行,width和height也不会生效)
  3.display:inline： 表示内联元素。内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
  4.dliplay:inline-block：内联是不换行，但是不能指定大小；块级是能指定大小，但是会换行=>inline-block既能指定大小，还不会换行
• css水平居中
  1.内容居中 => div设置属性 align=“center” 或者 style=“text-align:center”，使其中的内容水平居中 => 对于其中的内联元素，同样可以居中
  2.元素居中：
    a.默认情况下div会占用100%的宽度,所以无法观察元素是否居中
    b.通过设置div的宽度，再使用样式 margin: 0 auto来使得div元素居中
    c.span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中
    d.span的居中可以通过放置在div中，然后让div text-align实现居中
• css垂直居中
  1.line-height：适合单独一行垂直居中 (将line-height设置为与div高度一致)
  2.padding：借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
  3.table方式：首先通过display: table-cell把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。这样对图片也可以居中，上一步 line-height就不能对图片居中。 => 很视适合使内部元素垂直居中

css日积月累

• margin: 0 auto
  通常用于使内部元素水平居中，因为auto自动使用剩余空间计算margin
• body默认8px的margin，导致页面边缘空白

JavaScript

js 语言

• 语言基础
  完整的javascript由语言基础，BOM和DOM三部分组成。只有通过javascript操作DOM对象的时候，才会带来很好的实用效果
• js计时器
  1.setTimeout(functionname, 距离开始时间毫秒数 ) => 只显示一次
  2.setInterval(函数名, 重复执行的时间间隔毫秒数 ) =>不停地重复执行

BOM

• 概述
  BOM即 浏览器对象模型(Browser Object Model)
  包括：
      Window(窗口)
      Navigator(浏览器)
      Screen (客户端屏幕)
      History(访问历史)
      Location(浏览器地址)
• …

DOM

• 节点
  DOM把所有的html都转换为节点
  整个文档 是一个节点
  元素 是节点
  元素属性 是节点
  元素内容 是节点
  注释 也是节点
• DOM获取节点
  document.getElementById 获取某个元素对应的元素节点对象getElementsByTagName 根据标签名称获取一个元素数组。
  getElementsByClassName 根据class返回一个节点数组
  getElementsByName可以根据name属性的值，获取元素节点。
  获取属性节点=>首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
  获取内容节点=>首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。
  然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
• DOM节点的属性
  nodeName 节点名称
  nodeValue 节点值
  nodeType 节点类型
  innerHTML 元素的文本内容
  id
  value
  className 元素上的属性
• …js通过操作DOM来修改html文档内容，DOM十分重要，参考DOM

JSON

• 定义
  JavaScript Object Notation
• json数组
  var heros=
  [
  {“name”:“盖伦”,“hp”:616},
  {“name”:“提莫”,“hp”:313},
  {“name”:“死歌”,“hp”:432},
  {“name”:“火女”,“hp”:389}
  ]
  var tmpName=heros[3].name
• json对象转换
  • JSON对象与JavaScript对象
    JavaScript对象 分内置对象(Number,String,Array,Date,Math)和自定义对象
    JSON就是自定义对象，只不过是以JSON这样的数据组织方式表达出来
    所以不存在JSON对象与JavaScript对象的转换问题
  • 字符串转为JSON对象
    需要通过eval转换得到，转换的时候注意,eval 函数要以（ 开头，）结尾； 或者 使用JQuery的$.parseJSON转换函数

    var s1 = "{\"name\":\"盖伦\"";
    var s2 = ",\"hp\":616}";
    var s3 = s1+s2;
     
    document.write("这是一个JSON格式的字符串:" + s3);
    document.write("<br>");
    var gareen = eval("("+s3+")");
     
    document.write("这是一个JSON对象: " + gareen);
    

  • JSON 对象转换为字符串
    需要通过 JSON.stringify 函数把它转换为 字符串

Ajax

• 定义
  Asynchronous JavaScript And XML (异步js和xml)
• 优点
  1.传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面(服务端通常返回整个页面)，且在这个过程中用户必须得等待，不能进行其他操作(同步)。
  2.ajax的页面，可以实现页面的局部更新(编写服务端时只需返回数据或者局部页面)，而不是整个页面的更新；并且发起请求后，用户还可以进行页面上的其他操作(异步)。
• XMLHttpRequest
  Ajax主要通过XMLHttpRequest实现。
  XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互，AJAX就是通过它做到无刷新效果的。
• 对于Ajax的理解
  a.Ajax的工作原理相当于在用户(浏览器)和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。前端数据交给ajax提交，后端返回的数据给ajax(通过XMLHttpRequest)
  b.如果不使用ajax：前端需要通过表单提交数据 => 后端通常是返回整个html页面 => 浏览器收到html页面并将界面刷新为收到的html页面，地址栏也会发生变化(所以如果之后用户手动刷新页面，页面内容不会改变)
  c如果使用ajax：前端的数据转交给ajax => ajax提交数据给服务端 => 后端通常只返回数据/局部页面内容 => ajax收到返回的数据并渲染到界面的对应局部区域，但是不会刷新页面！地址栏也不会发生改变(所以如果之后用户手动刷新页面，ajax更新的局部内容会消失)

JQuery

现在用得相对较少，参考：JQuery

BootStrap

现在使用较少

Vue

• Vue的作用
  1.如果不使用vue，就需要通过js或者jquery直接操作DOM
  2.如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。

• Vue事件监听
  1.v-on 监听事件(v-on 缩写为 @也行)
  2.关于冒泡
       a.如果点击了子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。
       b.vue.js 还提供了各种事件修饰符来方便处理冒泡
         .stop => 冒泡到了这里就结束了
         .prevent => 可以阻止页面刷新
         .capture => 优先触发capture对应的元素
         .self => 只有点击该元素自身才能触发它的事件
         .once

• Vue条件语句
  1.v-if：v-if=“xxx” => 根据xxx判断是否渲染该元素
  2.v-else：与v-if配合使用
  3.v-else-if：与上面两个配合使用=>类似于if …else if …else

• Vue循环语句
  1.v-for：v-for=“xxx” => 在v-for对应的元素下面迭代数据xxx
  2.获取下标：v-for=“xx,index in xxx” => …
  3.纯数字遍历：v-for=“i in 10”

• Vue属性绑定
  目的：Vue对象上的数据显示在视图上
  v-bind：做属性绑定，如v-bind:href=“xxx”,xxx是Vue对象中的数据值

• Vue双向绑定
  目的：把视图上的数据放到Vue对象上
  v-model：如v-model=“name”，元素中数据改变时自动更能数据name

• Vue计算属性
  computed：需要计算的内容放到computed属性中，可自动完成计算
  使用methods中的方法也可完成一样的效果，区别在于=>
     computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。 这样如果是复杂计算，就会节约不少时间。而methods每次都会调用(参考)

• Vue监听属性
  vue对象中的watch监听元素属性值的变化。

• Vue过滤器
  目的：对数据进行过滤
  vue对象中的filters部分放置自定义的过滤器
  调用方式：{{ data|capitalize|capitalizeLastLetter }} (数据|filter1|filter2|…)
  (个人感觉用处不大)参考:过滤器

• Vue组件
  1.放置在vue对象的components中！
  2.组件中的props存放组件属性；template存放组件包含的元素 ；methods存放组件的自定义事件
  3.动态参数就是指组件内的参数可以和组件外的值关联起来 => eg: v-bind:name=“outName”
  4.组件的自定义事件：增加自定义事件和在一个Vue对象上增加 methods 是一样的做法

• Vue自定义指令
  参考：vue中如何自定义指令

• Vue路由
  vue.js 里的路由相当于就是页面局部刷新，同时修改浏览器地址造成页面跳转的假象

• Vue使用ajax(fetch、axios)
  一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 fetch.js 和axios.js都是vue常使用的axios框架