Interview questions encountered in vue

What is the highest priority in css?

selector weight

idThe selector has a weight of 100
The tag selector has a weight of 1
classThe selector has a weight of 10
The inline selector has a weight of 1000

!importantpriority is highest

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        
        
        color: yellow !important;
      }
      .title {
        
        
        color: blue;
      }
      .text {
        
        
        color: pink;
      }
    </style>
  </head>
  <body>
    <div id="title" class="text" style="color: red">css权重优先级</div>
  </body>
  <script></script>
</html>

true and false values in js

In js false values are 0, false, null, '', undefined,NaN

  <script>
    console.log(Boolean(0)); // false
    console.log(Boolean(false)); // false
    console.log(Boolean("")); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    console.log(Boolean(NaN)); // false
  </script>

In js the truth value has true, [],{}

  <script>
    console.log(Boolean(true)); // true
    console.log(Boolean([])); // true
    console.log(Boolean({
      
      })); // true
  </script>

vue interview questions

1. `v-if`and `v-show`the difference

1.1 Difference 1: The form of display is different

v-ifis to create a domnode

isShowwhen falsewhen

<template>
  <div class="home">
    <h1 v-if="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: false, 
    };
  },
};
</script>

insert image description here

isShowwhen truewhen

<template>
  <div class="home">
    <h1 v-if="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: true, 
    };
  },
};
</script>

insert image description here

v-showYesdisplay:none、block

isShowwhen falsewhen

<template>
  <div class="home">
    <h1 v-show="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

insert image description here

When isShowis true, there is no change or the label is created normally.

<template>
  <div class="home">
    <h1 v-show="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

insert image description here

1.2 Difference 2: Different usage scenarios

The first load is v-ifbetter v-show, the page doesn't load more boxes.
Frequent switching is better, creating and deleting are too expensive, and showing and hiding is less expensive v-show.v-if

2. `scoped` Principle

2.1 Function:

Let the style take effect in this component without affecting other components.

When no scoped is added to the style

inside home.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>
export default {};
</script>

<style>
h1 {
  color: red;
}
</style>

Inside about.vue

<template>
  <div class="about">
    <h1>其他</h1>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

insert image description here

2.2 Principle:

Add custom properties to nodes, and then css adds styles based on property selectors.

After adding scoped to home.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

Inside about.vue

<template>
  <div class="about">
    <h1>其他</h1>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

insert image description here