1. MVVM模式

    model view view-model：数据视图模型 模型视图数据

    model: 数据模型，PHP／JAVA等任何后台服务语言从数据库中获取的数据

    view: 视图模型；html页面

    view-model: 视图数据桥梁，mvvm框架自动完成页面的渲染和数据提交（js dom操作）

        

    MVVM代表框架有：Angular、Vue.js等。

2. Vue.js 简介

    官网介绍：Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

    对于渐进式框架有两种使用方法：页面引用和Node.js 模块开发。

    作为入门，我们使用页面引用方法，学习vue.js的语法。模块开发后面再说。

3. 安装Vue.js

    方法一：官网下载 vue.js 文件。

    方法二：npm install vue

4. 开发工具推荐

    Sublime Text 3 或者 Visual Studio Code。

    我使用的是 Visual Studio Code（VSCode）。如果你也是使用该开发工具的话，这里给出几个好用的小插件：

    ☛ path intellisense 路径提示插件

    ☛ live server 热加载

    ☛ vue 2 Snippets  Vue的代码提示工具

5. 在浏览器中加载调试组件

    火狐安装：在火狐的官方插件库进行查询安装；

    Chrome浏览器：通过三方网站获取下载地址，手动安装插件

        三方下载地址：crx.2333.me

        vue devtools.crx 的ID：nhdogjmejiglipccpnnnanhbledajbpd

6. hello world

    每一次学习新的语言、新的框架，都必将经历 Hello World 程序。

    直接上代码：

    
        
        
                    
    
        
             {
   { hello }}    
    

                        

    好，hello word 出来了。你以为我这样就会结束了吗？当然不是。

    接下来在 上段代码倒数第四行 {

{ hello }} 下一行加一行代码：

    来看看结果如何：

                        

    惊不惊喜，哈哈。简单的几行代码就实现了。

7、生命周期视图

    Vue.js 官网的原话是这样的：下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

    那我就先把图放在这，慢慢看。

 每篇一结尾：

    一程序员去面试，面试官问：“你毕业才两年，这三年工作经验是怎么来的？！”程序员答：“加班。”