Summarize and share three useful front-end tips!

This article brings you relevant knowledge about the front-end. It mainly talks about three tips that I have summarized in my front-end work. Friends who are interested can take a look at it. I hope it will be useful to you. help.

I have sorted out some tips that I encountered while coding at work, which seemed confusing at first, but were actually very simple to solve. I hope they will help. Everyone is helpful~

Pseudo elements dynamically change their styles

We have all used pseudo elements, what about::before,::after, etc. But none of them will directly generate tags in the HTML in the code, so sometimes we can’t add dom elements. It is easier to use pseudo-elements that change dom elements, as shown below:

The blue progress bar is implemented by dynamically changing the pseudo-element style, so let’s take a look at the specific implementation plan!

Add the inline style "--width" to the dom element. Of course, I want to change its width here. If you want to change the color or something, you can do it yourself. You need to name it

and then in the css:

Use var (--width) on the pseudo element to dynamically change its attributes. ~

Simple but fragrant vue modifier

The premise is that the vue framework is used~

Everyone will inevitably encounter the current page during development , after clicking a certain button, a function box with a mask layer will pop up on the page. When you are asked to click on the mask layer, the function box will disappear; at the same time, the function box will automatically Click button with function. Then here comes the problem. When you click the function button in the function box, the click event will be triggered first, and then the entire function box disappears, because when you click the function button in the function box, an event will bubble up. So how do we solve it very simply? You only need .stop, the following code, in HTML:

<div class="mask" @click="handleClickMask"> //这是遮罩层
    <div class="content-box">
        <Button @click.stop="handleClickButton">点我</Button>
    </div>
</div>

Yes, you read it right, you only need this .stop~

I gave this example because I think One of the most commonly used modifiers. Friends who want to know more can see the following URL

https://www.php.cn/vuejs/503749.html

After the data in vue is modified, the page is not updated

When you feel that you have changed the data, especially the more complex data types such as arrays, but the page rendering is not updated, this Are you wondering, "Huh? What about the two-way binding of data? Is it a lie?"

Every time I encounter this, I will first this.nextTick(() =>{} ) Give it a try. If you don’t know this method yet, go and search it yourself. You must have just entered the front-end pit not long ago~

If it still doesn’t work, I will [...xxx ], today it just doesn’t work, as follows:

Just convert it like this. If you directly traverse this.modelList, it will not work. You must use arr. I I think it's related to the fact that this thing is a complex data type. You can't just change its address, you have to change it itself.

Recommended: "Web front-end development video tutorial"

The above is the detailed content of Summarize and share three useful front-end tips!. For more information, please follow other related articles on the PHP Chinese website!