How vue.js operates dom

Vue.js method of operating dom: 1. Native js operates dom, the code is [const dom = getElementById('box')]; 2. Use vue official method ref, the code is [< div class =“set” ref=“up”>].

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6, DELL G3 computer. This method is suitable for all brands of computers.

【Recommended related articles: vue.js】

vue.js method of operating dom:

1. Native js operation dom

const dom = getElementById(‘box')

2. Vue official method: ref

The ref in vue is to "extract the current dom element" "Come out", just pass this.$refs to get

< div class=“set” ref=“up”>

.set is the dom object we want to operate, and its ref is up

@click=“Alert”

to the parent The element has a click event,

Next let’s write this method

methods:{
  this.$refs.addAlert.style.display = “block”;
}

Do you still need CSS?

Then I’ll paste all the code here and you can see for yourself

There is more CSS than the text and scripts combined. If you can understand CSS, there is no reason why you can’t learn ref

There is also a third method, jQuery operates the dom. After reading this, I dare not use it

3. jQuery operates the dom

Just use the option of jQuery Tool, just select the corresponding dom to operate, but everyone knows that jQuery obtains elements to find all the elements on the page, which is equivalent to "looping" all elements until the required dom is found. However, vue is a single page, and jQuery obtains dom not just Get the current page of Vue, but search all from the root route. When the same element appears in other pages, it will also be obtained. Moreover, if the dom operated by jQuery is rendered based on dynamically obtained data, then the operation written in mounted The method will become invalid and must be placed in updated. This will cause some operations to be executed multiple times, so it is still not recommended to use jQuery in Vue.

Related free learning recommendations: javascript learning tutorial

The above is the detailed content of How vue.js operates dom. For more information, please follow other related articles on the PHP Chinese website!