Vue project

1, url case problem

Problem: The url input in the VUE project is case-sensitive, which affects the page display effect

Discovery: The page effect is affected by the case of parameters in the path, because the obtained parameters are case-sensitive, the page may not obtain the corresponding parameters

Solution: Convert the obtained parameters to lowercase and get

   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]; }}Copy the code

2. Control whether the v-ON binding event is triggered

<p @click="flag && clickEvent()"></p>Copy the code

3. The role of & in Scss (with hover and before)

.bordered{&.float {
    float: left;
  }
  .top {
    margin: 5px; }} is equivalent to:.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px; } / /.bordered.floatIs a series selector that works on the same tag //.bordered .topIt's a descendant selector that works on different tagsCopy the code

4. Reference custom fonts in VUE

① First: create a folder, put “huawen.ttf” font file into the project:

② Then: Create a font. SCSS (or font. CSS) file in this folder:

 @font-face {  
   font-family: 'huawen';  // Rename the font name
   src: url('huawen.ttf');  // Introduce fonts
   font-weight: normal;  
   font-style: normal;  
 }
Copy the code

③ In main.js

import '@/common/css/font.scss';
Copy the code

④ Finally: you can use custom fonts

div {
  font-family: 'huawen';
}
Copy the code

5. Click on the area other than the specified element to operate on the specified element (native JS)

Note: Note the orientation of this in the VUE project

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

6. Listen for the component lifecycle

For example, if a Parent component is mounted, and a Child component is mounted, the Parent component does some logical processing

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

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

There is a very simple way that the child component does not need to do anything, just need to use @hook to listen when the parent component refers to it. The code is rewritten as follows:

<Child @hook:mounted="doSomething"/>
Copy the code

Not only mounted can be monitored, but other lifecycle events, such as created and updated, can be monitored.

7, Vue package after modification, how to introduce JS?

① Create a new config.js file in public

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

Add config.js to the index.html entry file

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

③ Where to use where to value

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

The final packing result

Use of Element in vUE projects

1, El-Radio click again to deselect the effect

<el-radio-group V-model ="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio-group v-model="radio"> <el-radio @click.native </el-radio> <el-radio @click.native. Prevent =" clickItem (9)" :label="6" </el-radio @click.native. :label="9"> Optional </el-radio> </el-radio-group> clickItem (e) {e === this.radio? this.radio = "" : this.radio = e }Copy the code

css

In IE11, the browser arbitrarily added a close cross to the text input component:



Clear the text cross in IE to clear the CSS.

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

2. Solve the problem of adjacent border overlapping and bolding

  • Methods:The elementSet onThe direction ofThe margin of 1 px

3, the sibling class name write style without Spaces

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test the name of the class</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>
Copy the code

Effect:

JS

Three ways objects can be converted to arrays

  • Keys (obj) —– Array based on the keys of objects (common)
  • Object.entries(obj) —- An array based on the key-value pairs of objects
  • Object.values(obj)—- An array based on the values of an Object