四、el和data的两种写法

 

data与el的2种写法：

　　1：el有2种写法：

　　　　（1）new Vue时候配置el属性

　　　　（2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

　　2：data有2种写法：

　　　　（1）对象式

　　　　（2）函数式

　　　　如何选择：目前哪种写法都可以，以后学习到组件的时候，data必须使用函数式，否则会报错

　　3：一个重要的原则：

　　　　由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

 

复制代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>el的两种写法</title>

    <!-- 引入VUE -->
    <script src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <h1>Hello,{{name.toUpperCase()}}</h1>
    </div>

    <script>
        const x = new Vue({
            // el:"#root",
            data:{
                name:'哈哈'
            }
        });
        console.log(x);

        //先生成实例再接管容器
        x.$mount('#root')
    </script>
    
</body>
</html>
复制代码

 

复制代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>

    <meta charset="UTF-8">
    <title>data的两种写法</title>

    <!-- 引入VUE -->
    <script src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <h1>Hello,{{name.toUpperCase()}}</h1>
    </div>

    <script>
        new Vue({
            el:"#root",

            //data的第一种写法：对象式
            // data:{
            //     name:'哈哈'
            // }

            //data的第二种写法：函数式
            // data: function(){
            //     return{
            //         name:'Vue'
            //     }
            // }

            //函数式的进一步简写
            data(){
                return{
                    name:'Vue'
                }
            }
            
        });
        
    </script>
</body>
</html>
复制代码

 

posted @   WaterGe  阅读(60)  评论(0)  编辑  收藏  举报
相关博文：
· 三、数据绑定
· 二、模板语法
· 03_el与data的两种写法
· 【Vue核心】4.data与el的2种写法
· 三、el与data的两种写法
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示