Vue 学习笔记(一)

---

1、Vue.js介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
所谓渐进式（Progressive）,就是你可以一步一步、有阶段性的来使用Vue.js,不必一开始就使用所有的东西。

1.1 Vue特点

1. 轻量级的框架(压缩后大小仅有17KB)
2. 双向数据绑定 (MVVM模式)
3. 指令
4. 插件化
5. 虚拟DOM(Virtual DOM)

1.2 MVVM模式简介

MVVM模式是由经典软件架构MVC衍生来的。 MVVM框架主要包含3个部分:Model、View和 Viewmodel。
Model:指的是数据部分，对应到前端相当于javascript对象
View:指的是视图部分，对应前端相当于dom
Viewmodel:就是连接视图与数据的中间件通讯 数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewMOdel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。

1.3 Vue.js有什么不同

传统前端开发模式，是针对DOM进行操作,以jQuery为例，给指定DOM中插入一个元素，并给他绑定一个点击事件：

if(showBtn){
    var btn = $('Click me');
    btn.on('click',function(){
        console.log('Clicked!');
    });
    $('#app').append(btn);
}

这段代码不难理解，操作内容也不复杂，不过这样让我们的视图代码和业务逻辑紧耦合在一起，随着功能不断增加，直接操作DOM会使得代码越来越难以维护。
而Vue.js通过MVVM的模式拆分视图与数据两部分，并将其分离。因此，你只需要关心你的数据即可，DOM的事情Vue会帮你自动搞定，比如上面的实例我们可以改为：

    

        Click me
    

2、如何使用Vue.js

Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

2.1 通过 script 加载 CDN文件

2.2 直接用