《Vue》 渐进式 JavaScript 框架

Vue.js

Vue.js 是什么
Vue.js(读音 /vjuː/, 类似于view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

“Vue.js” 一个js开发框架,国人的作品,以上是关于vue的介绍。

这是框架出现有过一段时间了,本人刚从安卓跳到前端过来,也接触过一些开发框架。用过Angular的朋友应该都知道,体积太大,用起来比较笨重。还有一款React,Virtual DOM 的存在使得和真实 DOM 隔了一层有时很不方便,函数式的架构使得组件之间的通信也难处理。(其实我没用过,网友说的_)。

不扯太多,来聊聊这个vue。“简主“(简书文章的作者,指本人,我自己起的名字^_&)刚接触前端的时候是从js开始的,相信大部分人也是这样,然后就是jquery,jquery是直接去操作DOM的,他弥补了前端的很多不足的地方。我从网上整理一些关于jquery的常用的功能:

1 、取得页面中的元素。如果不使用JavaScript 库,遍历DOM (Document Object Model ,文档对象模型)树,以及查找 HTML 文档结构中某个特殊的部分,必须编写很多行代码。jQuery 为准确地获取需要检查或操纵的文档元素,提 供了 可靠而富有效率的选择符机制。
2 、修改页面的外观。CSS 虽然为影响文档呈现的方式提供了一种强大的手段,但当所有浏览器不完全支持相同的标准时, 单纯使用CSS 就会显得力不从心。 jQuery 可以弥补这一不足,它提供了跨浏览器的标准解决方案。而且,即使在页面 已经呈现之后,jQuery 仍然能够改变文档中某个部分的类或者个别的 样式属性。
3 、改变页面的内容。jQuery 能够影响的范围并不局限于简单的外观变化,使用少量的代码,jQuery 就能改变文档的内 容。可以改变文本、插入或翻转图像、对列表重新排序,甚至,对HTML 文档的整个结构都能重写和扩充—— 所有这些只 需一个简单易用的API 。
4 、响应用户的页面操作。即使是最强大和最精心设计的行为,如果我们无法控制它何时发生,那它也毫无用处。jQuery 提 供了截取形形色色的页面事件 (比如用户单击一个链接)的适当方式,而不需要使用事件处理程序搞乱HTML 代码。此 外,它的事件处理API 也消除了经常困扰Web 开发人员的浏览器不一 致性。
5 、为页面添加动态效果。为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈。jQuery 中内置的一批淡入、 擦除之类的效果,以及制作新效果的工具包,为此提供了便利。
6 、无需刷新页面即可从服务器获取信息。这种编程模式就是众所周知的AJAX (Asynchronous JavaScript and XML , 异步JavaScript 和XML ),它能辅助Web 开发人员创建出反应灵敏、功能丰富的网站。

jquery的功能已经给前端开发者带来了不少的福音,比如我们来实习一个简单的功能试试,这个demo演示的是在一个文本框里输入什么下面的值就会动态跟着改变,简简单单的几行代码就实习了这个功能:

·Jquery实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <title></title>
    </head>
    <body>
        <div>
            <input placeholder="edit me">
            <p id="text"></p>
        </div>
    </body>
    <script type="text/javascript">
        $('input').bind('input propertychange', function() {
            $('#text').html($(this).val());
        });
    </script>

</html>

·Vue实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <div id="app">
            <input v-model="message" placeholder="edit me">
            <p>{{ message }}</p>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</html>
有人会说,这不是明显jquery代码量会少一点吗?但是vue是双向绑定的,而且项目大了,vue的维护性会好很多,所以建议朋友们可以试试这个开发框架,简主也是刚接触,也在学习阶段,文中难免有些不足请大家积极指出,一起学习,共勉,互相分享心得……
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天周末又逢重阳节,早上先去看看爷爷奶奶有什么需要。奶奶闲不住,出去烧香了。妈妈烧好饭催我给爷爷送去,等我送过去,...
    顾鸣芬阅读 1,475评论 3 1
  • 用严格的标准要求自己,努力!
    不二墩子阅读 1,657评论 0 0
  • 关于拖延症我是这样理解的:刚开始有拖延习惯时主要是觉得那事不是很重要还可以放一放,等发觉再努力都为时已晚就会对自己...
    杨婼_阅读 1,085评论 0 0
  • 很久以前,在使用resign.jar进行重签名的时候,就有出现过找不到zipalign文件的问题,也百度到了答案。...
    tyoko阅读 3,520评论 0 0