1、【Vue实例与组件的关系】：

一个实例就可以理解为一个组件，

一个组件同样也是一个实例，

其中的数据需要通过元素属性进行传输；

2、【全局组件与局部组件】：

全局组件： Vue.component('组件名',{})，

局部组件： var component={}，并通过Vue实例里面的components去注册该组件，如：components:{'组件名':component}；

3、【组件属性】：

props:  [属性]，对应元素里面的属性值，主要用来传递数据。

template： dom模板，

methods： 方法，

属性同Vue实例；

4、【父组件与子组件】

父组件： new Vue({})

子组件： 'todo-item'

*   父组件-->子组件通信：属性形式

*   父组件中通过属性向子组件传递值，子组件接受属性的内容并再子组件上进行内容显示

*   子组件可以绑定事件，实现子组件的删除必须删除父组件的相关数据，

* 

*   子组件和-->父组件通信：发布订阅模式

*   子组件被点击需要通知父组件把数据删除，

*   传递一个$emit，触发一个自定义事件，传递一个值，

*   父组件在模板里可以监听子组件向外传递的出发的delete事件，

*   如果父组件监听到子组件的事件，执行delete事件

* 

* 总结一下大概的逻辑过程：

* （1）：父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。

* （2）：子组件通过$emit向父组件抛出触发事件名称（delete）和触发事件的list索引值。

* （3）：父组件通过监听对应事件名称（@delete）触发函数handleDelete。函数通过子组件抛出的索引值对应删除list

v-title:可以简写成冒号（：）

v-onclick可以简写成@

在Vue里 ，每一个Vue组件，都是一个Vue实例  【实例=组件】；

Vue实例有的功能，Vue组件都拥有。

每个组件都是vue的实例；

每个实例的组成部分：

props、template、data、methods...

每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。

list.put添加list内容

v-if = “show“ show :true 表示创建当前的div ；false 表示删除div元素状态,控制dom的存在与否

v-show =‘show’  show：  true表示当前的div处于显示状态 ；false 表示隐藏状态display:none;控制dom的显示与否

v-for=“item of list”，v-for表示循环list，依次输出item ，：key可以提升遍历效率，但key 值不能相同；key值相同时，用index做区别

使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed:计算属性

watch: 侦听器监听属性变更，进行相应操作

tittle : 鼠标悬停时的提示语

属性绑定：v-bind:tittle="tittle"-->v-bind可省略--绑定data:{}中的tittle

双向数据绑定：v-model="data中的数据名"

v-bind:为属性绑定（v-bind:可以缩写为：）

v-model是双向数据绑定

 v-text 设置标签内容（v-text=“number”是指关联Vue实例中data的number变量的属性值），进行一次界面转义 

v-html：设置界面内容（v-html =‘content’显示content变量，按html内容进行解析）不会进行界面转义

模板上的标签绑定事件

v-on:click = “事件” 绑定一个click事件 ，垫底事件应定义在Vue实例中的methods：{ }属性中方法可以被执行

可以被简写为@click = "" ,注：v-on：click 与@ click相同

this.content 是指在Vue实例中的data属性下的content属性

el :dom中的ID名称，可称为挂载点

template：模板属性（模板的创建：一、可以在Vue实例中直接创建，二、可以直接放在挂载点中）

【计算属性】：页面中需要计算的数据function可以写在当前对象中，一个属性通过计算而来，当计算的几个属性没有变化时不会重新计算，会直接使用上一次的缓存值

computed：{

                              数据名 ： function(){

                                    return ...

                                }

//return  data中的数据发生改变才会触发该方法--返回一个新的结果

}

methods与computed的区别：

使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

【侦听器】：可将需要侦听检测的数据、方法写在当前对象中

             watch：{

            //data中的数据发生改变时，触发该方法

                     data中的数据名 ： function(){

                                方法体

                    }

}

tittle : 鼠标悬停时的提示语

【属性绑定】：v-bind  简写成：

【双向数据绑定】：v-model  eg: v-model="data中的数据名"

<!--属性绑定和双向数据绑定-->

<div id="root">

<!--属性绑定-->

<!- -v-bind:  简写成  ： -->

<div v-bind:title="title">heillo world</div>

<div :title="title">heillo world</div>

<!--双向数据绑定-->

<input v-model="content"/>

<div>{{content}}</div>

</div>

<script>

new Vue({

el:"#root",

data:{

title:"this is hello world",

content:"this is content"

}

})

</script>

【插值表达式】：{{msg}}

【数据占位符】：{{data}}，对应data属性的key；

【数据模板】：v-text和v-html，对应data属性的key，使用方法同数据占位符，其中：v-text会直接输出html语句，v-html不会将html语句输出；

【dom模板】：template属性能输出dom模板；

【绑定事件】：v-on:click="方法名"，简写为 @click="方法名"。事件对应methods属性中的 方法名： function(){}。在事件方法中可以用实例中data：{}中的数据，this.数据名。

【绑定dom属性】：v-bind:property='data'，简写为 :property='data' 如 :title='data'，data对应为data属性的key；

第二章总结：

1. 创建实例

2. 挂载点 模板 实例的关系

3. 事件绑定：@click="headleClick" ；

4. 绑定方法：数据里面的methods；

5. 表达方式：v-text和v-htm

6. 属性绑定：v-bind或者：表示 ；

7. 双向绑定：v-model

8. 计算属性：computed 返回（return）一个值；

9. 侦听器 watch

10. v-if/ v-show  相似 v-show更稳定，都是隐藏和展示指令；

11. v-for是循环展示指令