Vue.js前端开发基础及项目化应用（微课版）最新章节_古凌岚著

知识学习

2.1 剖析Vue应用程序

Vue基于标准HTML、CSS和JavaScript构建用户界面，并帮助开发人员高效开发用户界面。下面我们将通过一个简单例子，从整体上来分析Vue的编程模型，一些语法细节和术语暂时忽略不讲。

【例2-1】 显示字符串信息。

创建2-1.html文件，程序代码如下：

<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　<meta charset="utf-8">
　　　　　<title>第一个Vue应用程序</title>
　　　　　<!--引入Vue库文件-->
　　　　　<script src="https://unpkg.com/vue@next"></script>
 　　</head>
　　　<body>
　　　　<!--挂载点-->
　　　　<div id="app">
　　　　　<!--模板结构-->
　　　　　{{msg}}
　　　</div>
　　</body>
　　<script type="text/j avascript">
　　　//定义根组件
　　　　const RootComponent = {
　　　　　　　　data:function(){
　　　　　　　　return {
　　　　　　　　　msg: ' This is first Vue demo!'
　　　　　　　　}
　　　　　}
　　　}
　　//创建Vue应用实例
　　const vueApp = Vue.createApp(RootComponent)
　　//挂载处理
　　const vm = vueApp.mount("#app") 
　　</script>
</html>

在浏览器中运行该程序，运行结果如图2-1所示。

图2-1　例2-1运行结果

例2-1所示的代码是一个采用原生HTML开发方式来使用Vue的应用程序。从加粗字体部分的代码来看，Vue应用程序包括以下几个方面的内容。

1. 导入Vue库文件

在使用Vue时，需要先安装或导入Vue库文件。本例中，HTML语句<script src="https://unpkg.com/vue@next"></script>表示采用CDN方式导入Vue库文件vue.js。

2. 选择挂载点

在HTML页面布局中，选择一个DOM元素作为挂载点，挂载点范围内输出的页面内容即视图。本例中，挂载点是id为app的div元素。

3. 声明渲染数据的HTML代码结构

在挂载点内，使用Vue的模板语法编写的一段HTML代码，我们称为模板结构。它采用模板语法将响应式数据写入DOM结构中，等待渲染处理后生成页面效果。本例中，挂载点内为模板结构，其中{{msg}}是模板语法的插值表达式，用于将数据msg渲染到div元素中，当程序运行完成，页面将显示{{msg}}执行后的结果，即图2-1所示的信息。

4. 利用JavaScript定义数据和操作数据

在Vue组件中利用JavaScript定义数据和操作数据，通过Vue应用实例控制视图的更新。本例较为简单，仅涉及数据定义，未涉及操作数据。JavaScript语句const RootComponent = {...}定义了一个Vue组件，其data函数返回响应式数据msg，它的变化将带动视图内容的同步变化。除了data函数以外，Vue组件还可以包含其他属性或函数，如template、methods、computed和watch等，这里的属性也被称为选项。关于组件的更多内容将在单元3中详述。

5. 创建Vue应用实例和进行挂载处理

利用Vue的API创建Vue应用实例并进行挂载处理，实现根组件中数据的响应式封装和视图的同步更新控制。本例中，JavaScript语句const vueApp = Vue.createApp(RootComponent)创建了Vue应用实例，其参数RootComponent为根组件，它是渲染的起点，这条语句将使得根组件中的数据具有响应性；语句const vm = vueApp.mount("#app")实现了挂载，即对模板结构进行渲染处理，并将渲染结果填充到挂载点内，形成最终的页面显示效果，该语句返回的对象是根组件实例。

当程序运行时，RootComponent的响应式数据发生改变，这将影响挂载点内的内容。读者可以利用Vue Devtools工具直接修改RootComponent中msg的值（见图2-2）来测试一下。

图2-2　利用Vue Devtools工具直接修改msg的值

对于上面分析过程中所涉及的几个Vue的相关知识，我们来进一步了解一下。

（1）模板语法

模板语法是对组件中template选项内容（即模板结构）所使用的语法规则。其作用是关联组件的响应式数据与DOM元素，即实现数据绑定。组件是Vue应用程序的基本结构单元，每个组件都必须包含template选项，并规定其内容必须定义到HTML template（模板）元素中或是挂载点内。例2-1中其内容是定义在挂载点内的，挂载点内的内容会被Vue自动识别为HTML template元素。模板语法分为插值语法和指令语法两种。

① 插值语法。它是最基本的数据绑定形式，通过引用组件的响应式数据填充DOM元素，以达到数据绑定的目的。插值语法为{{JavaScript表达式}}，如例2-1中语句{{msg}}，msg的值变化会使得挂载点内的视图跟着发生变化。

② 指令语法。它将指令绑定于DOM元素内置属性上或将指令作为该元素的新属性，为该元素添加一些特殊的行为，从而实现数据绑定。指令语法为v-指令：参数="表达式"，其中v-指令构成特殊的HTML属性，参数不是必选项，如<div v-text="new">old</div>，其执行结果是v-text属性的值new覆盖div元素内容old，每当v-text属性值发生变化时都会引起div元素内容的改变。Vue中提供了丰富的指令，本单元后续部分将会详细介绍。

（2）响应式数据

响应式数据是Vue响应性特性的体现，如组件data选项中定义的数据均具有响应性，即这些数据的变化都将会带来HTML页面输出内容的更新，这样的数据也称为状态。

（3）挂载点

挂载点用于指定数据将被渲染的位置。Vue允许除<html>和<body>标签之外的任意HTML标签所表示的DOM元素作为挂载点。

（4）使用CDN方式导入Vue库文件

使用CDN方式导入Vue库文件时，Vue的全局API均暴露在全局Vue对象上，即需要使用“Vue.函数名”方式来调用，如例2-1中的Vue.createApp()。

现在，我们再从MVVM模式的角度，梳理一下使用Vue构建用户界面的流程（见图2-3）。Vue应用程序先定义Model（响应式数据）和View（模板结构），采用模板语法将两者绑定，再创建ViewModel（Vue应用实例），ViewModel会一直监听Model的变化，并把Model的变化映射到DOM结构中，使得View随着Model的变化而更新。例2-1中，数据msg就是Model，id为app的div元素则是View，vueApp是Vue应用实例。

图2-3　MVVM模式下使用Vue构建用户界面的流程