vue的声明式渲染

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。让我们编辑经典的Hello代码，来尝试第一次使用Vue。

你会在页面上看到Hello Vue！文本。具体的实现原理回在后面的文章详细介绍。

我们还可以采用v-bind的方式绑定 DOM 元素属性(省略了和上一步相同的代码)：

这里的v-bind属性被称为指令。指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。v-bind将title属性和data中的message绑定在一起，每次刷新页面都会动态的改变title属性的值。

条件与循环

有其他相关语言的编程经验的人来说，在页面中使用模板语言来做条件与循环再熟悉不过了，比如java的JSP、FreeMarker。PHP的Smarty，前端模板swig、Jade等等。感觉Vue中很类似。（个人观点）

Vue中的if条件：

Vue中的v-for循环:

处理用户输入

v-on 指令绑定一个监听事件用于调用我们 Vue实例中定义的方法：

这段代码实现了每点击一次按钮index都累加1。

Vue 也提供了 v-model指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

手动改变input的值会是P标签的值也随之改变。

第一行的代码其实只是第二行的语法糖。这样理解model可能更能接受一些。

用组件构建（应用）

组件系统是 Vue 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树。

举个栗子：

我们在后面再详细介绍它。