web-dev-qa-db-ja.com

vue.js 'document.getElementById'の短縮形

Vue.jsには、JQueryのdocument.getElementById('#id')のような$('#id')の省略形がありますか？

もしそうなら、私は他の情報を見つけることができるように、ドキュメント内のこのリファレンスはどこにありますか？

jquerygetelementbyidvue.js
35
Mike Thrussell

vue 2には簡単な方法はありません。

ジェフのメソッドは、vue 2ですでに非推奨になっているようです。

目標を達成する別の方法があります。

 var app = new Vue({
    el:'#app',
    methods: {    
        showMyDiv() {
           console.log(this.$refs.myDiv);
        }
    }
    
   });
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id='app'>
   <div id="myDiv" ref="myDiv"></div>
   <button v-on:click="showMyDiv" >Show My Div</button>
</div>
70
胡亚雄

ディレクティブv-elを使用して要素を保存し、後で使用できます。

https://vuejs.org/api/#vm-els

<div v-el:my-div></div>
<!-- this.$els.myDiv --->

Edit：これは Vue 2で非推奨 、胡亚雄の回答を参照

11
Jeff

DOMを直接参照してDOM操作を行わないようにしてください。多くのパフォーマンスの問題があります。また、DOMに直接アクセスしようとすると、イベント処理がよりトリッキーになり、代わりにデータとディレクティブを使用してDOMを操作します。

これにより、操作をより細かく制御できるようになり、モジュール形式で機能を管理できるようになります。

5
Vishal

API のこれら2つのページの組み合わせで答えを見つけることができます。

refは、要素または子コンポーネントへの参照を登録するために使用されます。参照は、親コンポーネントの$ refsオブジェクトの下に登録されます。プレーンなDOM要素で使用される場合、参照はその要素になります

Refが登録されている子コンポーネントを保持するオブジェクト。

5
Soorena

要素を取得しようとしている場合は、Vue.util.queryの実際の単なるラッパーであるdocument.querySelectorを使用できますが、14文字と22文字（それぞれ）で技術的に短くなります。また、検索している要素が存在しない場合のエラー処理もあります。

Vue.utilに関する公式ドキュメントはありませんが、これは関数の完全なソースです。

function query(el) {
  if (typeof el === 'string') {
    var selector = el;
    el = document.querySelector(el);
    if (!el) {
      ({}).NODE_ENV !== 'production' && warn('Cannot find element: ' + selector);
    }
  }
  return el;
}

リポジトリリンク： Vue.util.query

5
Taylor Glaeser