zoukankan      html  css  js  c++  java
  • Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)

    1、什么是Vue.js?

    众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone、angular、reactjs外,还有模块化开发思想的实现库:sea.js 、require.js 、webpack以及前端上线部署集成工具如: grunt、gulp、fis等。

    Vue.js与reactjs相似,是一个构建数据驱动的 web 界面的库,一个注重ViewModel的典型的MVVM框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

    2、Vue.js的独特之处

    2.1 响应的数据绑定

    Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时,我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

    (1)下载安装vue.js

    下载地址:开发版本或者生产版本(在开发时请用开发版本,遇到常见错误它会给出友好的警告。)

    安装

    在html文本中引入vue.js

    <script type="text/javascript" src="js/vue.js"></script>

    注意:Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

    (2)js常用框架对比

    Jquery: jquery依然依靠丰富的dom操作去组合业务逻辑,当业务逻辑复杂的时候,每行代码都会有不知所云的感觉。因为:

    第一:业务逻辑和UI更改该混在一起,

    第二:UI里面还参杂这交互逻辑,让本来混乱的逻辑更加混乱。

    当然第二点从另一方面看也是优点,因为有的时候UI交互逻辑能够更加灵活地嵌入到业务逻辑,这在其他MV*框架中都是比较难处理的。

    Vue: vuejs非常精简,代码量非常少的实现了MVVM框架,在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

    reactjs: reactjs代码量最多,因为它既要管理UI逻辑,又要操心dom的渲染。

    extjs: extjs是唯一一个让User和View解耦,通过事件回调去关联起来。也可通过watch去实现双向绑定。

    angular: angular是一个丰富的javascript库,也是MVVM模式。如果要用angular开发应用,那么从开始到结束,会接触到angular的内部的不同组件,当然学习曲线也比较陡。

     3、示例

    一个最简单的例子

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <script type="text/javascript" src="js/vue.js"></script>
            <title></title>
        </head>
    
        <body>
            <div id="app">
                {{message}}
            </div>
            <script>
                var msgData = "Hello vue.js!";
                var app = new Vue({
                    el: "#app",
                    data: {
                        "message": msgData
                    }
                });
            </script>
        </body>
    
    </html>

    结果展示:

    Hello vue.js!

  • 相关阅读:
    攻城狮在路上(壹) Hibernate(五)--- 映射一对多关联关系
    攻城狮在路上(壹) Hibernate(四)--- 对象标识符(OID)生成机制
    SQL常用方言列表
    maven 依赖查询
    攻城狮在路上(壹) Hibernate(三)--- 属性访问、命名策略、派生属性、指定包名等
    攻城狮在路上(壹) Hibernate(二)--- 第一个hibernate程序
    《精通Hibernate:Java对象持久化技术详解》目录
    攻城狮在路上(壹) Hibernate(一)--- 软件环境、参考书目等一览表
    <转>Hibernate的优、缺点(局限性)
    攻城狮在路上(零)开篇
  • 原文地址:https://www.cnblogs.com/wrcold520/p/5505415.html
Copyright © 2011-2022 走看看