2.4　第一个Vue.js程序

接下来让我们动手感受一下Vue.js，构建一个“水果介绍”的简单页面。和许多JavaScript应用一样，首先从网页中需要展示的数据开始。使用Vue的起步非常简单，安装Vue库，使用Vue.createApp创建一个应用程序实例。Vue在创建组件实例时会调用data()函数，该函数将返回数据对象，最后通过mount()方法在指定的DOM元素上装载应用程序实例的根组件，从而实现数据的双向绑定。

【例2.1】编写“水果介绍”页面（源代码\ch02\2.1.html）。

这里使用了v-bind指令绑定IMG的src属性，使用{{}}语法（插值语法）显示标题<h2>的内容。

程序运行效果如图2-23所示。

图2-23　“水果介绍”页面效果

以上所述就成功创建了第一个Vue应用，看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。可以通过浏览器的JavaScript控制台来验证，也可以使用vue-devtools调试工具来验证。

例如，在浏览器上按F12键，打开控制台并切换到“Console”选项，修改vm.explain="我最爱吃的就是苹果！"，单击回车键后，可以发现页面的内容也发生了改变，效果如图2-24所示。

图2-24　控制台上修改后效果

使用vue-devtools工具调试，打开浏览器的控制台，选择“Vue”选项，单击左侧的<Root>，同样修改vm.explain="苹果中营养成分可溶性大，容易被人体吸收！"，单击“保存”按钮，可以发现页面的内容同样也发生了改变，效果如图2-25所示。

图2-25　vue-devtools调试效果

出现上面这样的效果，是因为Vue是响应式的。也就是说当数据变更时，Vue会自动更新所有网页中用到它的地方。除了小程序中使用的字符串类型，Vue对其他类型的数据也是响应的。