Vue（四）：el和data的两种写法 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>el和data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 容器 -->
    <div id="root">
        <h1>Hello, {{name}}</h1>
    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false;

        //vue实例
        const vm = new Vue({

            //el的第一种写法，写在实例里面
            //el: "#root",

            //data的第一种写法，对象形式
            // data: {
            //     name: "world"
            // }

            //对象的第二种写法，函数形式
            // data: function() {
            //     return {
            //         name: "world"
            //     }
            // }
            //函数形式还可以这样写
            data() {
                return {
                    name: "world"
                }
            }
        })

        //el的第二种写法，在实例外面进行挂载
        vm.$mount("#root");
    </script>
</body>

</html>

el和data的两种写法总结：

el的两种写法：
1.在Vue实例中配置el属性
2.先创建Vue实例，在Vue实例外面利用 实例.$mount(XXX) 方法进行挂载
两种写法的比较：第一种写法是常规的写法，实例在创建的时候就与容器进行了绑定；第二种写法更加灵活多变，可以在需要的时候将实例挂载到容器

data的两种写法：
1.对象式
2.函数式
学到组件时必须使用函数式，需要注意的是，Vue所管理的函数（例如这里的data）不能使用箭头式函数，否则this将不再是Vue实例

（本文仅作个人学习记录用，如有纰漏敬请指正）

posted @ 2023-06-23 14:43  谁知道水烫不烫  阅读(83)  评论(0)  编辑  收藏  举报