Vue.js 是什么

时间 2019-11-07

原文原文链接

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。javascript

1、诞生背景

近几年来，得益于手机设备的普及和性能的提高，移动端的web需求大量增长，产生了一种叫webapp的东西，也就是移动端的网页应用。它们功能愈来愈复杂，交互也愈来愈酷炫，功能与效果愈来愈接近于原生的APP。为了解决webapp在的体验和开发上的不足，和先后端分离开发的模式的流行，也催生了一批MVVM框架的流行。Vue.js 做为主流前端框的一种，由于起自身的上手相对容易，和完善的中文文档和社区，使其在中国也占有很多市场份额。html

2、前端框架模式了解

MVX框架模式：MVC+MVP+MVVM前端

1. MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。
View 经过 Controller 来和 Model 联系，Controller 是 View 和 Model 的协调者，View 和 Model 不直接联系，基本联系都是单向的。用户 User 经过控制器 Controller 来操做模板 Model 从而达到视图View的变化。vue

        2. MVP：是从MVC模式演变而来的，都是经过 Controller/Presenter 负责逻辑的处理 + Model提供数据 + View负责显示。
        在MVP中，Presenter彻底把View和Model进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter 和 View 是没有直接关联的，是经过定义好的接口进行交互，从而使得在变动View的时候能够保持Presenter不变。
        MVP模式的框架：Riot , js。java

3. MVVM：MVVM是把MVC里的 Controller 和 MVP 里的 Presenter 改为了 ViewModel 。Model+View+ViewModel 。View的变化会自动更新到 ViewModel , ViewModel 的变化也会自动同步到 View 上显示。
这种自动同步是由于 ViewModel 中的属性实现了 Observer ，当属性变动时都能触发对应的操做。MVVM模式的框架有：AngularJS + Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。webpack

MVVM 能够拆分为： Model+View+ViewModel 三部分：web

        View 是HTML文本的js模板
        ViewModel 是业务逻辑层（一切js可视业务逻辑，好比表单按钮提交，自定义事件的注册和处理逻辑都在 viewModel 里面负责监控俩边的数据）
        Model 数据层对数据的处理（好比增删改查）vue-router

3、VueJs 是什么

简而言之，Vue.js是一个构建数据驱动的 web 界面的渐进式框架；简而言之，Vue.js 简单小巧的核心，渐进式技术栈，足以应对任何规模的应用。Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。vuex

使用 Vue.js 可让 Web 开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代 Web 开发中常见的高级功能，好比，解耦视图与数据、可服用的组件、前端路由、状态管理、虚拟 DOM ( Virtual DOM )。但 Vue.js 也有自身的特性，以下：npm

1. 轻量级的框架

2. 双向数据绑定

3. 指令

4. 插件化

4、Vue.js 的HelloWorld 的示例

先使用开发工具（好比，Sublime 、 WebStorm）建立一个 .html 文件，而后经过以下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!-- HTML -->
<div id="app">
  {{ message }}
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

5、Vue.js 有什么不一样

若是你使用过 jQuery ，那你必定对操做 DOM、绑定事件等这些原生 JavaScript 能力很是熟悉，好比，在指定 DOM 中插入一个元素，并给它绑定一个点击事件：

if (showButton) {
    var btn = $('<button>Click me</button>');
    btn.on('click', function() {
        console.log('Clicked!');
    });
    $('#idBtn').append(btn);
}

这段代码操做的内容不复杂，不过，这样让咱们的视图代码和业务逻辑紧耦合在一块儿，随着功能不断增长，直接操做 DOM 会使得代码愈来愈难以维护。

而 Vue.js 经过 MVVM 的模式拆分为视图与数据两部分，并将其分离。所以，你只须要关心你的数据便可， DOM 的事情 Vue 会帮你自动搞定，好比上述的示例用 Vue.js 能够改写为：

<body>
    <div id="idBtn">
        <button v-if="showButton" v-on:click="handleClick">Click me</button>
    </div>
</body>
<script>
    new vue({
        el: '#idBtn',
        data: {
            showButton: ture 
        },
        methods: {
            handleClick: function () {
                console.log('Clicked!');
            }
        }   
    })
</script>

6、与传统的前端开发模式异同

如今的前端技术与开发已再也不是十年前写个 HTML 和 CSS 那样简单了，新的概念层出不穷，好比 ECMAScript 六、Node.js 、NPM 、前端工程化等。随着这些技术的普及，一套可称为“万金油“的技术栈被许多商业项目用于生产环境：

jQuery + RequireJS ( SeaJS ) + artTemplate ( doT ) + Gulp ( Grunt ) 。这套技术栈以 jQuery 为核心，能兼容绝大部分浏览器；使用 RequireJS 或 SearJS 进行模块化开发能够解决代码依赖混乱的问题，同时便于维护及团队协做；使用轻量级的前端模板（如 doT）能够将数据与 HTML 模板分离。最后，使用自动化构建工具（如 Gulp）能够合并压缩代码，如写 Less、Sass 以及如今流行的 ES 6，也能够帮你进行预编译。这样一套看似完美的前端解决方案就构成了咱们所说的传统前端开发模式，因为它的简单、高效、实用，至今仍有很多开发者使用。不过随着项目的扩大和时间的推移，出现了更复杂的业务场景，好比 SPA ( 单页面富应用 )、组件解耦等。这是就出现了如 Angular、React 以及 Vue.js 等。

Vue.js 的开发模式是十分多样化的。Vue.js 是一个渐进式的 JavaScript 框架，根据项目需求，能够选择从不一样的维度来使用它。对于一些业务逻辑复杂，对前端工程有要求的项目，可使用 Vue 单文件的形式配合 webpack 使用，必要时还会用到 vuex 来管理状态，vue-router 来管理路由等等。