Vue（一）

目录

一、Vue简介

二、渐进式框架

组件化开发

三、声明式渲染

四、双向数据绑定

---

一、Vue简介

Vue是一套用于构建用户界面的渐进式框架，是MVVM架构的最佳实践，它不仅专注于MVVM中的ViewModel，做到了数据双向绑定，还是一款相对比较轻量级的JS库，而且它的API简洁。

补充：

• 渐进式代表的含义是：主张最少。什么是主张呢？每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
• 原生HTML页面是通过js操作DOM，而Vue.js操作的是数据。

二、渐进式框架

渐进式代表的是主张最少，在Vue框架中怎么体现呢？

下图包含了Vue的所有部件，我们可以在声明式渲染的基础上，通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。因此Vue与其他庞大而单一架构区别之一就在于它是按需搭建，只做自己该做的事，没有做不该做的事。

组件化开发

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），再分别写好各种组件的实现（填坑），然后整个应用就算做完了，实现了组件化开发。

(39条消息) 什么是VUE？为什么用VUE？_晴天Smile的博客-CSDN博客_vue

三、声明式渲染

Vue.js的核心库只关注视图层，它的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

通过“Hello Vue”示例学习使用Vue：

1、引入vue.js

<!-- 1、引入vue.js -->

<script src="../js/vue.js"></script>

2、准备数据渲染区（View）

<!-- 2、准备数据渲染区（View），{{ 插值表达式 }} -->

    <div id="app">

        {{ message }}

    </div>

3、创建Vue对象（Vue实例）

<script>
        /* 3、创建Vue对象/Vue实例（ViewModel） */
        var vm = new Vue({
            el: '#app',
     
            /* Model */
            data: {
                message: 'Hello Vue!'
            }
        })
</script>

上述示例页面显示结果如下：

此时数据和DOM已经被建立了关联，所有东西都是响应式的。我们打开这个示例的浏览器控制台，并修改 vm.message 的值，可以看到页面显示结果相应地进行更新。如下：

 

此时不再和HTML直接交互，因为Vue实例会将其挂载到一个DOM元素中（上述例子中是#app），然后对其进行完全控制。

四、双向数据绑定

之前了解MVVM架构模式时知道，Vue采用的就是MVVM模式，并且ViewModel是Vue.js的核心，它是一个Vue实例。

MVVM架构流程图如下：

MVVM本身就是实现了双向绑定的，如下图所示，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

Vue数据双向绑定是通过  数据劫持  结合  发布者-订阅者模式  来实现的。

• Observer：数据监听器，用于监听数据变化，如果数据发生改变，不论是在View层还是在Model层，Observer都会知道，然后告诉Watcher。
• Compile：指定解析器，用于初始化视图，对数据进行解析，绑定指定的事件。
• Watcher：订阅者，一方面接收Observer通过消息订阅器Dep传递过来数据变化，一方面通知Compile进行视图更新。

Vue.js数据双向绑定的流程：

首先将需要绑定的数据劫持方法找出来，之后用Observer监听这堆数据，如果数据发生变化，Observer就会告诉Watcher，然后Watcher会决定让那个Compiler去做出相应的操作，这样就完成了数据的双向绑定。