五、el和data的两种写法————温开水的复习笔记

本文链接：https://blog.csdn.net/qq_47286790/article/details/122735456

data与e1的2种写法

1.e1有2种写法

(1) new Vue时候配置e1属性。
(2)先创建Vue实例，随后再通过vm . $mount(”#root' )指定el的值。

2. data有2种写法

(1)对象式
(2)函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则:

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

el示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../vuejs/vue.js"></script>
    <title>el和data的两种写法</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
    //el的两种写法
        const vm = new Vue({
            //el:'#root',   //第一种写法
            data:{
                name:"温开水"
            }
        });
        console.log(vm);
        setTimeout(()=>{
            vm.$mount('#root');//第二种写法
        },1000);

    </script>
</body>
</html>

data示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../vuejs/vue.js"></script>
    <title>el和data的两种写法</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
    //data的两种写法
        new Vue({
            el:'#root', 
            //第一种写法----------------对象式
            data:{
                name:"温开水1"
            },
            //第二种写法----------------函数式
            data:function(){
                console.log(this);
                return {
                    name:"温开水2"
                }
            }
        });

    </script>
</body>
</html>