首页 > HTML5资源教程 > 什么是VUE?VUE与JS的对比

什么是VUE?VUE与JS的对比

日期：2018-05-11

来源：程序思维浏览：1859次

1.1. vue的引入

先看下面这样一个简单的例子,实现了这样一个功能

数据的双向绑定:也就是数据的同步修改

逻辑分析: 

    1. 我们需要一个UI元素和属性相互绑定的方法
    2. 我们需要监视属性和UI元素的变化
    3. 我们需要让所有绑定的对象和元素都能感知到变化

1.1.1. vue与js的对比

1.1.1.1. js的实现(了解)

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Demo</title>

    </head>

    <body>
        <div>

            <h4>数据的双向绑定----js的实现</h4>
            <input type="text" data-bind-1="name" />
            <input type="text" data-bind-1="name" />

        </div>
    </body>

</html>
<script>
    function DataBinder(object_id) {
        // Create a simple PubSub object
        var pubSub = {
                callbacks: {},

                on: function(msg, callback) {
                    this.callbacks[msg] = this.callbacks[msg] || [];
                    this.callbacks[msg].push(callback);
                },

                publish: function(msg) {
                    this.callbacks[msg] = this.callbacks[msg] || [];
                    for(var i = 0, len = this.callbacks[msg].length; i < len; i++) {
                        this.callbacks[msg][i].apply(this, arguments);
                    }
                }
            },

            data_attr = "data-bind-" + object_id,
            message = object_id + ":input",
            timeIn;

        changeHandler = function(evt) {
            var target = evt.target || evt.srcElement, // IE8 compatibility
                prop_name = target.getAttribute(data_attr);

            if(prop_name && prop_name !== "") {
                clearTimeout(timeIn);
                timeIn = setTimeout(function() {
                    pubSub.publish(message, prop_name, target.value);
                }, 50);

            }
        };

        // Listen to change events and proxy to PubSub
        if(document.addEventListener) {
            document.addEventListener("input", changeHandler, false);
        } else {
            // IE8 uses attachEvent instead of addEventListener
            document.attachEvent("oninput", changeHandler);
        }

        // PubSub propagates changes to all bound elements
        pubSub.on(message, function(evt, prop_name, new_val) {
            var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
                tag_name;

            for(var i = 0, len = elements.length; i < len; i++) {
                tag_name = elements[i].tagName.toLowerCase();

                if(tag_name === "input" || tag_name === "textarea" || tag_name === "select") {
                    elements[i].value = new_val;
                } else {
                    elements[i].innerHTML = new_val;
                }
            }
        });

        return pubSub;
    }

    function DBind(uid) {
        var binder = new DataBinder(uid),

            user = {
                // ...
                attributes: {},
                set: function(attr_name, val) {
                    this.attributes[attr_name] = val;
                    // Use the `publish` method
                    binder.publish(uid + ":input", attr_name, val, this);
                },
                get: function(attr_name) {
                    return this.attributes[attr_name];
                },

                _binder: binder
            };

        // Subscribe to the PubSub
        binder.on(uid + ":input", function(evt, attr_name, new_val, initiator) {
            if(initiator !== user) {
                user.set(attr_name, new_val);
            }
        });

        return user;
    }

    var DBind = new DBind(1);
    DBind.set("name", "黄奇");
</script>

1.1.1.2. vue的实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!--1. 引入js文件-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <!--2. 视图    view-->
    <div id="app">
        <h4>数据双向绑定----vue</h4>
        <input type="text" name="" id="" v-model="message" />
        <input type="text" name="" id="" v-model="message" />
    </div>
</body>

</html>
<script type="text/javascript">
//数据模型
var dataModel = {
    message: "hello"
}

//viewModel   ----连接视图和数据模型
var app = new Vue({
    el: "#app",
    data: dataModel
})
</script>

1.2. Vue是什么

1.2.1. 描述(vue的发展史)

vue发展里程碑

1.2.2. 概念


vue是一个构建用户界面的框架(库),它的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图集合

vue自身不是一个全能框架的核心是只关注视图层,因此它非常容易学习，非常容易与其它库或已有项目整合

vue在与相关工具和支持库一起使用时, 也能完美地驱动复杂的单页应用,在之后的课程中,我们会配合webpack来使用

1.2.3. 特点

1.2.3.1. 响应的数据绑定/响应式编程

保持状态和数据的同步

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 

DOM时，我们的代码常常是命令式的、重复的与易错的。

Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 

DOM“绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。

每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 

DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。

1.2.3.2. 组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

精品好课

最新完整React视频教程从入门到精通纯干货纯实战

React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...

最新完整React+VUE视频教程从入门到精，企业级实战项目

React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...

VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)

VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...

React实战视频教程仿京东移动端电商

React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。

HTML5视频播放器video开发教程

适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...

jQuery视频教程从入门到精通

jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......

HTML5基础入门视频教程易学必会

HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...

Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程

2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...