Vue h関数の使い方の詳しい説明

Vue h関数の使い方の詳しい説明

1. 理解

ドキュメント: https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91

h() は正確には何を返すのでしょうか?実際には実際の DOM 要素ではありません。より正確な名前は createNodeDescription かもしれません。これは、そこに含まれる情報が、子ノードの説明情報など、ページにレンダリングする必要があるノードの種類を Vue に伝えるためです。このようなノードは「仮想ノード」と呼ばれ、多くの場合 VNode と略されます。 「仮想 DOM」とは、Vue コンポーネント ツリーによって構築される VNode ツリー全体のことです。

2. 使用

ドキュメント: https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0

1. h() パラメータ

h() 関数は、VNode を作成するためのユーティリティです。おそらく、より正確には createVNode() という名前が付けられるかもしれませんが、頻繁に使用され、簡潔であるため、h() と呼ばれます。次の 3 つのパラメータを受け入れます。

 // @returns {VNode}
h(
    // {文字列 | オブジェクト | 関数} タグ
    // HTML タグ名、コンポーネント、非同期コンポーネント、または // 機能コンポーネント。
    //
    // 必須。
    'div',

    // {オブジェクト} プロパティ
    // 属性、プロパティ、イベントに対応するオブジェクト。
    // これはテンプレートで使用されます。
    //
    // オプション(開発中は渡すことをお勧めします。渡す必要がない場合は null を渡します)
    {},

    // {文字列 | 配列 | オブジェクト} 子
    // `h()` を使用して構築されたサブ VNode、
    // または、文字列を使用して「テキスト VNode」またはスロットを持つオブジェクトを取得します。
    //
    // オプション。
    [
        「テキストが先に来ます。」
        h('h1', '見出し'),
        h(MyComponent, {
            いくつかのプロパティ: 'foobar'
        })
    ]
)

2. 使い方が簡単

3. カウンターケースを実装する

<スクリプト>
/* スタイルを設定するには、ここでインポートする必要があります。スタイルタグを使用する場合、scoped を記述できず、ローカルスタイルの設定に役立たないため、推奨されません */
「./style.css」をインポートします
"vue" から { h, ref } をインポートします。

エクスポートデフォルト{
    // データの書き込み方法 // data() {
    // 戻る {
    // カウンター: 0
    // }
    // },
    設定() {
        定数カウンタ = ref(0)
        戻り値 { カウンター }
    },
    /**
     * セットアップを使用する場合、以下でもこれを使用できます。レンダリングのインポートにはこの境界があるため、次の値ではこれを使用する必要があります。
     */
    与える() {
        h("div", null, [ を返します。
            h("h1", null, `現在のカウント: ${this.counter}`),
            h("button", { onClick: () => this.counter++, class: "button" }, "1を追加"),
            h("button", { onClick: () => this.counter--, class: "button" }, "マイナス1")
        ])
    }
}
</スクリプト>

純粋なセットアップ記述に変更します。

 <スクリプト>
/* スタイルを設定するには、ここでインポートする必要があります。スタイルタグを使用する場合、scoped を記述できず、ローカルスタイルの設定に役立たないため、推奨されません */
「./style.css」をインポートします
"vue" から { h, ref } をインポートします。

エクスポートデフォルト{
    // データの書き込み方法 // data() {
    // 戻る {
    // カウンター: 0
    // }
    // },
    設定() {
        定数カウンタ = ref(0)
        戻り値 () => {
            h("div", null, [ を返します。
                h("h1", null, `現在のカウント: ${counter.value}`),
                h("button", { onClick: () => counter.value++, class: "button" }, "1を追加"),
                h("button", { onClick: () => counter.value--, class: "button" }, "マイナス1")
            ])
        }
    }
}
</スクリプト>

4. 関数コンポーネントとスロットの使用

1) 親コンポーネント

<スクリプト>
"vue" から { h, ref } をインポートします。
「./components/Test.vue」からテストをインポートします。
エクスポートデフォルト{
    設定() {
        戻る {}
    },
    与える() {
        h(Test, null, { を返す
            // default は関数に対応し、default はデフォルト スロットです。default: props => h("span", null, "親によってコンポーネントに渡されるコンテンツ:" + props.name)
        })
    }
}
</スクリプト>

2) サブコンポーネント

<スクリプト>
"vue" から { h } をインポートします。

エクスポートデフォルト{
    /**
     * 夫から渡された内容を受け取る */
    与える() {
        h("div", null, [ を返します。
            h("div", null, "私は子コンポーネントです"),
            /**
             * ここで、他のものが渡されたかどうかを判断できます * 何も表示しない場合は null と書くこともできます * パラメータを渡す関数を使用して、パラメータを渡すこともできます */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈哈" }) : h("div", null, "私は子コンポーネントのデフォルト値です")
        ])
    }
}
</スクリプト>

注意:プロジェクトでは、上記のようなコードを書くと面倒すぎるので、現時点では JSX を使用する必要があります。

3. JSXの使用

1. JSXの理解

通常、jsx は Babel を介して変換されます (React で記述された jsx は Babel を介して変換されます)。

Vue の場合、Babel で対応するプラグインを設定するだけで済みます。

ドキュメント: https://v3.cn.vuejs.org/guide/render-function.html#jsx

2. Vue をサポートするために Babel プラグインをダウンロードします (現在はスキャフォールディングが直接サポートしているようです)

 npm で @vue/babel-plugin-jsx をインストール -D

3. babelを設定する

1) ルートディレクトリに.babel.config.jsを作成します。

2) .babel.config.jsに次のコードを追加します。

モジュール.エクスポート = {
    プリセット: [
        "@/vue/cli-plugin-babel/プリセット"
    ]、
    プラグイン: [
        "@vue/babel-plugin-jsx"
    ]
}

4. 使いやすい

<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
    設定() {
        カウンタ = ref(0) とします
        戻り値 { カウンター }
    },
    与える() {
        戻る (
            <div>
                <div>JSX の使用</div>
                <h2>現在の番号: {this.counter}</h2>
            </div>


        )
    }
}
</スクリプト>

5. 反論ケース

<スクリプト>
'@vue/reactivity' から { ref } をインポートします。

エクスポートデフォルト{
    設定() {
        カウンタ = ref(0) とします
        関数add(){
            カウンタ値++
        }
        関数デクリメント() {
            カウンタ値--
        }
        戻り値 { カウンタ、加算、減算 }
    },
    与える() {
        戻る (
            <div>
                <div>JSX の使用</div>
                <h2>現在の番号: {this.counter}</h2>
                <button onClick={this.add}>1 を追加</button>
                <button onClick={this.decrement} >1 減らす</button>
            </div>
        )
    }
}
</スクリプト>

6. コンポーネントとスロットの使用

1) 親コンポーネント

<スクリプト>
'@vue/reactivity' から { ref } をインポートします。
「./components/Test.vue」からテストをインポートします。
エクスポートデフォルト{
    設定() {
        カウンタ = ref(0) とします
        関数add(){
            カウンタ値++
        }
        関数デクリメント() {
            カウンタ値--
        }
        戻り値 { カウンタ、加算、減算 }
    },
    与える() {
        戻る (
            <div>
                <div>JSX の使用</div>
                このブロックがセットアップで変数またはメソッドを使用する場合は、これを追加します */
                <h2>現在の番号: {this.counter}</h2>
                <button onClick={this.add}>1 を追加</button>
                <button onClick={this.decrement} >1 減らす</button>
                <時間 />
                <テスト>
                    渡されたコンテンツをここに書き込みます。つまり、スロットに渡します。*/
                    {{ default: props => <p>親から子に渡されます</p> }}
                </テスト>
            </div>
        )
    }
}
</スクリプト>

2) サブコンポーネント

<スクリプト>
エクスポートデフォルト{
    /**
     * 夫から渡された内容を受け取る */
    与える() {
        戻る (
            <div>
                <p>私はコンポーネントです</p>
                この作品は着用されない可能性があり、デフォルト値を表示する必要があります。この場合、三項演算子を使用する必要があります*/
                {this.$slots.default()}
            </div>
        )
    }
}
</スクリプト>

注意: h 関数を使用してコンポーネントを記述する場合は、ドキュメントをよくお読みください。上記の説明は初心者向けです。

Vue h 関数の詳しい使い方については、これで記事は終わりです。Vue h 関数に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue2.x の徹底研究 - h 関数の説明

<<:  Dockerの匿名マウントと名前付きマウントの具体的な使用法

>>:  vscodeで保存した後のHTML自動フォーマットの問題を解決する

推薦する

ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...

Tencent Cloud Server Tomcat ポートにアクセスできない場合の解決策

最近、Tencent Cloudを使用してサーバーを設定しました。使用中に、tomcatポートにアク...

ウェブデザイナーが知っておくべき効率的なナビゲーションデザインの3つの原則

ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...

MySQLデータ損失の原因と解決策

目次序文問題の説明原因分析拡大する総括する序文最近、データの欠落やデータの損失に関するフィードバック...

CentOS7 に MySQL データベースをインストールしてデバッグする詳細な手順 [例]

この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...

Linux teeコマンドの使い方の詳しい説明

teeコマンドは主にstandout(標準出力ストリーム、通常はコマンド実行ウィンドウ)に出力し、同...

CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

CSS3 背景画像関連互換性: IE9+背景クリップ 背景画像描画領域background-cli...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

Vue-cliに基づくコードセットは複数のプロジェクトをサポートします

目次アプリケーションシナリオアイデアプロジェクト構造全体的なプロジェクト構造webpack パッケー...

Docker-compose ワンクリックデプロイ gitlab 中国語版の方法手順

1. GitLabの紹介Gitlab 公式アドレス: https://about.gitlab.co...

Vue 監視プロパティと計算プロパティ

目次1. 監視プロパティを監視する1. ショッピングカート2. すべて選択し、すべて選択解除する2....

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

JSにおける合同と不等式、等式と不等式の問題について

目次一致と不一致一致するすべてが平等ではない平等と不平等等しい等しくない一致と不一致シンボルの両側の...

JavaScript で支払いの 10 秒カウントダウンを実現

この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...