0.1 what's this
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
一 模板语法
vue采用声明式渲染，用简洁的模板语法将数据渲染进DOM系统
1.1 插值：
1.1.1 文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
<p>{{ message }}</p>
1.1.2 Html
使用 v-html 指令用于输出 html 代码
1.1.3 属性
HTML 属性中的值使用 v-bind 指令
<div v-bind:class="{'class1': use}" />
1.1.4 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持
<div v-bind:id="'list-' + id" />
1.1.5 指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<p v-if="seen">现在你看到我了</p>
1.1.5.1 参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<pre><a v-bind:href="url">lalala</a></pre>
1.1.5.2 修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
1.2 用户输入
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
1.3 过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
1.4 缩写
1.4.1 v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
1.4.2 v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
二、条件/循环语句
2.1 条件判断
2.1.1 v-if
条件判断使用 v-if 指令, v-if 指令将根据表达式 的值(true 或 false )来决定是否插入元素。
2.1.2 v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块
2.1.3 v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
2.1.4 v-show
也可以使用 v-show 指令来根据条件展示元素，用法基本与v-if相同
2.2 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表
<li v-for="site in sites"> {{ site.name }}</li>
也可以通过一个对象的属性来迭代数据
<li v-for="value in object"> {{ value }}</li>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
v-for 也可以循环整数
<li v-for="n in 10"> {{ n }}</li>
三、父子组件传值
3.1 父组件给子组件传值：
父组件在调用子组件的时候，绑定动态属性
<v-children :title='title' :run='run' :home="this" />
在子组件里面通过props接收父组件传过来的数据,常规接收方式：
props:['title','run','home']
校验props合法性：
props:{
'title':String
}
网友评论