Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

最重要的是Vue是MVVM框架！！！

它是渐进式框架，它是初创公司的首选框架，它是轻量级的，有很多根据Vue拓展的独立的功能或库。

https://github.com/vuejs Github网站

https://vuejs.org/ vue网站

首先引入一个关于数据驱动的问题

原生的JavaScript代码

 1     
0
 2     按我加一
 3         

此时可以看到浏览器中加载并渲染成功

 若是再来一个

 1     
0
 2     按我加一
 3     按我减一
 4     

可以看到当按下“按我减一”的时候视图并没有渲染，打开network面板可以看到数据已经实现减一操作

 这是因为我们没有加入h1.innerHTML=num这行代码，所以页面没有更新渲染，如果内容多了，势必会造成代码冗余

接下来看vue的数据驱动视图

首先引用vue的源码

采用生产环境的代码

 1  

 2         

 3             
 4             {{a}}
 5         
 6         按我加一
 7         按我减一
 8     
 9   
10   

此时可以看到页面正常加载，不需要在添加渲染视图部分，因为vue 的核心库只关注视图层，会自动渲染我们看到的视图

我们看一下vue的基本使用

 1  

 2         {{a}}
 3     
 4     

 5         {{a}}
 6     
 7 
 8     
 9     

此时我们看到页面为

 是因为所有的Vue的方法和属性都必须在对应的挂载根标签内部使用，即使有{{a}}，也不是渲染a的属性值。

 1   

 2         {{a}}
 3         {{b}}
 4     
 5     
 6     

当然了，在这里我们自定义的也是不可以的。

我们需要注意，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥。

 此时页面会报错

 我们在上面的代码中可以看到有个{{a}}，这是vue的插值语法，通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式。moustache（胡子）是双大括号学名，也叫（胡子语法）。

“{{}}”内部可以放简单简单的表达式。比如三元运算符。

 1  

 2         {{a >= 100 ? 20 : 10}}
 3     
 4     
 5     

这里我们可以看到结果为

 但是不可以使用if等之类的复杂判断。

1  

2         {{
3             if(a>100){
4                 a=100
5             }else{
6                 a=20
7             }
8         }}
9     

此时我们可以看到页面并无加载，也没有报错，无法识别而没有做出任何输出