vue基础内容总结（二）

vue.js是什么？

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

声明式渲染

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

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

除了文本插值，我们还可以像这样来绑定元素特性，并且看到的效果如图的右侧所示：

 

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

    这个时候如果再次打开浏览器的 JavaScript 控制台，输入 vm.message = '新消息', 就会看到这个绑定了 tittle 特性的 HTML 已经进行了更新，如图所示：

条件与循环

以下实例实现了，控制切换一个元素是否显示：

  这个例子演示了我们不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。此外，Vue也提供了一个强大的过渡效果系统，可以在Vue插入/更新/移除元素时自动应用过渡效果。

还有其他很多指令，每个都有特殊的功能。 例如 ：v-for 指令可以绑定数组的数据来渲染一个项目列表：

在控制台，通过vm.todos.push({text:'新项目'})，发现在最后添加列表。

处理用户输入

为了让用户和你的应用进行交互，我们可以使用 v-on 指令添加一个事件监听器，通过它调用在vue实例中定义的方法：

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM--所有的DOM操作都由 Vue 来处理，编写的代码只需要关注逻辑层面即可。

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