Vue简介

骑猪看日落 2021-07-24 18:11 321阅读 0赞

**目录**

一 点睛

二 MVVM模式的实现者

三 为什么要使用Vue.js

四 入门实例

五 集成场景

六 开发工作流

七 参考资料

# **一 点睛** #

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue只关注视图层，采用自底向上增量开发的设计。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

Vue的核心可只关注于视图层，不仅容易上手，还便于与第三方库（vue-router,vue-resource,vuex）或既有项目整合。

# 二 MVVM模式的实现者 #

*  Model：模型层，在这里表示JavaScript对象。
 *  View：视图层，在这里表示DOM（HTML操作的元素）。
 *  ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中ViewModel层的实现者.

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。

ViewModel能够监听到视图的变化，并能够通知数据发生改变。

到此，我们明白，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

# 三 为什么要使用Vue.js #

*  轻量。压缩后只有20多k。
 *  移动优先。
 *  容易上手，学习曲线平稳，文档齐全。
 *  吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能，如计算属性。虚拟DOM与DIFF算法描述如下：它是Vue的核心。Vue之所以高效，就是虚拟的dom和diff算法，vue不通过修改dom树来达到修改的效果，而是直接在页面上改那个元素，此时这个元素就是一个虚拟的dom。那么vue怎样改呢？通过diff算法，计算出虚拟的dom修改后和修改前的区别，然后在虚拟dom的原基础上进行修改，这样效率就大大提升了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

*  开源，社区活跃度高。

# **四 入门实例** #

1 代码

<!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>入门实例</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    
    
    <body>
        <div id="app">
            <p>{
       { message }}</p>
        </div>
    
    
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            })
        </script>
    </body>
    
    
    </html>

2 效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# **五 集成场景** #

1 单页面、多页面引入Vue.js

2 复杂单页面应用Vue cli工具。

# **六 开发工作流** #

1 需求调研（确定需求）

2 交互设计、逻辑设计、接口设计

3 代码实现、测试运行、线上部署

# **七 参考资料** #

Webpack 入门教程：[http://www.runoob.com/w3cnote/webpack-tutorial.html][http_www.runoob.com_w3cnote_webpack-tutorial.html]

官方文档：[http://vuejs.org/v2/guide/syntax.html][http_vuejs.org_v2_guide_syntax.html]

中文文档: [https://cn.vuejs.org/v2/guide/syntax.html][https_cn.vuejs.org_v2_guide_syntax.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/918834fa716a413b9de2ff73ecb434a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/41d7bf031d3a4994b5b1a864af99497a.png
[http_www.runoob.com_w3cnote_webpack-tutorial.html]: http://www.runoob.com/w3cnote/webpack-tutorial.html
[http_vuejs.org_v2_guide_syntax.html]: http://vuejs.org/v2/guide/syntax.html
[https_cn.vuejs.org_v2_guide_syntax.html]: https://cn.vuejs.org/v2/guide/syntax.html