看一看Vue.js

什么是 Vue.js？

　　Vue.js 是用于构建交互式的 Web 界面的库。

　　Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

什么是 MVVM？

 

　　MVVM是Model-View-ViewModel的简写。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

MVVM优点

　　MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

　　　　1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，

　　　　　当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

　　　　2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

　　　　3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设

　　　　　计，使用Expression Blend可以很容易设计界面并生成xml代码。

　　　　4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

 

 

Vue.js 是什么

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

 

引入Vue：

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

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统：

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

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

Hello Vue!

　　我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。那我们如何来验证元素的响应呢？我们可以打开控制台，并修改app.message的值，我们可以看到页面相应的作出了更新！

　　当我将app.message的值改为"Hello World!"的时候，页面的内容也相应的修改为"Hello World!"。

　　或者我们也可以这样：

　　

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

　　当我们修改输入框的值时，紧跟着p标签的文本也会随之改变！

　　这一切都是Vue.js在帮我们做操作，它将本来毫无关系的DOM和JavaScript对象关联起来，做到同步！