一、什么是 Vue

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

• 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

• Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

• 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

• Vue 官网：https://cn.vuejs.org

二、声明式渲染

Vue 官方教程：https://v2.cn.vuejs.org/v2/guide

引入 Vue

Hello Vue

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

简单函数示例

{{ 1+1 }}
{{ message=='lulublog' ? 'YES' : 'NO'}}
{{ message.split(" ").reverse().join(" ")}}

除了文本插值，我们还可以像这样来绑定元素 attribute：

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

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。