1.5.1　第一个Vue应用

在学习和测试Vue的功能时，我们可以直接使用CDN的方式来进入Vue框架。本书将全部采用Vue 3.0.x的版本来编写示例。首先，使用VSCode开发工具创建一个名为Vue1.html的文件，在其中编写如下模板代码：

其中，我们在head标签中加入了一个script标签，采用CDN的方式引入了Vue3的新版本。以之前编写的计数器应用为例，我们尝试使用Vue的方式来实现它。首先在body标签中添加一个标题和按钮，代码如下：

上面使用到了一些特殊的语法，例如在h1标签内部使用了Vue的变量替换功能，{{ count }}是一种特殊语法，其会将当前Vue组件中定义的count变量的值替换过来，v-on:click属性用来进行组件的单击事件绑定，上面的代码将单击事件绑定到了clickButton函数上，这个函数也是定义在Vue组件中的。定义Vue组件非常简单，我们可以在body标签下添加一个script标签，在其中编写如下代码：

如以上代码所示，我们定义Vue组件时实际上定义了一个JavaScript的对象，其中data方法用来返回组件所需要的数据，methods属性用来定义组件所需要的方法函数。在浏览器中运行上面的代码，当单击页面中的按钮时，计数器会自动增加。可以看到，使用Vue实现的计数器应用比使用JavaScript直接操作HTML元素方便得多，我们不需要获取指定的组件，也不需要修改组件中的文本内容，通过Vue这种绑定的编程方式，只需要专注于数据逻辑，当数据本身修改时，绑定这些数据的元素也会同步修改。