四、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 @ 2022-07-21 21:42  WaterGe  阅读(57)  评论(0)  编辑  收藏  举报