Vue.js 简介及核心特性

种麦南山下

已于 2022-10-11 17:35:37 修改

阅读量3.8k

点赞数 4

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-10-11 14:08:35 首次发布

本文链接：https://blog.csdn.net/conving/article/details/127262170

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、Vue是什么

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。【这里有个小故事，在注册view时发现被占用了，后来用的view的德语vue】。2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架最早发布于2014年2月。

二、Vue核心特性

1、数据驱动（MVVM)

MVVM表示的是 Model-View-ViewModel

Model：模型层，负责处理业务逻辑以及和服务器端进行交互
View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

这时候需要一张直观的关系图，如下

2、组件化

什么是组件化？一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件。

组件化的优势：

降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

3、指令系统

解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用的指令
- 条件渲染指令 v-if
- 列表渲染指令v-for
- 属性绑定指令v-bind
- 事件绑定指令v-on
- 双向数据绑定指令v-model

没有指令之前我们是怎么做的？是不是先要获取到DOM然后在....干点啥。

三、MVVM 模式

前端三大MV* 模式：

MVC（同步通信为主）：Model、View、Controller

MVP（异步通信为主）：Model、View、Presenter

MVVM（异步通信为主）：Model、View、ViewModel

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当下流行的MVVM框架有：Vue.js、AngularJS。

MVVM即模型-视图-视图模型。模型指的是后端传递的数据；视图指的是所看到的页面。视图模型是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

M：模型（Model）：对应data中的数据
V：视图（View）：模板
VM：视图模型（ViewModel）：Vue 实例对象

ViewModel的作用：

该层向上与视图层进行双向数据绑定
向下与Model 层通过接口请求进行数据交互

Model：模型层，在这里表示JavaScript对象

View：视图层，在这里表示DOM（HTML操作的元素）

ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现者。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生变化

Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据的绑定。

MVVM的组成部分：

四、VueJS提供的功能

1. 虚拟DOM

VueJS使用了虚拟DOM，这个虚拟DOM也被React，Ember等其他框架所使用。这个改变不是在DOM上进行的，而是创建了一个以JavaScript数据结构形式存在的DOM副本。每当进行任何更改时，都会对JavaScript数据结构进行更改，并将后者与原始数据结构进行比较。然后，最终的更改将更新为真实的DOM，用户将看到这种变化。这在优化方面是很好的，它比较容易，可以以更快的速度进行改变。

2. 数据绑定

数据绑定功能可以帮助操纵或分配HTML属性的值，改变样式，通过VueJS提供的称为v-bind的绑定指令来分配类。

3. 组件

组件是VueJS的重要功能之一，可以帮助创建可以在HTML中重用的自定义元素。

4. 事件处理

v-on是添加到DOM元素以监听VueJS中的事件的属性。

5. 动画/过渡

VueJS提供了多种方式来在向DOM元素添加/更新或删除HTML元素时应用转换。 VueJS有一个内置的转换组件，需要将其包装在元素中以获得转换效果。我们可以轻松地添加第三方动画库，也可以为界面添加更多的交互性。

6. 计算属性

这是VueJS的重要特性之一。它有助于倾听对UI元素所做的更改并执行必要的计算。这不需要额外的编码。

7. 模板

VueJS提供基于HTML的模板，将DOM与Vue实例数据绑定。Vue将模板编译为虚拟DOM渲染功能。我们可以使用渲染函数的模板，这样必须用渲染函数替换模板。

8. 指令

VueJS有内置的指令，例如：v-if，v-else，v-show，v-on，v-bind和v-model，这些指令用于在前端执行各种操作。

9. 观察者

观察者(Watcher)被应用于改变的数据。例如，表单输入元素。在这里不必添加任何额外的事件。观察者负责处理任何数据更改，使代码简单快捷。

10. 路由

页面之间的导航是在vue-router的帮助下完成的。

11. 轻量级

VueJS脚本非常轻便，性能也非常快。

12. Vue公司-CLI

可以使用vue-cli命令行界面在命令行安装VueJS。这有助于使用vue-cli轻松构建和编译项目。

五、Vue跟传统开发的区别

没有落地使用场景的革命不是好革命，就以一个高频的应用场景来示意吧注册账号这个需求大家应该很熟悉了，如下

用jquery来实现大概的思路就是选择流程dom对象，点击按钮隐藏当前活动流程dom对象，显示下一流程dom对象如下图(代码就不上了，上了就篇文章就没了..)

用vue来实现，我们知道vue基本不操作dom节点，双向绑定使dom节点跟视图绑定后，通过修改变量的值控制dom节点的各类属性。所以其实现思路为：视图层使用一变量控制dom节点显示与否，点击按钮则改变该变量，如下图

总结就是：

Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM

六、VueJS实例

文件：instances.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs实例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <p>姓名 : {{name}}</p>
         <p>城市 : {{city}}</p>
         <p>{{mydetails()}}</p>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

文件：vue_instance.js

var  vm = new Vue({
   el: '#vue_det',
   data: {
      name : "Maxsu",
      city  : "海口",
      address    : "海口市美兰区人民大道58号"
   },
   methods: {
      mydetails : function() {
         return "我叫 "+this.name +" ，所在城市： "+ this.city;
      }
   }
})

运行结果：