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!

Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）的更多相关文章

  1. Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）

    #使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...

  2. Vue.js-----轻量高效的MVVM框架（十二、组件动态切换）

    在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...

  3. Vue.js-----轻量高效的MVVM框架（八、使用组件）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  4. Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  5. Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

  7. Vue.js-----轻量高效的MVVM框架（十、父子组件通信）

    #1.父链 html: <h3>#父链</h3> <div> <div>子组件可以用 this.$parent 访问它的父组件.根实例的后代可以用 th ...

  8. Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）

    这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  9. Vue.js-----轻量高效的MVVM框架（五、计算属性）

    #基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...

随机推荐

  1. U盘文件或目录损坏且无法读取怎么解决

    转自 http://jingyan.baidu.com/article/020278118afaec1bcc9ce5df.html U盘文件或目录损坏且无法读取怎么解决 听语音 | 浏览:37504 ...

  2. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-003比较算法及算法的可视化

    一.介绍 1. 2. 二.代码 1. package algorithms.elementary21; /*********************************************** ...

  3. HDU 5373 The shortest problem (数学)

    题意:给定两个数的n和m,有一种操作,把 n 的各位数字加起来放到 n后面形成一个新数n,问重复 m 次所得的数能否整除 11. 析:这个题首先要知道一个规律奇数位的和减去偶数位的和能被11整除的数字 ...

  4. Business Trip to Taian

    工作必备 电脑.电源(下载好小助手.VPN.个人证书) 手机.充电器 重要参考书籍 生活用品 衣服,夏天体恤为主,别忘了加件外套 被罩.床单和枕巾 牙刷牙膏肥皂之类的必带,中号浴巾一条 拖鞋要不要? ...

  5. Altium designer的PCB设计规则

    PCB布线规则,布板需要注意的点很多,但是基本上注意到了下面的这此规则,LAYOUT PCB应该会比较好,不管是高速还是低频电路,都基本如此. 1. 一般规则 1.1 PCB板上预划分数字.模拟.DA ...

  6. execve(".. ",[".. ",".. "],[/* ..*/])第二个 参数 数组硬传

    strace.第一次跟踪点东西的启动. 第一次看见..execve(".. ",[".. ",".. "],[/* ..*/]) 第二个 参 ...

  7. Mac下的UI自动化测试 （一）

    在我看来,实现UI自动化测试的过程一向都是令人快乐的事情,而维护它们就是跟噩梦一样了,尤其是对每次CI产生的build进行BVT测试,由于开发不会告诉你任何UI的变化,那么你拿到的测试结果就势必会一片 ...

  8. hadoop学习记录--hdfs文件上传过程源码解析

    本节并不大算为大家讲接什么是hadoop,或者hadoop的基础知识因为这些知识在网上有很多详细的介绍,在这里想说的是关于hdfs的相关内容.或许大家都知道hdfs是hadoop底层存储模块,专门用于 ...

  9. javascript 文本框值变化触发事件

    javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...

  10. [CentOS7] 设置语言环境

    博主想要将英文环境(en_US.UTF-8)改为中文环境(zh_CN.UTF-8),有两种解决方法 一.临时解决方法 使用LANG=“zh_CN.UTF-8”,这个命令来实现,不过在重新登录的时候又会 ...