vue介绍与入门

65 阅读 0 评论 43 点赞

我是靠谱客的博主痴情菠萝，最近开发中收集的这篇文章主要介绍vue介绍与入门，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

总结所学习的知识，能让我进步的更快。

一.什么是vue.js

vue.js是javascript的一个轻量开源库。它的作者是尤雨溪，于2014年2月编写的开源库，到目前为止，它在 github 上已经超过了10w多颗star。Vue.js是用于构建交互式的Web界面的库，提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。

我们现在所学习的是vue2.0的版本,那么我们可以通过登录国内站点访问,

中文文档地址：https://cn.vuejs.org/v2/guide/index.html

MVVM轻量级框架

github

gitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名gitHub。

gitHub于2008年4月10日正式上线，除了git代码仓库托管及基本的 Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、python等。

API

API就是操作系统留给应用程序的一个调用接口，应用程序通过调用操作系统的 API 而使操作系统去执行应用程序的命令。

举个例子：前端程序员要从后台拿数据需要一个接口，通过这个接口来获取数据，而这个接口就是API。

vue.js具备了以下6大特点：

简洁： HTML 模板 + JSON 数据
数据驱动： 自动追踪依赖的模板表达式和计算属性。
组件化： 用解耦、可复用的组件来构造界面。
轻量： ~24kb min+gzip，无依赖。
快速： 精确有效的异步批量 DOM 更新。
模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

二. 什么是mvvm?

2.1 MVC

mvc是应用最为广泛的软件架构之一,一般MVC分为:Model(模型),Controller(控制器)和view.这主要书基于分层的目的,让彼此的职责分开。

View层一般都是通过controller来和Model进行联系.Controller是Model和View的协调者,View和Model不直接联系.基本都是单向联系的。

MVC结构

那么,用户操作应该放在什么位置，MVC之间又会发生什么变化呢？

用户(User)通过Controller来操作DOM的变化。

2.2 MVP

MVP 是从经典的 MVC 模式演变而来,它们的基本思想有相通的地方:Controller/Presenter 负责逻辑的处理,Model 提供数据,view负责显示。

在MVP中，Presenter 完全把 view 和 Model 进行了分离，主要的程序逻辑在 Presenter 实现.而且, Presenter 与具体的view 是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更 View 的时候可以保持Presenter不变。

2.3 MVVM

MVVM 代表框架有:知名度相对偏低的 Knockout.js ,早期的 Ember.js.目前比较火热的来自 Google 的 Angular.js,和由我们国人前端大神尤雨溪编写的 vue.js

相比前面两种模式.MVVM 只是把 MVC的 Controller 和 MVP 的 Presenter 改成了 ViewModel.View 的变化会自定更新到 ViewModel, ViewModel 的变化也会自动同步到 View 上显示.

2.4 单页面应用程序

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序，是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。

单页面应用程序的优点:

2.4.1首先，最大的好处是用户体验，对于内容的改动不需要加载整个页面。这样做好处颇多，因为数据层和UI的分离，可以重新编写一个原生的移动设备应用程序而不用（对原有数据服务部分）大动干戈。

2.4.2单页面Web应用层程序最根本的优点是高效。它对服务器压力很小，消耗更少的带宽，能够与面向服务的架构更好地结合。

2.4.3虽然还有一些历史遗留问题（大部分是针对HTML5的改进）以及SEO。如果你看中SEO，那就不应该在页面上使用JavaScript，你应该使用网站而不是Web应用。目前该技术还存在一些争议，但这并不是重点，因为这种类型的体系架构为SAAS Web Apps提供了一个极大的可用性。

三.Vue.js 和 juqery 的区别

jquery：这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低.

vue:是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起 .

我们可以通俗的理解为这两者有以下几点的不同:

jQuery首先要获取到 dom 对象，然后对 dom 对象进行进行值的修改等操作
Vue是首先把值和 js 对象进行绑定，然后修改js对象的值，Vue框架就会自动把 dom 的值就行更新。
可以简单的理解为 Vue 帮我们做了 dom 操作，我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue 这个框架就会自动帮我们做好 dom 的相关操作，而且我们也要认识到 Vue是以数据驱动的前端框架。
这种 dom 元素跟随 JS 对象值的变化而变化叫做单向数据绑定，如果 JS 对象的值也跟随着 dom 元素的值的变化而变化就叫做双向数据绑定。