作者 | 秋季长青

链接 | https://my.oschina.net/u/3563169/blog/1574763

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

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

本节完~

推荐图书

VUEJS我们大家都知道，它是一个用来开发Web 界面的前端库。

前几天，在微信群里，还有人在问我，有没有免费的VUEJS教程，最好是视频，其实， 我个人认为，好的教程，不局限于教程的形式，就好像我们学习的途径，不只是看文章，看视频，我们还可以看书，请教同行朋友等等。只要想学好，方式方法很多。但是不管怎么样，要想系统的学习一门技术与学习，读书那绝对是最好的方法。所以我今天重点为大家推荐了这本《Vue.js权威指南》

《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面的最佳选择。《Vue.js权威指南》一共30 章，由浅入深地讲解了Vue.js 基本语法及源码解析。主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。