HTMLでvueとelement-uiを直接参照する方法

コードは次のようになります。

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="UTF-8">
    <link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<本文>
    <div id="アプリ">
        <el-button round @click="visible = true">丸いボタン</el-button>
        <br>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>要素を試す</p>
        </el-ダイアログ>
        <br>

        <el-switch v-model="value1" active-text="月払い" inactive-text="年払い">
        </el-switch>
        <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"
            active-text="月払い" inactive-text="年払い">
        </el-switch>

        <br>
        <el-time-picker is-range v-model="value1" range-separator="to" start-placeholder="開始時刻" end-placeholder="終了時刻"
            placeholder="時間範囲を選択">
        </el-time-picker>
        <el-time-picker is-range arrow-control v-model="value2" range-separator="to" start-placeholder="開始時間"
            end-placeholder="終了時間" placeholder="時間範囲を選択">
        </el-time-picker>
        <br>

        <el-progress type="circle" :percentage="0"></el-progress>
        <el-progress type="circle" :percentage="25"></el-progress>
        <el-progress type="circle" :percentage="100" status="成功"></el-progress>
        <el-progress type="circle" :percentage="70" status="警告"></el-progress>
        <el-progress type="circle" :percentage="50" status="exception"></el-progress>
        <br>
        <el-行>
            <el-button icon="el-icon-search" 円></el-button>
            <el-button type="primary" icon="el-icon-edit" 円></el-button>
            <el-button type="success" icon="el-icon-check" 円></el-button>
            <el-button type="info" icon="el-icon-message" 円></el-button>
            <el-button type="warning" icon="el-icon-star-off" 円></el-button>
            <el-button type="danger" icon="el-icon-delete" 円></el-button>
        </el-row>
        <br>
        <el-steps :active="1" 終了ステータス="成功">
            <el-step title="有料"></el-step>
            <el-step title="払い戻し処理中"></el-step>
            <el-step title="返金されました"></el-step>
            <el-step title="決済保留中"></el-step>
            <el-step title="解決しました"></el-step>
        </el-steps>
    </div>
</本文>
<スクリプト>
    新しいVue({
        el: '#app',
        データ: 関数 () {
            戻り値 { 表示: false }
        }
    })
</スクリプト>

</html>

効果は以下のようになります。

ここに画像の説明を挿入

要約する

これで、HTML で vue と element-ui を直接参照する方法に関するこの記事は終了です。HTML で vue と element-ui を参照する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: CSS 表示テーブルの適応的な高さと幅の問題の解決策

>>: ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。