为什么学习Vue框架??

如题所述

vue框架算是最近前端开发很好的工具。可以突破以前所没有实时更新页面。很有发展前景,很多大公司现在正在使用。

Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式(Model->View->View-Model)和一个可组合的组合型组件系统,具有简单的、灵活的API(接口)。该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术,是一款较新的功能性框架。

在这里介绍下什么是虚拟DOM和双向数据绑定:
1、虚拟DOM(Virtual DOM),顾名思义,从字面上理解就是虚构的DOM树,当我们用传统的原生API或者jQuery去操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。即使计算机硬件一直在更新迭代,但是操作真实DOM的代价仍旧很昂贵,真实的DOM节点,哪怕是一个最简单的div也包含很多属性,所以频繁的操作,会导致页面卡顿,影响用户的体验。为了解决这个浏览器性能问题,虚拟DOM(Virtual DOM)就被设计出来了,其核心算法是Diff算法。它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,通知浏览器去执行绘制工作,避免了大量的无谓的计算量。

用js对象模拟DOM节点的好处是:页面的更新可以先全部反应在js对象上,操作内存中的js对象的速度明显要快的多。等更新完成后,在将最终的js对象映射成真实的DOM,交由浏览器去绘制。(提高了性能,并且运行速度快)

2、双向数据绑定,在讲双向数据绑定前,我们要想说下单向数据绑定,单向数据绑定,就是把Model绑定到View上,当我们用JavaScript代码更新Model时,View就会自动更新了(Model-->View)。那么双向数据绑定就是,用户更新了View,Model的数据也会自动被更新(Model<-->View)。什么情况下用户可以更新View呢?举个最直接的例子,填写表单,当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那么就相当于我们把Model和View做了双向数据绑定。其原理是我们要对input进行value 的属性绑定(v-bind:value=”...”)将Model中的变量绑定到View上(Model->View)以及当用户对input进行操作时,进行事件监听(v-on:input=”...”)将View上的更新传回Model中(View->Model)从而实现双向数据绑定,在Vue中,以上操作过于繁琐,便提供了v-model直接实现双向数据绑定的效果。
在进行Vue项目开发过程中,我们可以通过script标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。并且通过new Vue()进行新建一个Vue的实例对象,其下有很多属性,包括el、data、methods、computed、watch等等,el为指向页面的节点元素,data存储数据,数据类型包括simple datatype(简单数据类型)以及complex datatype(复杂数据类型),用插值表达式{{}}显示,在插值显示的时候,不需要写上data,methods内存储方法,通过fn()的形式调用方法,computed内存储也是方法,但是其为计算数据,复杂逻辑的应该存储在computed中,计算属性是基于它们的依赖进行缓存的,由于computed带有一层缓存,所以只有在它的相关依赖发生改变时才会重新运行,而methods则是调用一次生成一次,computed中的方法调用时不需要加()的,watch为监听,监控,监听data中的属性值也可以监控对象,存在两个参数(currentValue当前值和prevValue之前值)。
温馨提示:答案为网友推荐,仅供参考
第1个回答  2021-11-25
Vue是一个前端的框架,目前市场三大前端主流框架分别是Angular、React和Vue。Vue之所以被开发者青睐,主要是Vue乘承了Angular和React框架两者的优势,并且Vue的代码简洁、上手容易,在市场上也得到大量应用,下面我就对Vue的特性进行简单介绍。

1、轻量级

Angular的学习成本高,使用起来比较复杂,而Vue相对简单、直接,所以Vue使用起来更加友好。

2、数据绑定

Vue是一个MVVM框架,数据双向绑定,当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化,这也算是Vue的精髓之处。尤其是在进行表单处理时,Vue的双向数据绑定非常方便。
3.指令

指令主要包括内置指令和自定义指令,以“v-”开头,作用于HTML元素。指令提供了一些特殊的特性, 将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为。 例如,v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。

4、插件

用于对Vue框架功能进行扩展,通过MyPlugin.install完成插件的编写,简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex 等。

Vue很多特性与Angular和React有着相同的地方,但是也有着性能方面的差别。

5、Vue使用基于依赖追踪的观察系统并且使用异步队列更新,所有的数据都是独立触发的,提高了数据处理能力。

React和Vue的中心思想是一切都是组件,组件之间可以实现嵌套。React 采用了特殊的JSX语法,Vue中也推崇编写以*.vue后缀命名的文件格式,对文件内容都有一些规定, 两者需要编译后使用。

值得一提的是,React依赖虚拟DOM,而Vue使用的是DOM模板。Vue 在模板中提供了指令、过滤器等,可以非常方便和快捷地操作DOM。推荐将Vue 使用到具有复杂交互逻辑的前端应用中,以确保用户的体验效果。本回答被网友采纳
第2个回答  2021-11-25
为什么要学习Vue?

说起Vue,不得不让我们想起Angular和React,他们都是业界非常优秀的前端框架。

可以说,这三款框架基本处于三分天下的一个局面,仅从GitHub趋势来看,Vue更是排在了第一位,至少有13万的Star,它基于HTML的模板语法,响应式的更新机制,可以让我们更快的更高效的开发项目,渐进式的开发理念和繁荣的生态圈为我们提供了大量的最佳实践,
无论你是开发简单的活动页,还是复杂逻辑的中后台系统,Vue都可以轻松应对,目前不管是BAT大厂(BAT是指:中国互联网公司三巨头)还是在创业公司,Vue都有广泛的应用,相关技术原理也成为了我们面试中必考知识点。对于任何一个前端工程师来说,它都是一门非常值得我们学习的前端框架。
BAT,B指百度、A指阿里巴巴、T指腾讯,是中国互联网公司百度公司(Baidu)、阿里巴巴集团(Alibaba)、腾讯公司(Tencent)三大互联网公司首字母的缩写。百度总部在北京、阿里巴巴总部在浙江省杭州市、腾讯总部在广东省深圳市。

02 - 什么是 Vue ?

Vue的历史背景,就像它本身一样的简单,纯粹。刚开始它只是一个人的兴趣项目,也就是我们熟悉的尤雨溪大神。
在这里插入图片描述

在2013年的时候,是他的一个实验性项目,那个时候,React也只是刚刚发布,Angular也只是Angular1,不可否认的是,Vue有很多的一个功能点,它的灵感都是来自于Angular和React.
其实他们要解决的一个问题都是一个数据驱动的问题,避免我们去手动的操作Dom的问题。Vue发布之后呢,收到了一个众多的好评,但是也饱受了很多的非议。
作为一个个人的项目,能够发展到现在的一个规模,实属不易。好在Vue足够优秀,经受住了我们的考验,现在也已经发展到成熟的阶段,现在Vue的生态圈已经足够的完善。

03 - Vue的特点:

在这里插入图片描述

相比于React压缩后大概是35kb;Angular压缩后大概是60Kb左右;而Vue压缩后大概是20kb ,所以说更加轻量。
而且是一个渐进式的框架:意思就是你不需要学习完Vue的全部知识,
做项目的时候,你可以用到什么就学习什么。
响应式更新机制,就是说当我们的数据更新之后,视图会自动的刷新。我们不需要像React那样comentupdata 去进行一个性能优化,我们的这个响应式更新机制它已经在底层去帮我们去处理这些事情。
我们学习Vue的成本低,因为它的一个模板语法是基于HTML的,如果说你有HTML的一个基础,可以很快的去上手Vue的框架。
第3个回答  2021-11-25
说起Vue,不得不让我们想起Angular和React,他们都是业界非常优秀的前端框架。
可以说,这三款框架基本处于三分天下的一个局面,仅从GitHub趋势来看,Vue更是排在了第一位,至少有13万的Star,它基于HTML的模板语法,响应式的更新机制,可以让我们更快的更高效的开发项目,渐进式的开发理念和繁荣的生态圈为我们提供了大量的最佳实践,

无论你是开发简单的活动页,还是复杂逻辑的中后台系统,Vue都可以轻松应对,目前不管是BAT大厂(BAT是指:中国互联网公司三巨头)还是在创业公司,Vue都有广泛的应用,相关技术原理也成为了我们面试中必考知识点。对于任何一个前端工程师来说,它都是一门非常值得我们学习的前端框架。
BAT,B指百度、A指阿里巴巴、T指腾讯,是中国互联网公司百度公司(Baidu)、阿里巴巴集团(Alibaba)、腾讯公司(Tencent)三大互联网公司首字母的缩写。百度总部在北京、阿里巴巴总部在浙江省杭州市、腾讯总部在广东省深圳市。
02 - 什么是 Vue ?
Vue的历史背景,就像它本身一样的简单,纯粹。刚开始它只是一个人的兴趣项目,也就是我们熟悉的尤雨溪大神。
在2013年的时候,是他的一个实验性项目,那个时候,React也只是刚刚发布,Angular也只是Angular1,不可否认的是,Vue有很多的一个功能点,它的灵感都是来自于Angular和React.

其实他们要解决的一个问题都是一个数据驱动的问题,避免我们去手动的操作Dom的问题。Vue发布之后呢,收到了一个众多的好评,但是也饱受了很多的非议。
作为一个个人的项目,能够发展到现在的一个规模,实属不易。好在Vue足够优秀,经受住了我们的考验,现在也已经发展到成熟的阶段,现在Vue的生态圈已经足够的完善。
03 - Vue的特点:
相比于React压缩后大概是35kb;Angular压缩后大概是60Kb左右;而Vue压缩后大概是20kb ,所以说更加轻量。
而且是一个渐进式的框架:意思就是你不需要学习完Vue的全部知识,
做项目的时候,你可以用到什么就学习什么。
响应式更新机制,就是说当我们的数据更新之后,视图会自动的刷新。我们不需要像React那样comentupdata 去进行一个性能优化,我们的这个响应式更新机制它已经在底层去帮我们去处理这些事情。
我们学习Vue的成本低,因为它的一个模板语法是基于HTML的,如果说你有HTML的一个基础,可以很快的去上手Vue的框架。
如果说,你现在还在犹豫要不要学习Vue,那么我可以肯定而且明确的告诉你,不管你是否使用Vue,只要你是从事前端的这个行业,它里面的很多知识点都是值得我们去学习的。 总之,你只要学习就是对了。
第4个回答  2021-11-25

    jQuery是最早的js框架,优点是简化DOM操作,缺点是DOM操作太频繁,影响前端性能。

    Anguler是Google收购的前端框架,其特点就是将后台的MVC模式搬到前台并增加了模块化开发的理念;缺点是版本迭代不合理,1代 -> 2代就是两个东西,目前最新应该是v12。

    React是Facebook出品,其特点是提出了虚拟DOM的概念用于减少真实DOM的操作,在内存中模拟DOM操作,有效的提升了前端渲染的效率;缺点是使用繁杂,需要额外学习一门 JSX 语言。

    vue是一个中国人开发的(尤雨溪),其特点是综合了 Anguler(模块化)和 React(虚拟DOM)的优点,是一款渐进式js框架(就是逐步实现新特性);由于vue不具备通信能力,所以要额外使用一个通信框架与服务器交互。

    Axios是前端通信框架,与之类似的有jQuery提供的Ajax通信功能。