Bagaimana untuk mendapatkan dom dalam vuejs

Kaedah Vuejs untuk mendapatkan dom: 1. Dalam bahagian DOM komponen, tulis "ref="xxx"" dalam mana-mana teg 2. Dapatkan elemen melalui objek komponen "this.$refs.xxx ". Boleh.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Kajian contoh Vue.js: Dapatkan elemen DOM

1. Dapatkan elemen DOM

Untuk mendapatkan elemen DOM dalam Vue, kita boleh menggunakan ref.

Penggunaan (sama seperti React):
(1) Dalam bahagian DOM komponen, tulis dalam mana-mana teg: ref="xxx"
(2) Dapatkan elemen this.$refs.xxx 🎜>

1 Dapatkan DOM teg HTML

Contoh 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>

Output konsol:

Nota: Hanya apabila mounted() Dapatkan ini.$refs.btn

---

2 Dapatkan DOM komponen

Contoh 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>

Output konsol:

Kami melihat
输出 konsol 是. temp组件 Apa yang ingin kita fokuskan di sini ialah pelbagai atribut komponen (cth: $ el, $ parent, dll.)...

Jika kita menukar console.log(this.$refs. tmp) kepada:

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

Konsol akan mengeluarkan gambar berikut, dari mana kita boleh tahu apa yang diwakili oleh $el~

Ringkasan:

$ibu bapa: Dapatkan komponen induk bagi komponen semasa
$anak: komponen anak bagi ······················
$root: dapatkan contoh Vue baharu (iaitu Di atas: vm)
$el: Dapatkan elemen DOM bagi komponen semasa

---

2. Kes khas menambahkan acara pada elemen DOM

Contoh:

Keperluan: Dapatkan fokus input pada saat elemen input dipaparkan

<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>

Satu ralat dilaporkan selepas dijalankan:

Mesej ralat menunjukkan bahawa fokus tidak wujud kerana
Ia juga tidak ditentukan Mengapa ref tidak mendapat elemen DOM? this.$refs.myInput

Mari kita fikirkan dahulu, jika kita menukar fungsi yang dipasang kepada:

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

Semasa operasi, adakah elemen input akan dipaparkan dahulu, kemudian hilang, dan kemudian dipaparkan semula?

Jawapannya tidak.
Sebenarnya, kod di atas adalah bersamaan dengan kod berikut: 因为Vue会先让代码执行完，然后才会根据最终的值，进行DOM操作。

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

Jadi bagaimana untuk menyelesaikannya?

Di sini kami menggunakan

untuk menyelesaikan~$nextTick

---

vm.$nextTick

Bila menggunakan:

在Vue渲染DOM到页面后 立即做某件事，用$nextTick

this.$nextTick(function() {
   ·····dosomething
})

---

Versi diubah suai:

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 />`,
});

Pembelajaran yang disyorkan: "

Pilihan tutorial video 5 vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan dom dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!