Vue

Vue.js（读音 /vju?/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。（此处摘自vue官网）
Vue和其他框架对比

Hello world

开始学习Vue前，还是和其他编程语言一样，我们先来看一个简单的Hello World Demo。
新建一个html文件，在头部加入对vue的引用

1

<script src="https://unpkg.com/vue"></script>

或者自己去下载vue.js文件然后在头部引用

1
2
3
4
5
6
7
8
9
10
11
12
13

html代码 
<div id="app">
  {{ message }}
</div>
``` 
js代码 
``` bash
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

结果展示：

双向绑定

在原生javascript开发或者用一些没有双向绑定的JavaScript库进行开发时，想要更新页面中元素值，我们需要先获取该元素的DOM，在每次元素值发生改变时，需要我们手动的去更新DOM，在DOM树庞大或数据量较大的时候这很大影响了页面的效率和性能问题。而Vue为我们在背后做了大量工作，让数据和DOM绑定起来，只要改变一方另一方将跟着改变，所有元素都是响应式的，你只需关注数据模型的改变，而无需考虑DOM的变化。参考上面的helloworld在浏览器的控制台中修改message的值，看看页面DOM元素的显示是否改变。

组件化应用构建

组件系统是现在很时髦的一个概念，它把任意一个应用页面都抽象为一个组件树（下图）。页面的各个模块和功能都可以划分一个组件，这些组件可以在不同页面之前进行复用。不知道有没有知道华为的UEE框架，它也是强调的组件开发，它的组件叫gadget,和这儿Vue的组件大致相同。你可以把每个组件理解为具有业务意义的代码块，这块代码块包含html标签，css和js，它把这三个整合为一个向外公开，这就是组件。而页面我们可以看成是这些组件的容器，我们只要把页面想要功能的组件组装进来，而无需考虑每个组件的具体实现。对于组件的注册和使用我们在后续学习中继续深入。