vue直接操作html，直接操作前端代码，通过id，或者class

1、通过ref操作
<divref="dades" class="dade"></div>


js中操作
获得class
const modalElement = this.$refs.dades.$el.querySelector('.dade');
1、直接在style加样式
modalElement.style.left =  '50px';
2、直接在class加样式绑定
modalElement.classList.add('dadeTop-style');
在写css样式下写
.dadeTop-style{
	top：30px
}
删除绑定的样式
element.classList.remove('dadeTop-style');

获得id绑定的html，通过win操作，获得后，操作方法和class的一样
const element = window.document.getElementById('dade');
if(element){
     element.classList.remove('dade-updated-style');
}


加事件
startDrag3(event){
      document.addEventListener('mousemove', this.drag);
 },
 //鼠标移动
 drag(event) {}

event操作
 <button @click="handleClick">点击我</button>
 <button @click="handleClick($event)">点击我</button>

 handleClick(event) {
      console.log('按钮被点击', event);
      //操作
       this.startY = event.clientY;
 },

通过id插入html

const element = window.document.getElementById('dade'+this.ids);
 if(element){
     element.classList.remove('dade-updated-style');
     element.innerHTML = "<div>大得来啦</div>"
      element.innerHTML += "<div>大得来啦</div>"
  }
//加点击事件，点击这个id，这里调用
 element.addEventListener('click', function () {
           console.log('元素被点击了');
});
//删除这部分html代码，包括id这一行
element.parentNode.removeChild(element);
//删除id里面的代码，不包括id这一行
element.innerHTML = "";

获得id，判断id这个标签中是否存在某个class

		const element = window.document.getElementById('dade'+this.ids);
          if(element && element.classList.contains('dade-updated-style')){
             this.$emit('update:parentValue', false);
             // console.log("存在")
          }