0311-0312的笔记

1 elementui里datepicker组件实现结束时间大于起始时间

<el-form-item label="xxx:">
    <el-col :span=“10">
      <el-form-item prop="startdate">
        <el-date-picker 
        type="date" 
        :editable="false"
        value-format="yyyy-MM-dd" 
        placeholder="请选择开始时间" 
        v-model="sxyInfo.startdate"
        :picker-options="pickerOptionsStart"
        style=" 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="1" style="text-align:center;">至</el-col>
    <el-col :span=“13">
      <el-form-item prop="enddate">
        <el-date-picker
        type="date"
        :editable="false"
        value-format="yyyy-MM-dd"
        placeholder="请选择结束时间"
        v-model="sxyInfo.enddate"
        style=" 100%;"
        :picker-options="pickerOptionsEnd"
       ></el-date-picker>
      </el-form-item>
    </el-col>
</el-form-item>

data(){
  return{
    sxyInfo:{},
    pickerOptionsStart: {
      disabledDate: time => {
        let endDateVal = this.sxyInfo.enddate;
        if (endDateVal) {
          return time.getTime() > new Date(endDateVal).getTime();
        }
      }
    },
    pickerOptionsEnd: {
      disabledDate: time => {
        let beginDateVal = this.sxyInfo.startdate;
        if (beginDateVal) {
          return (
              time.getTime() <
              new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
          );
        }
      }
    },
  }
}

2 img与background-image 的区别

img：

从页面元素来说，页面中的图片是作为内容出现的，比如广告图片，比如产品图片，那么这个必然是用img了，因为这个是页面元素内容。页面元素内容最关键的一点就是，当页面没有样式的时候，还是能一眼看过去就知道什么是什么……
background-image：

背景图片，修饰性的内容，在页面中可有可无。有，是为了让页面中视觉感受上更美；无，并不影响用户浏览网页获取内容。

还有其他的区别之分：

• 1、 是否占位

  background-image是背景图片，是css的一个样式，不占位
  <img />是一个块状元素，它是一个图片，是html的一个标签，占位
  

• 2、否可操作

  background-image是只能看的，只能设置background-position, background-attachment,  background-repeat
  
  <img/>是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作。
  

• 3、 加载顺序不同

  在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，
  html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载。
  换句话讲，网页会优先加载标签img的内容，再加载背景图片background-image。
  

• 5、从SEO角度看

  Img标签优点是自闭和，可以避免空标签出现（空标签也是w3c验证的内容之一）。采用background方式就会出现空标签。
  Img标签是自闭和的，不能添加文本内容，但是，Img有一个alt属性，而且这个属性在w3c标准中，要求必须有，这样做的优点还是很多的。
  第一，图片比较大，或者用户网速比较窝火的时候，加载失败了，至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图，那就多刷几次去加载。另外，alt属性有利于辅助阅读，尤其是对盲人朋友，他们使用阅读器浏览页面，如果没有文本提示，就太不厚道了。
  第二，alt属性有利于SEO，搜索引擎实现很好的图像识别还是有一段路要走。
  当然也有缺点：
  第一，Img加载的图片是通过src拿到的，如果HTML代码不允许修改，那怎么换图，只有同名文件替换，但是有可能遇到304状态，需要服务器端做相应的设置。这时background的优点就出来了，换皮肤就是这个栗子。
  第二，如果图片显示区域空间大小是预留的，那么图片必须和预留的空间一致，否则图片要么被拉伸要么被压缩，都不是等比例操作。当然，避免这种问题就需要前端和视觉设计师遵守一定的规范。
  

3 input img textarea 是行内即置换元素

替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，置换元素一般内置框高属性，因此可以设置其框高。
可以来说这些是个行内块元素，相对于display:inline-block
比如：img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素

4 DOM文档的加载顺序是由上而下的顺序加载

• 1、DOM加载到link标签
  css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；

• 2、DOM加载到script标签
  由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；
  而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是让DOM文档加载完成之后才执行js文件，这样才不会出现查找不到DOM节点等问题；
  js阻塞其他资源的加载的原因是：浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现；

• 3、解决方法
  前提，js是外部脚本；
  在script标签中添加 defer=“ture”，则会让js与DOM并行加载，待页面加载完成后再执行js文件，这样则不存在阻塞；
  在scirpt标签中添加 async=“ture”，这个属性告诉浏览器该js文件是异步加载执行的，也就是不依赖于其他js和css，也就是说无法保证js文件的加载顺序，但是同样有与DOM并行加载的效果；
  同时使用defer和async属性时，defer属性会失效；
  可以将scirpt标签放在body标签之后，这样就不会出现加载的冲突了。

5 vue cloned[i].apply is not a function

出现的原因是组件传值的桥梁名字不对,注意组件传值的名字（子=>父）

6 vue组件传值

• 父 => 子

通过props
可以传一个静态值，也可以传个动态值
可以是字符串形式的数组，也可以是对象

  array: ['a','b','c']  
  object: {
    'a':String,
    'b':Number,
    'c':Boolean,
    'd':Array,
    'e':Object
  }
  object:{
    'q':{
      type: Number,
      default: 0
    }
    'a':{
      type:String,
      required: true //必填项
    },
    'b':{
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    }，
    'c':{
      validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

• 子 => 父

1 子组件用this.$emit('事件名'，值)发送

this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2')

第一个参数是自定义事件的名字
后面的参数是依次想要发送出去的数据

2 父组件利用v-on为事件绑定处理器

<my-component2 v-on:myclick="onClick"></my-component2>

methods: onClick(val){console.log(val)}

注意： 在使用v-on绑定事件处理方法时，不应该传进任何参数，而是直接写v-on:myclick="onClick",不然，子组件暴露出来的数据就无法获取到了

• 兄弟 => 兄弟 (该方法也适合父子之间传值)

1 设置中间件

let Bus = new Vue() 

new Vue({
  el: '#app',
  data:{
    Bus
  },
  components: {App}
}) 

2 this.$root.Bus.emit()

当前点击发送的事件里
methods: {
  click(){
    this.$root.Bus.$emit('send',值)
  }
}  

3 this.$root.Bus.$on() 需要在created钩子函数里。

要接受的组件里的created钩子函数里
created(){
  this.$root.Bus.$on('send',val => {
    console.log(Val)
  })
}

7 getElementById，getElementsByTagName,getElementsByName,getElementsByClassName的区别

• getElementById 根据id声明元素

• getElementsByTagName 根据标签名声明元素，是一个数组

• getElementsByName 根据标签里的name名声明元素。是一个数组

• getElementsByClassName 根据类名声明元素，是一个数组

  html：
  <div id="one">111</div>
  <div class="two" name="three">222</div>
  <div class="two" name="three">333</div>
  <div class="two">444</div>
  
  script：
  let one = document.getElementById('one')
  let lists = document.getElementsByName('three')
  let arr = document.getElementsByTagName('div')
  let arr1 = document.getElementsByClassName('two')
  
  console.log('one',one) // one <div id="one">111</div>
  console.log('lists',lists) // lists NodeList(2) [div.two, div.two]
  console.log('arr',arr) // arr HTMLCollection(4) [div#one, div.two, div.two, div.two, one: div#one, three: div.two]
  console.log('arr1',arr1) // arr1 HTMLCollection(3) [div.two, div.two, div.two, three: div.two]
  

8 DOM操作--- 如何添加、移除、移动、复制、创建和查找节点

• 1）创建新节点

  document.createDocumentFragment()    //创建一个DOM片段
      DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
      因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
  
  document.createElement()   //创建一个具体的元素
  document.createTextNode()   //创建一个文本节点
  

• 2）添加、移除、替换、插入、复制

  appendChild() 用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点
  insertBefore() 如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点
  removeChild() 用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了
  replaceChild() 用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点
  cloneNode() 用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点），false 表示浅复制（复制节点本身，不复制子节点）
  

• 3）查找

  getElementsByTagName()    //通过标签名称
  getElementsByName()    //通过元素的Name属性的值
  getElementById()    //通过元素Id，唯一性
  getElementsByClassName() 
  

例子：

  <div id="pp">111</div>
  <ul id="ul">
    <li class="frist">1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  例子：
  var frame = document.createDocumentFragment();
  var one = document.createElement('div');
  var pp = document.getElementById('pp');
  var text = document.createTextNode('112221')
  frame.appendChild(text)
  frame.appendChild(one);
  pp.appendChild(frame);

  var ul = document.getElementById('ul');
  var li1 = document.createElement('li');
  li1.innerHTML='red'
  var firstChild = document.getElementsByTagName('li')[1];
  ul.insertBefore(li1,firstChild); // 在第二个li的前面加上里li1
  var li2 = document.createElement('li');
  li2.innerHTML='green'
  ul.replaceChild(li2,li1) // red被替换成green

  ul.removeChild(li2) // green 被删除

  var lastUl = ul.cloneNode(true) // 如果为false，则只复制ul
  pp.appendChild(lastUl) // pp里多了ul一样的元素

9 vue给input添加enter事件

<input v-on:keyup.enter="submit”>
在使用过程中，如果页面只针对一个Input添加键盘enter事件，可以直接按照官方文档定义的别名增加相应事件就可以了.但是如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created里，

// 错误写法：这么写没有生效

<input type="search"  aria-label="Search" maxlength="32" v-model.trim="search_value" @keyup.enter="enterSearchMember">  
<button @click="goSearch">搜索</button> 

//不能直接将事件添加写在input上，因为这样必须焦点在input上才能触发，所以可以直接绑定在document上即可

created() {
  document.onkeydown = e=> {
    var key = window.event.keyCode;
    if (key == 13) {
      this.goSearch()
    }
  }
},
methods: {
  goSearch: function() {

  },
  enterSearchMember () {
    // 无效
  }
},

10 vue对于父子组件之间的互相传值，报错如下

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "propTextTip"

大概意思是：避免直接更改一个PROP，因为每当父组件重新呈现时，该值就会被覆盖。
解决办法：

不要直接引用父组件传过来的值，可以把接收到的父组件的值赋值给一个新的属性

11 写出三角形的方法

• 1 css

  div{
    0px;
    height:0px;
    border-right:50px solid transparent;
    border-left:50px solid transparent;
    border-bottom:50px solid green
  }
  

• 2 canvas

  html 
  
  <canvas id="canvas" height="50px" width="50px"></canvas>
  
  js
  
  let canvas = document.querySelector('canvas');
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = "red";
  ctx.moveTo(0,0);
  ctx.lineTo(25,25);
  ctx.lineTo(0,25);
  ctx.lineTo(0,0);
  ctx.fill();