2017-08-14 5 views
2

私はVue.jsを学習目的のためだけに複製しようとしています。私はこれを行うことができる非常に基本的な用語でVue.jsは `v-on:click`セレクタをどのように選択しますか?

<button v-on-click="reverseMessage">Reverse Message</button> 
var element = document.querySelectorAll('[v-on-click]')[0] 

しかし、私は彼らがv-on:clickを選択する方法を知って興味があります。彼らは最初の要素の属性のすべてを取得するように見える、

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[v-on:click]' is not a valid selector.

+0

要素を検査し、何が生成されているかを調べます。 Vue.js Chrome拡張機能を使用することもできます。実際には、イベントが登録されているため、v-onは表示されません。vue.jsがルートをレンダリングした後をクリックします。 –

答えて

1

repository on Github for Vueを見て:私はdocument.querySelectorAll('[v-on:click]')をしようとすると

私はこのエラーを取得します。次に、各属性に対して正規表現const onRE = /^@|^v-on:/をテストし、一致する場合は、アトリビュート名から接頭辞v-on:または@を削除し(name.replace(onRE, '')経由)、処理するイベントの名前を残します。その後、彼らはイベントを処理します。

がここに彼らの方法の簡単な例です:あなたはquerySelectorAllを使用したい場合は

const vonReg = /^@|^v-on:/; 
 
let attributes = document.getElementById("foo").attributes; 
 

 
let names = []; 
 
for (let i = 0; i < attributes.length; i++) { 
 
    names.push(attributes[i].nodeName); 
 
} 
 

 
names.forEach((name) => { 
 
    if (vonReg.test(name)) { 
 
    let eventName = name.replace(vonReg, ''); 
 
    console.log('We need to handle this event: ' + eventName); 
 
    } 
 
})
<div id="foo" v-on:click="test"></div>


this postあなたはコロンをエスケープする必要があることを説明しています。あなたの場合、次のようになります:

document.querySelectorAll('[v-on\\3A click]') 
関連する問題