介绍

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

声明式渲染

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

代码：

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue!&#39;
  }
})

现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。打开你的浏览器的控制台 (就在这个页面打开)，并修改 app.message，你将看到上例相应地更新。

除了文本插值，我们还可以采用这样的方式绑定 DOM 元素属性：

代码：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: &#39;#app-2&#39;,
  data: {
    message: &#39;页面加载于 &#39;; + new Date().toLocaleString()
  }
})

你看到的 v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

条件与循环

代码：

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: &#39;#app-3&#39;,
  data: {
    seen: true
  }
})

Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/删除元素时自动应用过渡效果。

例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

代码：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: &#39;#app-4&#39;,
  data: {
    todos: [
      { text: &#39;学习 JavaScript&#39; },
      { text: &#39;学习 Vue&#39; },
      { text: &#39;整个牛项目&#39; }
    ]
  }
})

处理用户输入

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

代码：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: &#39;#app-5&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

代码：

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

var app6 = new Vue({
  el: &#39;#app-6&#39;,
  data: {
    message: &#39;Hello Vue!&#39;;
  }
})

组件化应用构建

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，在 Vue 中注册组件很简单：

代码：

<div id="app-7">
  <ol>



  </ol>
</div>

Vue.component(&#39;todo-item&#39;, {
  props: [&#39;todo&#39;],
  template: &#39;<li>{{ todo.text }}</li>&#39;;
})
var app7 = new Vue({
  el: &#39;#app-7&#39;,
  data: {
    groceryList: [
      { id: 0, text: &#39;蔬菜&#39; },
      { id: 1, text: &#39;奶酪&#39; },
      { id: 2, text: &#39;随便其他什么人吃的东西&#39; }
    ]
  }
})

这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。

与自定义元素的关系

你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，还是有几个关键差别：
1. Web 组件规范仍然处于草案阶段，并且尚无浏览器原生实现。相比之下，Vue 组件不需要任何补丁，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
2. Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流，自定义事件通信以及构建工具集成