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

This article is about how to add dom to vuejs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Vuejs plus dom method: 1, first new to create an instance; 2, manually mount to the dom node; 3, the use of "$appendTo/$before/$after" and other methods for interpolation.

This article operating environment: Windows7 system, Vue2.9.6 version, DELL G3 computer

How to add dom to vuejs?

The method of inserting dom nodes with vue.js

This article mainly introduces the method of inserting vue.js into dom node, so let's take a look at the detailed introduction.

Html Code:

Js Code:

Var MyComponent = Vue.extend ({template:'

Hello World

'}) var myAppendTo = Vue.extend ({template:'

AppendTo

'}) var myBefore = Vue.extend ({template:'

Before

'}) var myAfter = Vue.extend ({template:'

After

) / / create and mount to # app (replace # app) new MyComponent (). $mount ('# app'); / / manually mount new myAppendTo (). $mount (). $appendTo ('# app'); / / appendTonew myBefore (). $mount (). $before ('# app'); / / beforenew myAfter (). $mount (). $after ('# app'); / / after

Description:

1. Compared to the way jquery's dom node is inserted, vue.js interpolation requires creating an instance using first new and then using $mount ().

two。 Manually mount it into the dom node, and then use methods such as $appendTo/$before/$after to interpolate.

3. This idea of manipulating dom is not actually the way that vue advocates, but the way that vue advocates is to manipulate data to achieve the results you want.

The idea of 4.vue is that the dom already exists and can be controlled by judgment to show and hide.

5. So when using vue, try to change the way you think about using jquery, just like the v-if provided by api.

Show Hidden

You can also control display hiding through (v-show):

Display

So the difference between v-if and v-show:

When switching v-if blocks, Vue.js has a partial compilation / unload process, because templates in v-if may also include data bindings or subcomponents.

V-if is a true conditional rendering because it ensures that the conditional block destroys and rebuilds the event listeners and subcomponents within the conditional block appropriately during the switch.

V-if is also lazy: if the condition is false at the time of the initial rendering, nothing is done-- partial compilation starts when the condition becomes true for the first time (compilation is cached).

V-show, by contrast, is much simpler-elements are always compiled and retained, simply based on CSS switching.

In general, v-if has a higher switching cost and v-show has a higher initial rendering cost. Therefore, if you need to switch v-show frequently, it is better

V-if is better if conditions are unlikely to change at run time.

Thank you for reading! This is the end of the article on "how to add dom to vuejs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.