三、el与data的两种写法

el有2种写法 a、创建Vue实例对象的时候配置el属性 b、先创建Vue实例，随后再通过vm.$mount('#root')指定el的值 data有2种写法 a、对象式：data： { } b、函数式：data() { return { } } 如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错一个重要的原则由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="js/vue.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>
    <h1 id="root">
       测试{{name}}
    </h1>
    <a href="www.jd.com">京东</a>
    <script type="text/javascript">
        Vue.config.devtools = true;
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
        // const v = new Vue({
        //     // el的两种写法
        //     // el:"#root",  第一种
        // data的第一种写法：对象式
        //     data: {
        //         name: "我的第二vue",
        //         url: "www.baidu.com",
        //         datas:{
        //             name: "测试123",
        //         }
        //     }
        // });
        // v.$mount("#root")  //第二种（之后在指定）

        new Vue({
            el: "#root",
            //data的第二种写法：函数式
            data(){
                console.log(this);   //this是Vue的实例对象
                return {
                    name: "测试代码",
                }
            }
        })
    </script>
</body>
</html>

posted on 2022-10-17 11:04 忆华灯纵博阅读(24) 评论(0) 编辑收藏举报