Vue.js 是什么

最新推荐文章于 2024-05-15 09:15:00 发布

weixin_33717117

最新推荐文章于 2024-05-15 09:15:00 发布

阅读量106

点赞数

文章标签：前端测试 python ViewUI

原文链接：https://my.oschina.net/u/3375733/blog/1853802

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

一、诞生背景

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

二、前端框架模式了解

MVX框架模式：MVC+MVP+MVVM

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

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

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

MVVM 可以拆分为： Model+View+ViewModel 三部分：

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

三、VueJs 是什么

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

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

1. 轻量级的框架

2. 双向数据绑定

3. 指令

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!'
  }
})

五、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>

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

现在的前端技术与开发已不再是十年前写个 HTML 和 CSS 那样简单了，新的概念层出不穷，比如 ECMAScript 6、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 来管理路由等等。

转载于:https://my.oschina.net/u/3375733/blog/1853802