vue js操作dom

桃扇骨 2022-12-07 01:22 202阅读 0赞

先回顾下原生js和jquery操作dom：

一、原生js操作dom：

（1）通过id获取：

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

（2）通过class名称获取：

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得数组

（3）通过标签名称获取：

var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组

二、jquery操作dom：

三、vue js操作dom：ref

语法：let dom = this.$refs.ref名。

如：

<input ref="messageFile" @change="messageFileHandler" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="messageFile" style="position:absolute;clip:rect(0 0 0 0);">
    
     messageFileHandler() {
          this.messageFileName = this.$refs.messageFile.files[0].name;
     }

<el-col :span="4" >
                <div ref="pie" class="pie-div" ></div>
              </el-col>
    
    this.Pie = this.$echarts.init(this.$refs.pie);
    this.pie.setOption(this.pieData, true);

this.$refs.addAlert.style.display = "block";

四、区别：如我在父页面parent中循环调用了子组件child多次，child中是一个echarts，在child中给这个echarts设置了宽度

<div class="container" id="container">
        <div ref="gaugeChart" class="gauge-div" id="gaugeChart"></div>
      </div>
    
     
    
    
    mounted() {
        this.initCharts();
      },
     methods: {
        resizeGaugeWidth() {
          //宽度
          let outWidth = document.getElementById('container').clientWidth;
          //document.getElementById('gaugeChart').style.width = outWidth + 'px';
          this.$refs.gaugeChart.style.width = outWidth + 'px';
        },
        initCharts() {
          this.resizeGaugeWidth();
          this.gaugeChart = this.$echarts.init(this.$refs.gaugeChart);
          this.gaugeChart.setOption(this.gaugeOption, true);
          //宽度自适应
          window.onresize = () => {
            alert(this.titleName);
            this.resizeGaugeWidth();
            this.gaugeChart.resize();
          };
        }
    }
    
    
    
    .container {
      .gauge-div {
        height: 150px;
        width: 100%;
        margin: 0px;
        display: inline;
      }
    }

这时如果用document.getElementById('gaugeChart')，发现只有第一个仪表盘生效了，其他的宽度不生效；而用refs所有的都生效了。