1.5.1　第一个Vue应用

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

【代码片段1-21　源码见附件代码/第1章/5.Vue1.html】

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

【代码片段1-22　源码见附件代码/第1章/5.Vue1.html】

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

【代码片段1-23　源码见附件代码/第1章/5.Vue1.html】

首先，上面的示例代码中采用了内嵌JavaScript脚本的方式来实现逻辑，这里并不涉及TypeScript相关内容，TypeScript需要经过编译的过程才能转换成JavaScript代码使用，等后续我们学习了TypeScript的基本内容后，就可以结合Vue进行使用了。如以上代码所示，我们定义Vue组件时实际上是定义了一个JavaScript对象，其中data方法用来返回组件所需要的数据，methods属性用来定义组件所需要的方法函数。在浏览器中运行上面的代码，当单击页面中的按钮时，计数器会自动增加。可以看到，使用Vue实现的计数器应用要比使用JavaScript直接操作HTML元素方便得多，不需要获取指定的组件，也不需要修改组件中的文本内容，通过Vue这种绑定式的编程方式，只需要专注数据逻辑，当数据本身修改时，绑定这些数据的元素也会同步修改。