酸狗带你了解Vue.js

带你了解Vue.js

今天酸狗就带着大家了解一个国内最火的前端框架Vue.js。希望对大家Vue的了解有帮助!

Vue


前言

提示:看文章之前建议对Html/Css/JavaScript有一些基础的了解更好的理解,小白能直观的了解Vue


一、框架和库的区别

框架(Framework)和函数库(Library)

框架:

  • 是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。框架则是为解决一个(一类)问题而开发的产品。框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。
  • 我们调用框架的时候,取的是整个框架,必须使用这个框架的全部代码,而且,我们使用框架的时候,必须按照框架设定好的使用规则来使用它。
  • 功能很强大,但会丧失一部分灵活性

库(插件)︰

  • 提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。(如:从Jquery切换到Zepto)
  • 库是将代码集合成的一个产品,供程序员调用。
  • 直白的说,库为我们提供了很多封装好的函数,看起来零零散散,但是我们使用起来比较灵活,就是哪里需要,我们就取它里面我们所需的某部分,用不到它的地方我们自己来实现。
  • 面向对象的库。面向过程的代码组织形式而成的库叫函数库。在函数库中的可直接使用的函数叫库函数。

二、前端三大主流框架

Vue.js 是前端的主流框架之一,和Angular.js、React.js—起,并成为前端三大主流框架!
三大框架一大抄,都在互相递进升级的一个过程,三大框架互相模仿。

  • Vue.js (在国内使用的比较多)
    是目前最火的一个前端框架,也是国内使用最广泛的前端框架(主要用于单页面应用程序,也可用于手机APP开发)。
  • React (在欧美使用的比较多)
    最流行的一个前端框架( React除了开发网站,还可以开发手机App , Vue语法也是可以用于进行手机App开发的,需要借助于Weex )。
  • Angular.js (在印度使用的比较多)
    出来较早的前端框架,学习曲线比较陡,NG1学起来比较麻烦,NG2~NG5开始,进行了一系列的改革,也提供了组件化开发的概念(抄Vue,React的组件化 );从NG2开始,也支持使用TS(TypeScript)进行编程。

三、什么是Vue.js

  • Vue.js 是目前最火的一个前端框架
  • Vue.js是一套渐进式框架。
  • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。( Vue有配套的第三方类库,可以整合起来做大型项目的开发)。
  • Vue.js有配套的第三方类库,可以将其整合起来做大型项目的开发。如:router、axios、vuex。
  • 前端的主要工作:主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果。
    Vue.js

四、为什么要使用Vue框架

  1. 简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习;react和angular都是国外的语言,文档都是英文,学习成本较高。
  2. Vue.js借鉴了Angular以及React的一些核心思想,是站在巨人的肩膀上开发出来的,结合了其两者的所有优点。
  3. 企业中,使用框架,能够提高开发的效率,企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱。
  4. 提高开发效率的发展历程︰原生JS-> Jquery之类的类库->前端模板引擎->Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作﹔提高渲染效率﹔双向数据绑定的概念.【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】 )
  5. 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑。不需要像html页面那样频繁的操作真实的dom元素,它本身都是虚拟dom跟数据进行捆绑,降低了性能消耗。
  6. 最大的特点就是双向数据绑定,只关注视图层!
  7. 增强自己就业时候的竞争力。

总结

Vue简单易学,国人开发,中文文档,不存在语言障碍,易于理解和学习,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
谢谢!

  • 23
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 26
    评论
要在网页上使用 `video` 标签播放 RTMP 流,需要使用一些 JavaScript 库和插件来实现。以下是两种实现方法: 1. 使用 Video.js Video.js 是一个流行的 HTML5 视频播放器,它支持 RTMP 流。你可以使用其 `videojs-flash` 插件来播放 RTMP 流。首先,需要通过 CDN 引入 Video.js 和 Flash 播放器: ```html <link href="//vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/7.11.4/video.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.0/videojs-flash.min.js"></script> ``` 然后,在页面上添加 `video` 标签,并使用 `videojs()` 方法初始化 Video.js 播放器,并设置 `techOrder` 为 `['flash']`以使用 Flash 播放器: ```html <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> <source src="rtmp://example.com/live/stream" type="rtmp/mp4"> </video> <script> var player = videojs('my-video', { techOrder: ['flash'] }); </script> ``` 2. 使用 JW Player JW Player 也是一个流行的 HTML5 视频播放器,它也支持 RTMP 流。你需要购买 JW Player 许可证,并在页面上引入 JW Player 库和 Flash 播放器: ```html <link href="//cdn.jwplayer.com/lib/8.17.1/jwplayer.css" rel="stylesheet"> <script src="//cdn.jwplayer.com/lib/8.17.1/jwplayer.js"></script> <script src="//cdn.jwplayer.com/lib/8.17.1/jwplayer.flash.swf"></script> ``` 然后,在页面上添加 `div` 标签并设置 `id`: ```html <div id="my-video"></div> ``` 初始化 JW Player 并使用 `rtmp` 协议播放 RTMP 流: ```javascript jwplayer("my-video").setup({ file: "rtmp://example.com/live/stream", type: "rtmp/mp4", primary: "flash" }); ``` 以上是两种比较常用的方法,当然也可以使用其他的库和插件来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬树上柠檬果柠檬树下你和我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值