在单独的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="v

胖子liu

6567人浏览 · 2021-04-06 15:23:16

胖子liu · 2021-04-06 15:23:16 发布

在单独的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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^