Vue的学习笔记一：Vue简介

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

Vue 由Google的前员工Evan You（尤雨溪） 创建。

首次亮相于2014年2月，并在第一天就大获成功。

Vue 是目前最流行的三大前端框架之一。另外两个分别是 React，Angular。

---

Vue整体上遵循MVVM(Model-View-ViewModel，模型一视图－视图模型）架构。

也就是说View（用户界面或视图）和Model（模型）是独立的，ViewModel( Vue ）是View和lModel交互的桥梁。

通过 Vue ，我们无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦创建了绑定，DOM 将和数据保持同步，每当变更了数据，DOM 也会相应地更新。这就叫双向绑定。

当然了，在使用 Vue 时，也可以结合其他库一起使用，比如 jQuery。

Vue 对 View 和 Model 之间的更新操作做了自动化处理，并且已经为开发者进行了优化。因此，当View的某个部分需要更新时，开发者并不需要特别指定，Vue会选择恰当的方法和时机进行更新。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。 当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；

从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

---

如今，很多公司都在使用 Vue，如 百度，腾讯，阿里巴巴，google，小米，任天堂等。且在国内也非常流行，很多公司都要求前端开发要能掌握Vue框架的开发。

• 中文官网： https://cn.vuejs.org/

• GIT地址：https://github.com/vuejs/vue

目前最新的稳定版本是 2.6.10。（截至写本文的时候，2019-9）

入门小例子：

首先，在页面中引入  vue.js。

html：

<div  id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!'
    }
})

打开浏览器控制台并修改 app.message的值，然后按回车键：

app.message='Awesome!’

可以看到页面中的内容也发生了改变。这背后的技术称为数据绑定。

• div#app，就是 View，“视图”，内容展示的地方。

• let app = new Vue() ，创建了一个 Vue 对象，其实就是创建了一个 ViewModel

• Vue() 对象的参数就是 Model。

  el: '#app',
    data: {
        message: 'Hello, world!'
    }

跟着我一起学Vue吧。系列博文不定期更新。