vue为什么一些普通的html会编译失败,为什么使用vue.js？

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

Vue.js 核心理念

Vue 的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 还提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。

我们也可以说 Vue.js 是一套响应式系统(Reactivity System)。数据模型层(Model)只是普通 JavaScript 对象，如下图所示，{ }代表一个 JavaScript 对象，修改它则更新相应的 HTML 片段(DOM)，这些 HTML 片段也称为“视图(view)”。这会让状态管理变得非常简单且直观，可实现数据的双向绑定，所以我们也称之为响应式系统。

为什么使用 Vue.js

我们都知道完整的网页是由 DOM 组合与嵌套形成最基本的视图结构，再加上 CSS 样式的修饰，使用 JavaScript 接受用户的交互请求，并通过事件机制来响应用户交互操作而形成的。

我们把最基本的视图结构(也就是 HTML DOM)拿出来，称为视图层。这个被称为视图层的部分就是 Vue 核心库关注的部分。

Vue.js 为什么关注视图层呢？因为一些页面元素非常多。结构庞大的网页如果使用传统开发方式，数据和视图会全部混合在 HTML 中，处理起来十分不易，并且结构之间还存在依赖或依存关系，代码上就会出现更多问题。

有过前端开发基础的读者都应当了解过 jQuery，jQuery 给予我们简洁的语法和跨平台的兼容性，极大地简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、事件处理等操作。

用过 jQuery 的读者都有体会，开始页面元素不多，有时会需要一层层地不断向上寻找父辈元素，如$('#xxx').parent().parent()，但后期修改页面结构，代码可能就会变得臃肿，如$('#xxx').parent().parent().parent()，随着产品升级的速度越来越快，修改变得越来越多，页面中相似的关联和嵌套 DOM 元素多得数不清，而 jQuery 选择器及 DOM 操作本身也存在性能缺失问题，想要修改无从下手。

总之，原本轻巧简洁的 jQuery 代码，在产品需求面前变得啰嗦冗长。

但是 Vue.js 解决了这些问题，这些问题将在 Vue 中消失。

更多web前端开发知识，请查阅 HTML中文网 ！！