Vue3初始化写法

陌一一

3082人浏览 · 2022-11-20 13:02:55

陌一一 · 2022-11-20 13:02:55 发布

Vue3不同于Vue2的初始写法，Vue3中换了一种：

<body>
    <div id="box">
        {{10+20}}
        {{myname}}
    </div>
    <script>
        var obj={
            //data换成函数写法，在return返回值中定义状态
            data(){
                return{
                    myname:"yiyi"
                }
            },
            methods:{

            }
        }
        //Vue3初始化的方法：
        Vue.createApp(obj).mount("#box")
    </script>
</body>

Vue2的写法：

<script>
        new Vue({
            el:"#box",
            data:{
                
            },
            methods:{
                
            }
        })
</script>

Vue2和Vue3不同得到地方在于：

初始化方式不同；
data方式不同；
而且Vue3可以不写el值；

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}$/, //不连续的两位字母// /^