vue.js介绍_尤雨溪国籍-程序员宅基地

技术标签: vue.js  javascript  

在学习 Vue.js 之前,读者应该已经学习过 HTML、CSS 和 JavaScript 基本知识,本文主要介绍 Vue.js 是什么,它有什么特点和优势。

Vue.js 是一套响应式的 JavaScript 开发库。其他前端开发库也有很多,比如 jQuery、ExtJS、Angular 等。

Vue.js 自问世以来所受关注度不断提高,在现在的市场上,Vue.js 是非常流行的 JavaScript 技术开发框架之一。

Vue.js 是什么?

在介绍 Vue.js 是什么之前,我们先来简单介绍一下它的作者尤雨溪(Evan You),以及它的由来。

尤雨溪

尤雨溪是一位美籍华人,在上海复旦大学附中读完高中后,在美国完成大学学业,本科毕业于 Colgate University,后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位。他是 Vue Technology LLC 创始人,曾经在 Google Creative Lab 就职,参与过多个项目的界面原型研发,后加入 Meteor,参与 Meteor 框架本身的维护和 Meteor Galaxy 平台的交互设计与前端开发。

2014 年 2 月,尤雨溪开源了一个前端开发库 Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库,也是一个通过简洁的 API 提供高效数据绑定和灵活组件的系统。

2016 年 9 月 3 日,在南京的 JSConf 上,尤雨溪正式宣布以技术顾问的身份加盟阿里巴巴 Weex 团队,来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。

目前,尤雨溪全职投入 Vue.js 的开发与维护,立志将 Vue.js 打造成与 Angular/React 平起平坐的世界顶级框架。

Vue.js 核心理念

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

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 中消失。

Vue.js 的主要特点

Vue.js 是一个优秀的前端界面开发 JavaScript 库,它之所以非常火,是因为有众多突出的特点,其中主要的特点有以下几个。

1) 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,使读者更加容易理解,能够更快上手。

2) 双向数据绑定

声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令

Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

在 Vue 中,父子组件通过 props 传递通信,从父向子单向传递。子组件与父组件通信,通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

在开发中组件和 HTML、JavaScript 等有非常紧密的关系时,可以根据实际的需要自定义组件,使开发变得更加便利,可大量减少代码编写量。

组件还支持热重载(hotreload)。当我们做了修改时,不会刷新页面,只是对组件本身进行立刻重载,不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由

Vue-router 是 Vue.js 官方的路由插件,与 Vue.js 深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理

状态管理实际就是一个单向的数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,使 State 产生变化,从而使 View 重新渲染,形成一个单独的组件。

Vue.js 有什么优势

Vue 与其他框架相比有什么优势呢?上面我们已经提到了 jQuery,还有其他的前端框架,如 React、Angular 等。相比较而言,Vue 最为轻量化,而且已经形成了完整的一套生态系统,可以快速迭代更新。

作为前端开发人员的首选入门框架,Vue 有很多优势:

  • Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。
  • Vue.js 最突出的优势在于可以对数据进行双向绑定(在之后的编写中我们会明显地感觉到这个特点的便捷)。
  • 使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能显示出非常好看的效果。
  • 相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。

说明:Vue必须在ES5版本以上的环境下使用,一些不支持ES5的旧浏览器中无法运行Vue。

官网更权威:https://cn.vuejs.org/v2/guide/index.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_56546994/article/details/119980666

智能推荐

一步一个坑之IDEA不能识别.vue?_从idea中运行vue的url时,token识别不到-程序员宅基地

文章浏览阅读1.3w次,点赞6次,收藏5次。ctrl+alt+sEditor->File Types 找到html文件 在下面点+号 输入*.vue 确定到死 ok_从idea中运行vue的url时,token识别不到

Fast特征检测_fast特征检测的.derect()-程序员宅基地

文章浏览阅读463次。Fast(Features from Accelerated Segment Test)特征算法定义的特征点或“角点“定义基于假定特征点周围的图像强度,通过检查候选像素周围一圈像素来决定是否为特征点。与中心点差异较大的像素如果组成连续的圆弧,并且弧长大于圆周长的3/4,则认为该中心点是一个特征点。int main(){ Mat img = imread("test.jpg"); vecto_fast特征检测的.derect()

(20200208已解决)pip install 出现“[WinError 10061] 由于目标计算机积极拒绝,无法连接”_pip [winerror 10061] 由于目标计算机积极拒绝,无法连接。-程序员宅基地

文章浏览阅读1.7k次,点赞5次,收藏4次。问题描述pip install pymysql时出现如题错误。问题原因此问题主要是因为浏览器代理导致。对于Chrome浏览器:设置–高级–系统–打开您计算机的代理设置关闭“手动设置代理”下面的使用代理服务器。问题解决。References(已解决)[WinError 10061] 由于目标计算机积极拒绝,无法连接..._pip [winerror 10061] 由于目标计算机积极拒绝,无法连接。

复习fragment的生命周期_哪些生命周期方法是fragments有但是activity没有的-程序员宅基地

文章浏览阅读297次。我们都知道fragment的生命周期是依赖activity而存在的,上次复习了activity的生命周期这篇文章就来复习一下fragment 的生命周期。fragment的生命周期和activity的生命周期类似,但是没有activity的onRestart()方法但是多出来了与activity之间建立联系和解除联系的几个方法,分别为onAttach,onCreatView,onActivit_哪些生命周期方法是fragments有但是activity没有的

win7安装驱动出现找不到文件_mobile device power monitor-程序员宅基地

文章浏览阅读1w次,点赞6次,收藏6次。许久没有写文章了,今天写一篇吧,顺便记录一下get新技能。昨天要使用Mobile Device Power Monitor来测试个东西,结果连到电脑上,安装了软件。在安装驱动的时候,出现找不到指定文件:各种折腾了半天,还是没搞定。在同事的电脑上可以识别,于是去同事那拷了usbser.sys到c:\windows\system32\drivers依然还是不行(我电脑上怎么没有_mobile device power monitor

SSM,三层结构,MVC三者的说明及关系(很全面)_mvc是dao,daomain和service吗-程序员宅基地

文章浏览阅读4.4w次,点赞146次,收藏788次。三层架构三层架构是指:视图层view(表现层),服务层service(业务逻辑层),持久层Dao(数据访问层),它们的功能是:1.view层: 用于显示数据和接收用户输入的数据,为用户提供一种交互式操作的界面。主要作用是界面展示,接收请求,分发请求。2.service层:实现业务的主要逻辑,是系统架构中体现核心价值的部分。将一个业务中所有的操作封装成一个方法,同时保证方法中所有的数据库更新操作,即保证同时成功或同时失败。避免部分成功部分失败引起的数据混乱操作。3.Dao层:也称为是持久层,其功_mvc是dao,daomain和service吗

随便推点

html 表格折叠效果,tableView 的折叠效果-程序员宅基地

文章浏览阅读655次。在开发中 UITableView 是最常见的布局控件,除了我们熟知的一些使用方式,也有另一些相对常见但不常用的使用方式值得我们去了解,本篇文章只针对其中一种常见的使用方式作简单介绍。废话不多说,先上效果图:tableView 另类简单使用效果图以上效果样式可以说在我们手机中的 app 上非常常见,其实要做这种效果也非常简单,只需要会使用 UITableView 即可。一、分析在效果图中,我们可以..._html 可折叠表格

一次性解决office部署问题(即点即用等)_office部署工具未正常退出-程序员宅基地

文章浏览阅读1.4w次,点赞9次,收藏27次。因为之前电脑安装了office2019,后面需要安装Visio,下载安装时报错30204-44,查看发现之前安装的office版本是即点即用版,可能这两者不兼容。,可以方便的安装和激活office(官方只提供office软件下载,正版激活等)。_office部署工具未正常退出

〖大前端 - 基础入门三大核心之JS篇⑧〗- JavaScript的算数表达式和算数运算符_javascriptengine计算算术表达式-程序员宅基地

文章浏览阅读1.8w次,点赞2次,收藏3次。接下来的几个章节我们将要学习一下 JavaScript 中的表达式与运算符,该章节介绍的内容是 "算术表达式" 与 "算术运算符"。_javascriptengine计算算术表达式

代码截屏与禁止截屏_h5如何禁止用户截屏功能-程序员宅基地

文章浏览阅读3.9k次。今天看慕课网的视频,其中使用了代码截屏,鉴于一起没有用过特此记录一下下很简单的几行代码这里我就手敲了不传代码片了//获取activity最顶层窗口的viewView view=getWindow().getDecorView();//设置控件允许绘制缓存view.setDrawingCashEnabled(true);//获取控件的绘制缓存(快照)view.bu_h5如何禁止用户截屏功能

学会用好 Visual Studio Code_visual studio code是干什么的-程序员宅基地

文章浏览阅读1.4w次,点赞3次,收藏21次。Visual Studio Code是个牛逼的编辑器,启动非常快,完全可以用来代替其他文本文件编辑工具。又可以用来做开发,支持各种语言,相比其他IDE,轻量级完全可配置还集成Git感觉非常的适合前端开发,是微软亲生的想必TypeScript会支持的非常好。 所以我仔细研究了一下文档未来可能会作为主力工具使用。主命令框 Command Palette最重要的功能就是F1或Ctrl_visual studio code是干什么的

redis集群搭建-程序员宅基地

文章浏览阅读3.1k次,点赞4次,收藏16次。集群细节所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和宽带。节点的fail是通过集群中超过半数的节点检测失效时才能生效。客户端与redis节点直连,不需要中间proxy层,客户端不需要连接集群所有节点,连接集群中任何一个可用节点即可。Redis-cluster把所有的物理节点映射到[0-16383]slot上,cluster负责维护node<->slot<->valueredis集群搭建制作6个redis实例,端口号分别是63_redis集群搭建