vuejsでdomを取得する方法

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

この記事の動作環境: 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()

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>

コンソール出力:

コンソール 出力
の が temp コンポーネント ## であることがわかります。 ＃。 ここで注目したいのは、コンポーネントのさまざまなプロパティ (例: $ el、$parent など) です... console.log(this.$refs. tmp) to:

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

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

概要:

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

$children: · · · · · · · · · · ·
• # の子コンポーネント$root: 新しい Vue のインスタンスを取得します (つまり、上記: vm)
• $el: 現在のコンポーネントの DOM 要素を取得します
• 2. DOM 要素へのイベントの追加

---

例:

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

<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 も未定義です。なぜ 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 />`,
});

---

推奨学習: "

最新の 5 つの vue.js ビデオ チュートリアル特徴＃＃＃"＃＃＃＃＃＃＃＃＃

以上がvuejsでdomを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。