Vue コンポーネントが Dom 経由で要素を取得できない問題について

問題の説明:

最近、もっと見栄えの良いログインインターフェースを作りたくて、codepenで関連資料を探してみたところ、通常はページ要素の切り替えは問題ないのですが、vueコンポーネントをパッケージ化しようとしたところ、ページ スタイルを変更できませんでした。関連する document.querySelector の操作は要素を取得できず、戻り値は常に null です。したがって、関連するスタイルの変更は有効になりません。

問題分析:

Vue はテンプレートを使用して HTML を作成することを推奨しています。しかし、テンプレートは結局テンプレートであり、実際の dom ノードではありません。Vue will first use the render function in the object to generate a virtual node and mount it. マウントされた実際の DOM は非同期でレンダリングされ、状態が変更された後にも非同期でレンダリングされます。document.querySelector 操作はコード内で同期タスクとして定義されており、イベント キューは次のようになります。

• 同期キュー: dom 要素を取得します。
• 非同期キュー: 仮想ノードから実ノードに転送してレンダリング

同期→非同期の実行過程ではdom要素が取得できない

解決：

直接DOMを取得することはできないため、コンポーネントのロード後に関連要素の操作を試すことができます. 1. setTimeoutメソッドを使用して、動的に一定時間(この時間は非常に短い)後にdom要素を取得する操作を実行します.要素を作成しています。または、window.addEventListener("load", メソッド名) を使用して、ページが読み込まれた後に操作します。

ソースコード内の関連する位置を移動するだけで、dom'element 操作を取得できます

<script >

let getButtons = (e) => e.preventDefault()

let changeForm = (e) => {
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch__circle");
    
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");
    let switchCtn = document.querySelector("#switch-cnt");
    switchCtn.classList.add("is-gx");
    setTimeout(function(){
        switchCtn.classList.remove("is-gx");
    }, 1500)

    switchCtn.classList.toggle("is-txr");
    switchCircle[0].classList.toggle("is-txr");
    switchCircle[1].classList.toggle("is-txr");
    switchC1.classList.toggle("is-hidden");
    switchC2.classList.toggle("is-hidden");
    aContainer.classList.toggle("is-txl");
    bContainer.classList.toggle("is-txl");
    bContainer.classList.toggle("is-z200");
}
let mainF = (e) => {
    let allButtons = document.querySelectorAll(".submit");
    let switchBtn = document.querySelectorAll(".switch-btn");
    for (var i = 0; i < allButtons.length; i++)
        allButtons[i].addEventListener("click", getButtons );
    for (var i = 0; i < switchBtn.length; i++)
        switchBtn[i].addEventListener("click", changeForm)
}
window.addEventListener("load", mainF);
</script>

プロジェクトのソース アドレス:

https://codepen.io/ricardoolivaalonso/pen/YzyaRPN https://codepen.io/ricardoolivaalonso/pen/YzyaRPN

その後、プロジェクトの完全な分析が行われます. 興味のある友人は私と一緒に勉強することができます, そして私を修正してください.