条件渲染：
1.v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。
你可以使用 v-else 指令来表示 v-if 的“else 块”
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
2.v-show 指令：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
3.v-if和v-show的区别：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
Title
你可以看见我了
你看到else了
A
B
C
Not A/B/C
Hello!
列表渲染：
1.我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 还支持一个可选的第二个参数，即当前项的索引。v-for="(item, index) in items。
2.也可以用 v-for 来遍历一个对象的属性。你也可以提供第二个的参数为 property 名称 (也就是键名)。
3.Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
4.由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)
5.Vue 不能检测对象属性的添加或删除，对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
6.v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
7.任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop。
Title
-
{{ index }}-{{ item.message }}
-
{{ name }}: {{ value }}
{{ n }}
事件处理：
1.可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
2.然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
Title
The button above has been clicked {{ counter }} times.
class与style绑定：
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
圣诞快乐
也可以使用v-bind:style绑定内联样式：
data: {
activeColor: 'red',
fontSize: 30
}
或者使用v-bind:style直接绑定到一个样式对象
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
表单输入绑定：
你可以用 v-model 指令在表单 、
Textarea message is {{textareaMessage}}
Checked names: {{ checkedNames }}
Picked: {{ picked }}
Selected: {{ selected }}
Selected: {{ selectedList }}
Picked: {{ pick }}
Input message is {{lazyMessage}}
Input age is {{age}}
Input message is {{trimMessage}}