Vue...el和data的两种写法

        我们前几篇文章都是通过 el 使 实例和容器（root）进行绑定的。现在我们来说说el和data里的两种写法，它们的另一种写法是在后期学习vue的时候比较常用。

        el的两种写法， 1.new Vue时候配置el

                                  2.先创建Vue实例，随后再通过vm.$mount('#root') 指定el的值

        data的两种写法：

                                1.对象式

                                2.函数式

一. el...第一种写法

        1.el获取元素的方法

        

 

         2.这一种写法是之前文章内常用的，便于我们前期的学习，之前文章中用的就是这种写法。

         3.el第二种写法

        

 

         4.要想使用el的第二种写法，需要使用一个常量或者变量接收一个vue实例。

二.data...第一种写法

        1.data数据对象

        

         2.data的第二种写法，他是以函数的形式来存储数据的，是用返回值返回数据。其中我们可以测试一下在普通函数中，this指向谁。

        

        3.因为是普通函数，我们可以在代码中省略function。

 

         3.我们可以看到，在vue实例中的普通函数的this指向的是vue实例。

         4.我们再箭头函数中试试，看看箭头函数中的this指向谁。

        5.箭头函数指向全局对象window

 

 总结：我们都要知道，每个函数都会有自身的this。vue实例中的普通函数，指向vue；箭头函数，它没有自己的this，他的this是继承来的，指向window。所以在vue实例中，我们一般使用普通函数