深入探讨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类：

var Profile = Vue.extend({ template: "<div> Lily </div>"});

 2 注册一个 tagname：

Vue.component("me-profile", Profile);

 这样我们就可以通过 tagname 来使用这么组件了：

 <div id="todo"> <my-profile></my-profile> <form v-on:submit="add" v-on:submit.prevent> <input type="text" v-model="input"/> <input type="submit" value='add' /> </form> ...</div>

 Vue.component("me-profile", Profile); 属于全局注册，如果只是在某一个页面内使用，可以通过局部注册的方式：