vuejsでdomを取得する方法-Vue.js-php.cn

vuejsでdomを取得する方法

藏色散人

リリース： 2021-11-04 14:40:50

オリジナル

3210 人が閲覧しました

Vuejs で dom を取得する方法: 1. コンポーネントの DOM 部分で、任意のタグに「ref="xxx"」を記述します。 2. コンポーネントオブジェクト「this.$refs.xxx」を通じて要素を取得します。 "。できる。

vuejsでdomを取得する方法

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue.js 学習例: DOM 要素の取得

##1. DOM 要素の取得

Vue で DOM 要素を取得するには、

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>

ログイン後にコピー

Console出力:

注: this.$refs.btn は、mounted() vuejsでdomを取得する方法

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 コンポーネント ## であることがわかります。＃。 ここで注目したいのは、コンポーネントのさまざまなプロパティ (例: $ el、$parent など) です... console.log(this.$refs. tmp) to:

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

ログイン後にコピー

コンソールは次の図を出力します。そこから $el が何を表すかを知ることができます~

概要: vuejsでdomを取得する方法

$parent: 現在のコンポーネントの親コンポーネントを取得します。

例:

要件: 入力要素が表示された時点で入力のフォーカスを取得します。

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

ログイン後にコピー

実行後に報告されたエラー:

エラーメッセージは、フォーカスが存在しないことを示しています。理由は
this. $refs.myInput vuejsでdomを取得する方法も未定義です。なぜ ref は DOM 要素を取得しないのでしょうか?
まず考えてみましょう。実装されている関数を

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

ログイン後にコピー

に変更した場合、操作プロセス中に、input 要素が最初に表示され、次に消え、その後再び表示されるでしょうか。

答えは否定的です。

Vue では最初にコードが実行され、次に最終値に基づいて DOM 操作が実行されるためです。

実際、上記のコードは次のコードと同等です:

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

ログイン後にコピー

それでは、どうやって解決すればよいでしょうか?

ここでは、

$nextTick

を使用して ~

vm.$nextTick

使用する場合:

Vue で DOM をレンダリングするページの直後に何かをするには、$nextTick

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

ログイン後にコピー

修正バージョン:

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

ログイン後にコピー

推奨学習: "