>  기사  >  웹 프론트엔드  >  vuejs에서 DOM을 얻는 방법

vuejs에서 DOM을 얻는 방법

藏色散人
藏色散人원래의
2021-11-04 14:40:503182검색

vuejs에서 DOM을 얻는 방법: 1. 구성 요소의 DOM 부분에서 임의의 태그에 "ref="xxx""를 씁니다. 2. 구성 요소 개체 "this.$refs.xxx"를 통해 요소를 가져옵니다.

vuejs에서 DOM을 얻는 방법

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue.js 예제 연구: DOM 요소 가져오기

1. DOM 요소 가져오기

Vue에서 DOM 요소를 가져오려면 ref를 사용할 수 있습니다. ref

用法(和React一样):
(1)在组件的DOM部分,任意标签中 写上:ref="xxx"
(2)通过组件对象 this.$refs.xxx 获取到元素

1、获取HTML标签的DOM

例1:
<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <button ref="btn">我是按钮</button>    
      </div>`,
    beforeCreate() {
      //这里不能操作数据
      console.log(&#39;beforeCreate: &#39;, this.$refs.btn);
    },
    created() {
      //这里可以操作数据了
      console.log(&#39;created: &#39;, this.$refs.btn);
    },
    beforeMount() {
      //new Vue 发生装载, 替换 <div id="app">之前
      console.log(&#39;beforeMount: &#39;, this.$refs.btn);
    },
    mounted() {
      //装在数据之后
      console.log(&#39;mounted: &#39;, this.$refs.btn);
    }, 
  };

  new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

控制台输出:
vuejs에서 DOM을 얻는 방법
说明:mounted()时才能获取this.$refs.btn


2、获取组件的DOM

例2:
<div id="app"></div>

<script type="text/javascript">
  let Temp = {
    template: `
      <div>我是子组件</div>
    `,
  };
  let App = {
    components: {
      temp: Temp,
    },
    template: `<temp ref="tmp"/>`,
    mounted() {
      console.log(this.$refs.tmp);
    },
  };

  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

控制台输出:
vuejs에서 DOM을 얻는 방법
我们看到控制台输出 temp组件
这里我们要关注的是 组件的 各个属性(eg: $ el、$ parent 等)···

假如我们把console.log(this.$refs.tmp)改为:

console.log(this.$refs.tmp.$el);

控制台会输出下图,由此可知 $el 代表着什么~
vuejs에서 DOM을 얻는 방법

总结:
  • $parent: 获取当前组件的父组件
  • $children:················ 的子组件
  • $root:获取new Vue的实例 (即上面的:vm)
  • $el: 获取当前组件的DOM元素

二、给DOM元素添加事件的特殊情况

例:

要求:在显示input元素的瞬间,获取input的焦点

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <input type="text" v-if="isShow" ref="myInput" />
      </div>`,
    data() {
      return {
        isShow: false,
      };
    },
    mounted() {
      this.isShow = true;    //显示input元素
      this.$refs.myInput.focus();  //获取input的焦点
    },   
  };

  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

运行后报错:
vuejs에서 DOM을 얻는 방법
报错显示focus不存在,原因是 this.$refs.myInput 也是undefined,为什么ref没获取到DOM元素呢?

我们先思考,如果我们把mounted函数内改成:

mounted() {
      this.isShow = true;  
      this.isShow = false;  
      this.isShow = true;  
},

运行过程中,input元素会 先显示,再消失,然后再显示吗?
答案是否定的。因为Vue会先让代码执行完,然后才会根据最终的值,进行DOM操作。 其实上面的代码等同于下面的代码:

mounted() {
      this.isShow = true;  
},

那么怎么解决呢?

这里我们用 $nextTick解决~


vm.$nextTick

什么时候用:在Vue渲染DOM到页面后 立即做某件事,用$nextTick

사용법(React와 동일):
(1) 구성 요소의 DOM 부분에 ref="xxx"
태그를 작성합니다. (2) 구성 요소 개체 this.$refs.xxx 요소 가져오기

1. HTML 태그의 DOM 가져오기

예 1:
this.$nextTick(function() {
   ·····dosomething
})

콘솔 출력:

참고: 마운트() 시 획득 this.$refs.btn

2. 구성요소의 DOM 가져오기

예 2:
let App = {
  template: `
    <div>
      <input type="text" v-if="isShow" ref="myInput" />
    </div>`,
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    //显示input元素的瞬间,获取焦点
    this.isShow = true;
    this.$nextTick(function() {
      this.$refs.myInput.focus();  
    });
  },
  
};

let vm = new Vue({
  el: &#39;#app&#39;,
  components: {
    app: App
  },
  template: `<app />`,
});
콘솔 출력:
여기에 이미지 설명 삽입
다음의 출력이 표시됩니다. 콘솔은 임시 구성요소입니다.
여기서 집중하고 싶은 것은 구성 요소의 다양한 속성(예: $el, $parent 등)입니다... 🎜🎜console.log(this.$refs.tmp)를 다음으로 변경하면 : 🎜rrreee🎜Control 스테이션은 다음 그림을 출력하며, 이를 통해 $el이 무엇을 나타내는지 알 수 있습니다~
여기에 이미지 설명 삽입🎜
요약:
  • $parent: 현재 구성요소의 상위 구성요소 가져오기
  • $children:···· ············
  • $root의 하위 구성 요소: 새 Vue의 인스턴스 가져오기(예: 위: vm)
  • $el: 현재 컴포넌트 DOM 요소 가져오기
🎜🎜 2. DOM 요소에 이벤트를 추가하는 특별한 경우 🎜🎜 예: 🎜🎜 요구 사항: 입력 순간에 입력의 포커스를 가져옵니다. 요소가 표시됩니다 🎜rrreee🎜 실행 후 오류: 그림 삽입 설명은 여기
오류 보고서 포커스가 존재하지 않음을 나타냅니다. 이유는 this.$refs.myInput도 정의되지 않았기 때문입니다. ref가 DOM 요소를 가져오지 못하는 이유는 무엇입니까? 🎜🎜먼저 생각해보자. 탑재된 기능을 🎜rrreee🎜로 변경하면, 동작 중에 입력 요소가 먼저 표시되었다가 사라졌다가 다시 표시되나요?
답은 '아니요'입니다. Vue는 코드 실행을 먼저 마친 다음 최종 값에 따라 DOM 작업을 수행하기 때문입니다. 실제로 위 코드는 다음 코드와 동일합니다. 🎜rrreee🎜그럼 어떻게 해결할까요? 🎜🎜여기서는 $nextTick을 사용하여 해결합니다~🎜🎜

vm.$nextTick

🎜사용 시기: Vue가 DOM을 페이지에 렌더링한 직후에 작업을 수행합니다. $nextTick 사용🎜rrreee🎜🎜수정된 버전:🎜rrreee🎜권장 학습: "🎜5개의 vue.js 비디오 튜토리얼 중 최신 선택🎜"🎜🎜🎜

위 내용은 vuejs에서 DOM을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.