第1章 初始Vue.js

1.1 网站交互方式

Web网站有单页应用程序（SPA，Single-page Application）和多页应用程序（MPA，Multi-page Application）两种交互方式。

多页应用程序，顾名思义是由多个页面组成的站点。在多页应用程序中，每个网页在每次收到相应的请求时都会重新加载。多页应用程序很大，由于不同页面的数量和层数，有时甚至可以认为很麻烦，我们可以在大多数电子商务网站上找到MPA的示例。

多页应用程序以服务端为主导，前后端混合开发，例如：.php、.aspx、.jsp。技术堆栈包括HTML、CSS、JavaScript、jQuery，有时还包括AJAX。

单页应用程序，就是只有一张Web页面的应用。单页应用程序是加载单个HTML页面并在用户与应用程序交互时，动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。单页应用开发技术复杂，所以诞生了许多前端开发框架：Angular.js、React.js、Vue.js等。

选择单页应用程序开发时，软件工程师通常采用以下技术堆栈：HTML5、Angular.js、React.js、Vue.js、Ember.js、AJAX等。

1.2 MVVM模式

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。

在MVVM架构下，View和Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

1.2.1、Model

模型（Model）：对应data中的数据，一般JS对象

data: {a: '',address: '',name: ''}

data中书写的Key：Value都会出现在Vue实例VM身上

1.2.2、View

视图（View）：对应模板（DOM）

<div id="root"><h2>{  { a }}</h2><h2>{{ address }}</h2><h2>{  { name }}</h2></div>

1.2.3、ViewModel

视图模型（ViewModel）：对应Vue实例对象（VM）

3、ViewModel

视图模型（ViewModel）：对应Vue实例对象（VM）<script type="text/javascript">// ViewModelnew Vue({.   // Viewel: '#root', // Modeldata: {  a: '',address: '', name: ''})</script>

1.3 Vue.js是什么

Vue（读音/vjuː/，类似于view）是一套构建用户界面的渐进式框架。与其它重量级框架不同的是，Vue.js采用自底向上增量开发的设计。

Vue.js本身只是一个JS库，它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js可以轻松构建SPA（Single Web Application）应用程序，通过指令扩展HTML，通过表达式将数据绑定到HTML，最大程度解放DOM操作。

1.4 安装Vue.js

将Vue.js添加到项目中有4种主要方法：本地独立版本方法、CDN方法、NPM方法以及命令行工具（CLI）方法。

本地独立版本方法

可通过地址“unpkg.com/vue@next”将最…

首先安装一个live server插件，在helllovue.html代码上点击右键出现一个名为Open with Live Server的选项，自动打开浏览器，默认端口号是5500。

CDN方法

可通过CDN（Content Delivery Network，内容分发网络）引入最新版本的Vue.js库。

NPM方法

在使用Vue.js构建大型应用时推荐使用NPM安装最新稳定版的Vue.js，因为NPM能很好地和webpack模块打包器配合使用。示例如下：

npm install vue@next

命令行工具（CLI）方法

Vue.js提供一个官方命令行工具（Vue CLI），为单页面应用快速搭建繁杂的脚手架。对于初学者不建议使用NPM和Vue CLI方法安装Vue.js。

具体步骤可以参考下面的链接;

aistudy.baidu.com/okam/pages/…

1.5 第一个Vue.js程序

可通过“code.visualstudio.com”地址下载VSCode，本书使用的安装文件是VSCodeUserSetup-x64-1.52.1.exe（双击即可安装）。

const vueApp = Vue.createApp({        //数据        data() {            return {                title: "Vue3.0 使用 Vue.createApp() 创建一个应用程序 ",                userInfo: {} //定义用户对象            }        },        //初始化的入口        created: function () {            //调用方法：获取用户信息            this.getUserInfo();        },        //方法        methods: {            //获取用户信息            getUserInfo: function () {                this.userInfo = {                    userId: 1,                    userName: "vivi的博客",                    blogName: "您好，欢迎访问 vivi的博客",                    blogUrl: "https://blog.csdn.net/vivi"                }            }        }        //使用 mount() 方法，装载应用程序实例的根组件    }).mount('#app'); 

每个Vue.js应用都是通过用createApp函数创建一个新实例开始，具体语法如下：

  const app = Vue.createApp({ /* 选项 */ }) 通过上面那个图片，可以看出这个选项可以定义一个参数，也可以包裹一个data数据，所以选项是选择。

传递给createApp的选项用于配置根组件（渲染的起点）。Vue.js应用创建后，调用mount方法将Vue.js应用挂载到一个DOM元素（HTML元素或CSS选择器）中，例如，如果把一个Vue.js应用挂载到

上，应传递#app。示例代码如下：

  const HelloVueApp = {}//配置根组件

  const vueApp = Vue.createApp(HelloVueApp)//创建Vue实例

  const vm = vueApp.mount('#hello-vue')//将Vue实例挂载到#app

1.6 插值与表达式

Vue的插值表达式“{ { }}”的作用是读取Vue.js中data数据，显示在视图中，数据更新，视图也随之更新。“{ { }}”里只能放表达式（有返回值），不可以放语句，例如，{ { var a = 1 }}与{ { if (ok) { return message } }}都是无效的。

数据绑定最常见的形式就是使用“Mustache（小胡子）”语法（双花括号）的文本插值，它将绑定的数据实时显示出来。例如，{ { counter }}，无论何时，绑定的Vue.js实例的counter属性值发生改变，插值处的内容都将更新。

“{ { }}”将数据解释为普通文本，而非HTML代码。当我们需要输出真正的HTML代码时，可使用v-html指令。

假如，Vue.js实例的data为：

data() {            return {                rawHtml: '<hr>'            }    }

则“

无法显示HTML元素内容: { { rawHtml }}

”显示的结果是

---

；而“

可正常显示HTML元素内容:

”显示的结果是一条水平线。

对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。示例如下：

{ { number + 1 }}

{ { isLogin? 'True' : 'False' }}

{ { message.split('').reverse().join('')}}