✍ 工作小记当然这里不仅仅是可以监听mounted，其它的生命周期事件，例如：created，updated等都可以。

vue 项目

1、网址大小写问题

出现的问题：vue项目中网址输入大小写问题，影响页面展示效果

发现：路径中的参数大小写影响页面效果，因为页面中获取参数区分了大小写，导致页面可能获取不到对应的参数

解决：获取到的参数转为小写然后获取

   for (let key in this.$route.query) {
      if (key.toLowerCase() === "docid") {
        this.docId = this.$route.query[key];
      }else if(key.toLowerCase() === "leafid"){
        this.leafId = this.$route.query[key];
      }
    }

2、控制v-on绑定的事件是否触发

// 通过控制flag 为true/false 来控制事件是否触发
<p @click="flag && clickEvent()"></p>

3、Scss中&的作用(hover和before一起使用时)

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}
等同于：
.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}
// .bordered.float 是串联选择器，作用在同一标签上
// .bordered .top 是后代选择器，作用在不同标签上

4、vue中引用自定义字体

① 首先：创建文件夹，将"huawen.ttf"字体文件，放入项目中：

② 然后：在该文件夹里创建一个font.scss（或font.css）文件：

 @font-face {  
   font-family: 'huawen';  //重命名字体名
   src: url('huawen.ttf');  //引入字体
   font-weight: normal;  
   font-style: normal;  
 }

③ 在main.js中引入

import '@/common/css/font.scss';

④ 最后：就可以使用自定义的字体了

div {
  font-family: 'huawen';
}

5、点击除指定元素之外的区域，对指定元素进行操作（原生js）

注意：在vue项目中注意this的指向问题

let that = this;
    document.addEventListener("click", function(e) {
      let search = document.getElementById("search");
      if (!search.contains(e.target)) {
        that.animations = "end";
      }
    });

6、监听组件生命周期

比如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规的写法可能如下

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

这里提供一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook来监听即可，代码重写如下：

<Child @hook:mounted="doSomething"/>

当然这里不仅仅是可以监听mounted，其它的生命周期事件，例如：created，updated等都可以。

7、vue打包后修改，怎么引入js？

① 在public中新建一个config.js

window.configdt = {
  basUrl: 'http://'+window.location.host
};

② 在index.html这个入口文件里引入config.js

<body>
  <script src="./config.js"></script>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

③ 哪里使用哪里取值

const http = axios.create({
  baseURL: window.configdt.baseUrl
})

最终的打包结果

vue 项目中 element的使用

1、el-radio再次点击取消选中的效果

<el-radio-group v-model="radio">
  <el-radio @click.native.prevent="clickitem(3)" :label="3">备选项</el-radio>
  <el-radio @click.native.prevent="clickitem(6)" :label="6">备选项</el-radio>
  <el-radio @click.native.prevent="clickitem(9)" :label="9">备选项</el-radio>
</el-radio-group>

clickitem(e) {
  e === this.radio ? this.radio = "" : this.radio = e
}

css

1、在 IE11 下，浏览器自作多情在 text input 组件上加一个 close 叉叉：

清除IE下的 text 叉号, css 即可清除；

input[type='text']::-ms-clear{
  display: none;
}

2、解决相邻border重合加粗的问题

方法：在该元素上设置相关方向的margin为-1px

3、同级类名写样式不加空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试类名</title>
    <style type="text/css" media="screen">
        .aa{
            background-color: red;
        }
        ul li.bb{
            background-color: blue;
        }
        ul li.bb.bb2{
            background-color: pink;
        }
        ul li.bb2.bb3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="aa">1</li>
            <li class="bb bb2 bb3">2</li>
        </ul>
    </div>
</body>
</html>

效果：

JS

对象转化为数组的三种方式

Object.keys(obj) -----根据对象的键形成的数组（常用）
Object.entries(obj) ---- 根据对象的键值对形成的数组
Object.values(obj)----根据对象的值形成的数组