Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the practical skills of Vue code". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The new syntax of slots is the same as 3.0.

❝uses a new named slot abbreviation syntax with "#", which is available in Vue 2.6.0 +. ❞

For example:

When building slots, it is best to plan the layout. This is the layout of my article.

Building slots is no different from building components. In essence, slots are components with super functions. Let's break down the layout above. The appearance of the components is as follows:

I am the header

I am the content

I am the footer I am the side stuff I am the banner

Dynamic instruction parameter

❝instruction parameters can now accept dynamic JavaScript expressions dynamic parameter values should be strings, but it would be convenient to allow null as a special value that explicitly indicates that bindings should be removed. Any other non-string value can go wrong and trigger a warning. (for v-bind and v-on only) ❞

/ / abbreviated

The attributeName here will be dynamically evaluated as a JavaScript expression, and the resulting value will be used as the final parameter. For example, if your Vue instance has a data property attributeName with a value of href, then this binding will be equivalent to v-bind:href. Similarly, you can use dynamic parameters to bind a dynamic event name handler function:

/ / abbreviated

When the value of eventName is focus, v-on: [eventName] will be equivalent to v-on:focus.

It can also be applied to slot binding:

Dynamic slot name / / abbreviated Default slot

The dynamic parameter is expected to produce a string, which is null in the exception case. This special null value can be used explicitly to remove bindings. Any other non-string type value will trigger a warning.

...

The workaround is to use an expression without spaces or quotation marks, or to replace this complex expression with an evaluated attribute.

@ hook, those things.

Steps to process timers within a component. This is what we usually do:

Export default {mounted () {this.timer = setInterval (() = > {...}, 1000);}, beforeDestroy () {clearInterval (this.timer);}}

But it's actually a better thing to do:

Export default {mounted () {const timer = setInterval (() = > {...}, 1000); this.$once ('hook:beforeDestroy', () = > clearInterval (timer);)}}

Imagine a scenario where we need to loading the page before the data is rendered to the page. Stop loading after mounted. Start loading when beforeUpdata. Stop loading after updatad.

The easiest way is to overwrite the component's life cycle function to tell the parent component to show or hide the loading when mounted/beforeUpdata / updatad occurs.

This does not show well because it invades the logic of the component, and the added logic is not related to the functionality of the component itself. The best way is to use the vMuon = "hook:xxx" way:

In this way, the monitoring of the life cycle of the subcomponents is realized. It has an effect on any component, including introduced third-party components.

$props, $attrs and $listeners in vue (can be used to re-encapsulate components)

❝$props: the props object received by the current component. The Vue instance proxies access to its props object properties. ❞

Suppose there is an input input box. We have many native properties, such as name, placeholder, disabled, and so on. It would be too cumbersome for us to define reception on props display. So there is an operation on the official website: v talk bind = "$props". If the parent component passes a lot of native properties, we can directly do this in the child component:

/ / good / / bad / / instead of the following, if many properties are particularly cumbersome

❝We can use the following way $attrs to pass native attributes directly to child components, which is a new property added by Vue in 2.4.0, including feature bindings (except class and style) that are not recognized (and acquired) as prop in the parent scope. When a component does not declare any prop, it contains bindings for all parent scopes (except class and style), and internal components can be passed in via vClure bind = "$attrs"-- useful when creating high-level components. ❞

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.