Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Today mainly share three tips, relatively simple, is a skill can also be regarded as a summary, respectively

  • v-forThe deconstruction
  • Depth selectors jump out of scoped style overrides
  • Mixin local and global styles

v-forThe deconstruction

List all the ways in which v-for deconstructs

  • The first is the most common way of deconstruction, which is the first way we can think of deconstruction
<ul >
    <li v-for="{ title, id } in tuts" :key="id">{{title}}</li>
</ul>
Copy the code
tuts:[
    {id:0,title:"machine learning"},
    {id:1,title:"deep learning"},
    {id:2,title:"meta learning"},
]
Copy the code
  • And then you know the use of tuple form to get the list sequence index information.
<ul>
    <li v-for="(title,index) in [
    'Machine learing',
    'Deep learning',
    'Meta learning'
    ]" :key="index">{{index + 1}} - {{title}}</li>
</ul>
Copy the code
  • When you deconstruct an object, the first value for each property is the property value and the second value is the property name
<ul>
    <li v-for="(value,key) in {
    'title':'machine learning',
    'lesson':12,
    'author':'mike'
    }" :key="key">{{ key}} : {{value}}</li>
</ul>
Copy the code

In the case of deconstructed objects, we can also get the index information of the attribute through the third value of the tuple

<ul>
    <li v-for="(value,key,index) in {
    'title':'machine learning',
    'lesson':12,
    'author':'mike'
    }" :key="index">{{index + 1}} {{ key}} : {{value}}</li>
</ul>
Copy the code

Depth selectors jump out of scoped style overrides

CSS in Scoped solves the problem of style overwriting between components and makes code look cleaner, but sometimes we need to go beyond that and overwrite the child from the parent component, which is where Vue’s depth selector comes in.

<style scoped>
 .parent-component >>> .child-compoent{
  font-size: 36px;
}
</style>
Copy the code

App.vue

<div class="parent-component">
    <child/>
</div>
Copy the code
<style scoped>
 .parent-component >>> .child-compoent{
  font-size: 36px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

Child.vue

<template>
    <div>
        <h1 class="child-component">Child Component</h1>
    </div>
</template>
Copy the code

Mixin local and global styles

In general, we want a component to be relatively independent, with some boundary and domain independence, so styles are usually defined as scoped

<style scoped>
  .component {
    background: orangered;
  }
</style>
Copy the code

However, sometimes we don’t want duplicate styles, so we need to separate what is global and what is component within the component and define two scopes to define them

<style> /* global style */. Component p {margin-bottom: 16px; } </style> <style scoped> /. Component {background: green; } </style>Copy the code