在单独的html里使用vue3

最新推荐文章于 2024-07-02 10:54:19 发布

胖子liu

最新推荐文章于 2024-07-02 10:54:19 发布

阅读量6.3k

点赞数 2

分类专栏： js vue 文章标签： vue3 html内使用vue3

本文链接：https://blog.csdn.net/LiuPangZi6/article/details/115461797

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

这是一个关于如何在独立的HTML文件中使用Vue3的示例。代码展示了如何创建响应式数据、使用v-model、事件处理以及Vue3的setup语法。通过引入Vue3的CDN链接并初始化应用，实现了数据绑定和按钮点击事件监听，更新数据显示。

摘要由CSDN通过智能技术生成

在单独的html里使用vue3

废话不多说，直接上完整代码
页面内还有几个简单的测试数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3</title>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div>
            {{ state1 }}
        </div>
        <div>
            {{ message }}
        </div>
        <div>
            {{ num }}
        </div>
        <input type="text" name="" id="" placeholder="输入" v-model="input1"><br/>
        <input type="text" name="" id="" placeholder="输入" v-model="input2"><br/>
        <div>
            input1:{{ input1 }}
        </div>
        <div>
            input2:{{ input2 }}
        </div>
        <button @click="btn1">
            点我
        </button>
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script>
    <script>
        const { createApp, reactive, toRefs, ref, onMounted } = Vue;
        
        const app = createApp({
            setup() {
                var state1 = ref(123)
                var input2 = ref(123)
                const state = reactive({
                    message: 12,
                    num: 1,
                    input1: ''
                })
                onMounted(()=>{
                    console.log(2222)
                })
                const btn1 = () => {
                    console.log(state1)
                    console.log(input2)
                    console.log(state)
                    state1.value++
                    state.num++
                    
                }
                return {
                    ...toRefs(state),
                    state1,
                    input2,
                    btn1
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

胖子liu

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
在单独的html里使用vue3

在单独的html里使用vue3废话不多说，直接上完整代码页面内还有几个简单的测试数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
复制链接

扫一扫

专栏目录