[vue3快速入门] 1.vue的数据驱动

这节课我们讲一下vue的一大特性——数据驱动，通俗来说数据驱动就是我们在开发过程中只要关心数据是什么，然后把数据绑定到模板里，vue会自动把我们的数据显示在页面上，而不用我们去直接操作dom。
我们看一个例子就明白了。

我们data里有一个数据叫message，它的值是'托尼，你好'，然后在模板里我们通过双花括号把这个数据放到了这里，表示我们要把message的值在这个位置显示。这里data是一个方法，返回了一个对象，大家先不用理解为什么这么写，现在只要记住就行了。
打开页面，我们就会看到'托尼，你好'几个字显示出来了。

然后介绍一个生命周期函数，mounted，可以先理解为页面加载完成以后自动调用的方法，跟原生的window.onload类似，把这个回到函数加到我们的代码中

打开开发者工具，我们看到控制台输出了'页面加载完成'，说明mounted这个函数已经被自动调用了。

下一步我们要修改一下显示的文字，在原生的开发中，我们要用getElementById的方式先获取到相应的dom元素，然后再设置它的的innerHTML来改变它的内容了。
现在用vue就方便很多，完全不用操作dom，只要改变数据就行了，下面就是完整的代码。

我们加了一个计时器，在页面加载完一秒后，让托尼变成了钢铁侠
非常简单方便，只用了一行，这里this.message就是data里面的message，vue提供给我们一个方便的写法，直接用this就可以访问和修改data里面的数据。其实是this.$data.message的简写方式，在以后的开发过程中，也全部都是使用简写的方式。

现在我们初步体验了一下数据驱动的方便、简介，建议大家自己动手歇一歇，这次教程就到这里了。