Vue实例

1.如果要在一个容器身上使用Vue，那么就要进行二者的绑定，其关系是一对一的。

2.如果要在容器中展示Vue中保存的数据，那么就要通过Vue模板{{XXX}}来展示。

<div id="root">
<h1> {{year}}-{{month}}<h1>
</div>
...
new Vue({
    el:'#root',//element,指向和哪个容器进行绑定，值一般是css选择器字符串(若div class="root",那么el:'.class')
    data:{     //存储数据
    year:2022,
    month:7
    }
})

3.对于Vue模板{{XXX}}，XXX可以是Vue实例中data中存的数据，如图中{{year}}所示，也可以是js表达式，如算数运算{{1+1}}、逻辑运算{{a>b?6:9}}、方法{{function(9)}}等等。也就是说XXX最终需要返回一个值，这样Vue模板才可以呈现出来。
4.一旦data中的数据发生改变，那么页面中使用到该数据的地方也会随之改变。
5.在实际开发中，只有一个Vue实例，并配合组件一起进行应用。
6.el和data的第二种写法
el: 调用$mount方法进行挂载

在创建Vue实例时调用$mount方法进行挂载

new Vue({
    data:{     //存储数据
    year:2022,
    month:7
    }
}).$mount('#root')

用一个常量接收Vue实例，然后再进行挂载

const v = new Vue({
    data:{     //存储数据
    year:2022,
    month:7
    }
})
v.$mount('#root')//用v来接收Vue实例，然后实例通过调用Vue原型身上的$mount方法来主动挂载

这种挂载方式有很高的灵活度，可以设置在一定的条件下再进行Vue实例的挂载
例如设置一个定时器，5秒后再进行Vue实例的挂载：

const v = new Vue({
    data:{     //存储数据
    year:2022,
    month:7
    }
})

setTimeOut(()=>{
    v.$mount('#root')
},5000)

data：通过函数方式保存数据

new Vue({
    el:'#root',
    data(){
        return{
            year:2022,
            month:7
        }
    }
})

注：data函数不可以写为箭头函数，因为箭头函数指向的是全局对象windows，而不是Vue实例。

在组件中实例化Vue时，data属性必须要用函数方式定义
为什么？
我们知道，在js中，对象是采用引用的方式来实现的，若A、B两处都引用了对象Object，那么在A处改变了Object，B处也会发生改变。
而组件的意义在于复用，如果data使用对象方式进行保存，那么上述特性就会引发一个问题：假设组件Component应用在了C、D两处，若C处Component中的data发生了改变，那么D处Component中的data也会随之改变。这显然和组件"复用"的期望相背。
而采用函数的方法，就可以解决这个问题。
在每次创建Vue实例时，data函数都会返回一个对象(即重新在内存中创建一个对象)，使得每一个组件的data属性都是独一无二的，这样就巧妙地规避掉了对象引用所引发的问题。