第一章 Vue核心 第四节 el与data的两种写法

el与data的两种写法：
    1.el的两种写法
        (1).new Vue时配置el属性。
        (2).先创建Vue实例，随后再通过vm.$mount('#root');指定el的值
    2.data的两种写法
        (1).对象式
        (2).函数式
        如何选择：目前哪种写法都可以，以后学习组件时，data必须使用函数式，否则会报错
    3.一个重要的原则：
        由Vue所管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
        
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <!--引入Vue-->
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        //el的两种写法；
        /*const vm = new Vue({
            //el:'#root',    //第一种写法
            data:{
                name:'retrace'
            }
        });
        console.log(vm);
        vm.$mount('#root'); //第二种写法 */

        //data的两种写法
        new Vue({
            el:'#root',
            //data的第一种写法：对象式
            /*data:{
                name:'retrace'
            }*/
            //data的第二种写法：函数式
            data:function (){//此处函数不能用箭头函数  :function  可省略，即可写成 data(){}
                console.log(this);   //此处的this是Vue实例对象
                return {
                    name:'retrace'
                }
            }
        });
    </script>
</body>
</html>
posted @ 2021-10-14 17:53  何以之  阅读(66)  评论(0)    收藏  举报