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

<template>
    <div id="app">
        <div class="index-box">
            <!--新增按钮-->
            <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
            <!--新增数据源弹框-->
            <div class="addDbSource-alert" ref="addAlert">
                <div class="addAlert-top">
                    <!--添加数据源-->
                    <input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
                </div>
                <div class="addAlert-content">
                    <div style="height: 1000px;"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Index",
        data(){
            return {
            }
        },
        methods:{
            // 点击新增按钮，弹出新增数据源的弹框
            showAddAlert(){
                this.$refs.addAlert.style.display = "block";
            },
            // 点击 × 关闭新增数据源的弹框
            closeAddAlert(){
                this.$refs.addAlert.style.display = "none";
            },
        },
        created(){
        }
    }
</script>
<style scoped>
    #app{
        width:100%;
        height:100%;
        overflow-y:auto;
    }
    /* 容器 */
 .index-box{
  width: 100%;
  height: 100%;
  background: #212224;
  display: flex;
 }
 /* 添加数据源按钮 */
 #DbManagement-addBtn {
  width: 100px;
  height: 45px;
  border: none;
  border-radius: 10px;
  background: rgba(29, 211, 211, 1);
  box-shadow: 2px 2px 1px #014378;
  margin-left: 20px;
  margin-top: 17px;
  cursor: pointer;
  font-size: 20px;
 }
 /*新增数据源弹框*/
 .addDbSource-alert{
  position: fixed;
        top:0;left:0;right:0;bottom:0;
        margin:auto;
  width: 4rem;height: 4rem;
  background: #2b2c2f;
  display: none;
 }
 /*新增弹框头部*/
 .addAlert-top{
  width: 100%;
  height: 50px;
  background: #1dd3d3;
  line-height: 50px;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 20px;
 }
 /*新增弹框关闭*/
 .addAlert-close{
  background: #1dd3d3;
  border: none;
  font-size: 30px;
  cursor: pointer;
  float: right;
  margin-right: 20px;
  margin-top: 5px;
 }
 /*新增弹框内容部分*/
 .addAlert-content{
  width: 100%;
  box-sizing: border-box;
  padding: 0px 30px 20px;
 }
 /* 滚动条效果 */
 /* 设置滚动条的样式 */
 .addAlert-content::-webkit-scrollbar {
  width: 5px;
 }
 /* 滚动槽 */
 .addAlert-content::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1);
  border-radius: 10px; */
 }
 /* 滚动条滑块 */
 .addAlert-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(29, 211, 211, 1);
  /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
 }
 .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(29, 211, 211, 1);
 }
</style>

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!