私は Vite/Vue3 の初心者で、現在コミュニティの知識を総合する必要があるという問題に直面しています。
Vite/Vue3 アプリケーションを作成し、TailwindCSS をインストールしました:
リーリーその後、Tailwind ホームページの指示に従いました。
すべてのテンプレート ファイルのパスを tailwind.config.js ファイルに追加します。
新しく作成した ./src/index.css ファイルを ./src/main.js ファイルにインポートします。
./src/index.css ファイルを作成し、@tailwind ディレクティブ Tailwind レイヤーを各ファイルに追加します。
現在、Vite/Vue3/TailwindCSS アプリを実行しているので、ダーク モードを切り替える機能を追加したいと考えています。
Tailwind のドキュメントには、darkMode: 'class' を tailwind.config.js に追加し、クラス dark を # に切り替えることでアーカイブを実行できると記載されています。 ##<html> タグ。
.remove() と .add() の代わりに element.classList.toggle() を使用できることはわかっています。しかし、おそらく私のような他の初心者も将来これを見て、手始めに簡単なコードを理解するでしょう。どうかご容赦ください...
このように DOM を操作するのが Vue のやり方ではないことはわかっています。もちろん、自分の目標は正しい方法で達成したいと思っています。
でも、どうすればいいでしょうか?
信じてください、Google で何時間も検索しましたが、これとこれとこの 追加の npm モジュールをインストールせずに機能する解決策は見つかりませんでした。
しかし、私はミニマリスト的なアプローチを望んでいました。私や学習を始めようとしている他の人たちを圧倒しないように、できるだけ依存しないようにしてください。これを背景として、私や他の初心者にとって有効な解決策はありますか? :-)
P粉3402642832023-11-02 09:11:13
イベントのターゲット要素はアプリケーションの外部にあります。これは、DOM で使用可能なメソッドを通じてクエリを実行する以外に、それを操作する方法がないことを意味します。
つまり、あなたは正しいことをしました。 要素がアプリケーション内にある場合は、クラスを属性にリンクするだけで、Vue に DOM 操作の詳細を処理させることができます。 リーリー
しかし、それは真実ではありません。
非常に重要なのは、トグル メソッドが <body> 要素にそのクラスがあるかどうかに依存しないことです。適用/削除されました。アプリケーションの状態に保存された値を保持する必要があり、これが唯一の信頼できる情報源となります。
これは、破ってほしくない Vue の原則です。つまり、データによって DOM 状態を制御するのであり、その逆ではありません。
値は、
(インストール時) の現在の状態から取得できますが、それ以降は、アプリケーションの状態の変更によって、クラスが要素に存在するかどうかが決まります。
vue2 例:
リーリー リーリー リーリー
リーリー リーリー リーリー
の状態を使用している場合は、ストレージ内の data 以外の場所に darkMode の状態を保持することをお勧めします。 、ローカルではありません (そして、compulated を介してコンポーネントに提供します)。