vue js 'document.getElementById' shorthand

Question

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

もしそうなら、私は他の情報を見つけることができるので、ドキュメント内でこれについての参考資料はどこにありますか？

Answer 1

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

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

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

編集：これは、Vueの2で廃止され、あなたが本当にdocument.querySelector単なるラッパーで使用できる要素Vue.util.queryを取得しようとしている場合

Answer 2

に答える胡亚雄見るけど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でVue.util.query

Answer 3

Theresの無い簡単な方法2.

ジェフの方法はすでにvue2で廃止されているようです。

Heres別の方法であなたの目標を達成することができます。

<div id="myDiv" ref="myDiv"> 
</div> 

methods: { 

    showMyDiv() { 
     console.log(this.$refs.myDiv); 
    } 
} 

Answer 4

あなたはAPIでこれらの2つのページの組み合わせで、あなたの答えを見つけることができます：refは要素への参照を登録するために使用される

• REF

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

• vm.$refs

refを登録している子コンポーネントを保持しているオブジェクトになります。

Answer 5

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

これにより、操作の制御が強化され、モジュラー形式の機能を管理できるようになります。