• 【HTML】页面引用Vue3和Element-Plus

    在现代前端开发中，Vue 3 和 Element Plus 是非常受欢迎的技术。Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架，而 Element Plus 是一个基于 Vue 3 的组件库，提供了丰富的 UI 组件，帮助开发者快速构建高质量的前端应用。

    在本文中，我们将通过一个简单的示例来演示如何在Html中引用 Vue 3 和 Element Plus。

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>

    <script src="https://unpkg.com/vue">script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus">script>
head>

<body>
    <div id="app">
        <el-input v-model="text">el-input>
        <el-input v-model="text1">el-input>
        <el-input type="textarea" v-model="text2">el-input>
        <el-button type="primary" @click="onClick">测试el-button>
    div>

    <script>
        const { createApp, ref, reactive, toRefs } = Vue;
        const vue3Composition = {
            setup() {
                const text = ref('text')

                const onClick = () => {
                    console.log(text.value, data.text1, data.text2);
                }

                const data = reactive({
                    text1: 'text1',
                    text2: 'text2',
                })

                const dataRef = toRefs(data);

                return {
                    ...dataRef,
                    text,
                    onClick
                }
            }
        }

        const app = createApp(vue3Composition)
            .use(ElementPlus)
            .mount('#app');

    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    显示效果：

    在这里插入图片描述

  • 相关阅读:
    JDBC+Servlet综合练习
    合众汽车选用风河Wind River Linux系统
    1480. Running Sum of 1d Array (Python)
    低代码引领AI创新：业务解决方案智能化设计
    24 Python的sqlite3模块
    Golang基础-13
    机器学习-模型评估与选择
    Maven
    小程序容器如何确保小程序安全？
    023-从零搭建微服务-推送服务（三）
  • 原文地址：https://blog.csdn.net/qq_40205510/article/details/138165831