深入探讨深入探讨Vue.js组件和组件通信组件和组件通信
主要和大家一起深入探讨Vue.js组件和组件通信的相关资料，感兴趣的小伙伴们可以参考一下
基本是按照官网的 Guide 全部梳理了一遍：http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的
只是都串起来，这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist
Vue 实例实例
一个 Vue 应用是由一个 root vue instance 引导启动的，而 Vue instance 是这么创建的：
var vm = new Vue({
// options
})
一个 instance 实际上就是 MVVM 中的一个 VM。 传入的配置对象中data里的所有属性都会被挂载到 instance上，而为了避免
命名冲突，Vue 内置方法都会以 $ 开头的属性挂载到 instance 上。
instance 从创建到销毁会经历如下生命周期：
在初始化的时候大致经过三步:
•绑定数据监听，即对 data 的监听
•编译模板
•插入document或者替换对应dom
# Vue 基本语法
数据绑定数据绑定
Vue 使用的是一种 类 mastache 语法。常用绑定语法分这么几类：
•mastache 语法，比如 {{ data }} {{ data | filter}}
•v-bind 绑定属性，比如 v-bind: href, v-bind:class
•v-on 绑定事件, 比如 v-on:click, v-on:submit
其中 v-* 都是 directive
例子：
<div v-bind:class="[classA, isB ? classB : '']">
属性计算属性计算
Vue 支持一个很有意思的属性计算语法，可以指定一个属性由其他属性计算出来，这样就不用通过 $watch 来实现了：
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// a computed getter
b: function () {
// `this` points to the vm instance
return this.a + 1
}
}
})
## 流程控制和列表相关的语法 包括 `v-if`, `v-show`, `v-else`, `v-for`
表单表单
双向数据绑定：
<input type="text" v-model="message" placeholder="edit me">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
## 动画 动画的实现方式和 Angular 以及 React 都是一样的，都是通过添加和删除 class 来实现的。 # Component
组件的基本用法组件的基本用法
Component 的定义包括两部分：
1 创建component类：
资源评论
