1 Vue.js是什么

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

image.png
它提供了现代Web开发中常见的高级功能，如：

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟DOM

2 MVVM模式

MVVM模式
MVVM即：Model-View-View-Model模式。它由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

3 现代的前端开发模式

现代前端技术解析
前端三驾马车：Angular、React、Vue

4 Vue.js起步

在官网中介绍到，使用 Vue.js有两种方式：

• 一种是通过引入CDN后直接使用或者下载后使用
• 另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。
  目前我们是最基础的教程，所以先介绍最简单的方法——引入CDN方式，后期我们再具体介绍脚手架方式。
  引入CDN，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

代码可以在vue.js官网找到vue.js官网

第一个起步页面

image.png

• el代表element，指需要获取的元素，一定是html中的根容器元素。
• data用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。
• 花括号在这里是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。