In-depth understanding of vue.js project development

One: Uncategorized

1. A single component or page can have multiple styles, mixing local and global styles

We can use both scoped and non-scoped styles in a component to achieve complex requirements:

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

Vue official document introduces Scoped
Scoped CSS | Vue Loader https://vue-loader.vuejs.org/zh/guide/scoped-css.html

When <style>the label has scoped attributes, its CSS only acts on the elements of the current assembly. This is similar to style encapsulation in Shadow DOM.

Pay attention to the scope of scoped, Because of the weight issue, if scoped is used in the child component, then the style of the child component cannot be directly modified in the parent component. You need to use the Vue deep action selector in the parent component.

.parent >>> .children{
    
     /* ... */ }

.parent /deep/ .children{
    
     /* ... */ }

Dynamically generated content
By v-htmlaffecting DOM content creation is not scoped style, but you can still set the style by deep acting selector for them.
There are some to pay attention to

• Scoped style cannot replace class . Considering how the browser renders various CSS selectors, when p {color: red} is scoped (that is, when used in combination with feature selectors), it will be many times slower. If you use class or id instead, such as .example {color: red }, the performance impact will be eliminated.

• Be careful to use descendant selectors in recursive components! For the CSS rules in selectors.a.b, if the element matching .a contains a recursive subcomponent, all subcomponents of .b will be affected by this rule match.

Articles to be studied:

• CSS scope in vue, scoped pits in vue-Gulenjing-Blog Park https://www.cnblogs.com/goloving/p/9119460.html

• Style attributes in vue components: scoped, to solve the problem of not being able to modify the style of sub-components in the parent component-Gulenjing-Blog Park https://www.cnblogs.com/goloving/p/9119265.html

• The principle of scoped in vue and the reason for cautious use-简书https://www.jianshu.com/p/b92e2a022cd8

2. Depth-action selector

If you want a selector in the scoped style to act "deeper", for example to affect subcomponents, you can use the >>> operator:

<style scoped>
.a >>> .b {
     
      /* ... */ }
</style>

The above code will be compiled into:

.a[data-v-f3f3eg9] .b { /* ... */ }

Some preprocessors like Sass cannot parse it correctly >>>. In this case you can use /deep/or ::v-deepoperator instead - both >>>alias, can also work.

Two: Solving common problems

1. The problem that the page does not automatically refresh after the modified page is saved, but can only be refreshed manually

1. In the project root directory, find vue.config.jsthe file named , if not, create a new one;
2. To devServerthe openset tue, as follows:

module.exports = {
    
    
    devServer : {
    
    
        hot:true,
        open : true,
        port : 8080,
        host : "0.0.0.0"
    }
}