vue3 h 関数の使用に関するグラフィックチュートリアル

順序：

1. 公式ドキュメントアドレス ===》レンダリング機能とJSX | Vue.js

2. ブロガーの WeChat 公開アカウント: 「Programmer Wild Zone」、公開アカウントをフォローし、「グループを追加」と返信してブロガーのWeChat グループに入ります

文章：

公式 API に高度な API と書かれているからといって飛びつかないでください。使い方は簡単です。

簡単に言うと、彼は createElement (ノードの作成) です。

例: JQuery を使用したことがある場合は、次の jQuery コードを見てください。

var str="<a href='#'>111<a>"
$(str).html("22")

分かりましたか? 上記は、この文字列を仮想 dom ノードに変換し、このノードの内容を 111 から 22 に変更する jquery コードであり、$(str) は文字列を dom ノードに変換するものです。

1. 単純な h() の場合

コード部分

<template>
    <btn/>
</template>
<script setup lang="ts">
    import {h} from "vue"
import { $ } from "vue/macros";
    const btn=()=>{
        return h("div",{class:"c_blue"},"你好啊")
    }
</script>

ブラウザセクション

f12要素レビューセクション

わかりますか。

h の後の最初のパラメータは作成する要素のタグで、span やタグも使用できます。

2 番目のパラメータは、このタグが持つ属性です。たとえば、div に data-id を追加する場合、次のように記述できます。

const btn=()=>{
        return h("div",{"data-id":"1",class:"c_blue"},"你好啊")
    }

3 番目の属性は、コンテンツに表示されるテキストです。もちろん、テキストが表示される前に最初に処理される場合は、以下のコードを参照してください。

const btn=()=>{
        return h("div",{"data-id":"1",class:"c_blue"},{default:()=>{return 1==1?"1111":"2222"}})
}

分かりましたか?関数returnの形式で返すことができます。

2. h()配下のノードをdivに追加する方法

<template>
    <btn/>
</template>
<script setup lang="ts">
    import {h} from "vue"
import { $ } from "vue/macros";
    const btn=()=>{
        return h(
            "div",
            {
                "data-id":"1",
                class:"c_blue"
            },
            [
                h("span","你好"),
                h("a",{href:"#"},"不好")
            ]
        )
    }
</script>

わかりますか? 実際、h() ブロガーは関数のオーバーロードがあること、つまり属性を構成する必要がなく、返されたテキストが直接設定されていることを理解しています。このようにネストすると、多くのサブセットをネストできますか?

ブロガーが書いたことは非常にシンプルであり、それはあなたの理解次第です。次に3番目のポイントについて話しましょう

4. 値の受け渡し

さて、次のコードはあなたの理解に依存します。

<template>
    <btn c="c_blue" b="标题"/>
</template>
<script setup lang="ts">
    import {h} from "vue"
    import { $ } from "vue/macros";
    const btn=(obj)=>{
        debugger
        return h(
            "div",
            {
                class:obj.c,
                "data-tit":obj.b
            },
            "你好啊"
        )
    }
</script>

ちなみに属性側ではonClickイベントを書くことができ、ブレークポイントを入れることもできます。

5. 拡張

1. その利点は何ですか? 1 点だけ言及すれば、おそらくわかるでしょう。.ts ファイルにカプセル化できます。共通コンポーネントを記述するために別の .vue を用意する必要はありません (一部のコンポーネントは非常に単純なので、再充電機能。ポップアップウィンドウにはメッセージと h("input")) が含まれる場合があります。

2. 動的コンポーネントでも使用できます。

<template>
     <component :is="btn" c="c_blue" b="标题"></component>
    <!-- <btn c="c_blue" b="标题"/> -->
</template>
<script setup lang="ts">
    import {h} from "vue"
    import { $ } from "vue/macros";
    const btn=(obj)=>{
        debugger
        return h(
            "div",
            {
                class:obj.c,
                "data-tit":obj.b
            },
            "你好啊"
        )
    }
</script>

それが機能するかどうかだけ教えてください。

ちなみに、ブロガーのWeChat 公開アカウント「Programmer Wild Zone」を忘れずにフォローしてください。

このブログ投稿はオリジナルです。読んで大切にしてください。結局のところ、私は 35 歳で、あと数年はブログを書くことができないかもしれないので、このブログ投稿が役に立った場合は、ブロガーのフォローも忘れないでください。公式アカウント. 公式アカウントメニューには良いものがあります。その手紙は