目录
1、组件生命周期
1.1 生命周期 & 生命周期函数
1.2组件生命周期函数的分类
1.3生命周期图示
1.4生命周期函数特点
1.4.1了解beforeCreate和created生命周期函数的特点
1.4.2了解beforeMount和mounted生命周期函数
1.4.3生命周期 - 组件运行阶段的生命周期函数
1.4.4生命周期 - 组件销毁阶段的生命周期函数
2、组件之间的数据共享
2.1. 组件之间的关系
2.2. 父子组件之间的数据共享
2.2.1 父组件向子组件共享数据
2.2.2 子组件向父组件共享数据
2.3. 兄弟组件之间的数据共享
3、ref引用
3.1 什么是 ref 引用
3.2 使用 ref 引用 DOM 元素
3.3使用 ref 引用组件实例
3.4控制文本框和按钮的按需切换
3.4.1代码实现
3.4.2让文本框自动获得焦点
3.4.3this.$nextTick(cb) 方法
4、购物车案例
1、组件生命周期
1.1 生命周期 & 生命周期函数
- 生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
- 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
1.2组件生命周期函数的分类
1.3生命周期图示 可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程： https://cn.vuejs.org/v2/guide/instance.html# 生命周期图示：
1.4生命周期函数特点
Test.vue 组件 --- {{ books.length }} 本图书
message 的值是：{{ message }}
1.4.1了解beforeCreate和created生命周期函数的特点
Test.vue 组件 --- {{ books.length }} 本图书
message 的值是：{{ message }}
1.4.2了解beforeMount和mounted生命周期函数
1.4.3生命周期 - 组件运行阶段的生命周期函数
1.4.4生命周期 - 组件销毁阶段的生命周期函数
2、组件之间的数据共享
App.vue:
App 根组件--{{countFromSon}}
{{userinfo}}
Left.vue:
Left 组件
msg的值是:{{msg}}
userinfo的值是:{{user}}
Right.vue:
Right 组件--{{count}}
{{msgFromLeft}}
eventBus.js:
import Vue from 'vue'
// 创建一个Vue实例，并把它向外导出
export default new Vue()
2.1. 组件之间的关系
App.vue:
App 根组件--{{countFromSon}}
{{userinfo}}
Left.vue:
Left 组件
msg的值是:{{msg}}
userinfo的值是:{{user}}
Right.vue:
Right 组件--{{count}}
{{msgFromLeft}}
eventBus.js:
import Vue from 'vue' // 创建一个Vue实例，并把它向外导出 export default new Vue()
2.2. 父子组件之间的数据共享
2.2.1 父组件向子组件共享数据
父组件向子组件共享数据需要使用自定义属性。示例代码如下：
2.2.2 子组件向父组件共享数据 子组件向父组件共享数据使用 自定义事件 。示例代码如下：
2.3. 兄弟组件之间的数据共享
3、ref引用
App.vue:
App 根组件
Left.vue:
Left 组件---{{count}}
3.1 什么是 ref 引用
- jquery简化了程序员操作DOM的过程
- vue优势:MWM 在vue中，程序员不需要操作 DOM。程序员只需要把数据维护好即可! (数据驱动视图)
- 结论:在vue项目,强烈不建议大家安装和使用jQuery! !
- 假设:在vue中，需要操作 DOM了,需要拿到页面上某个 DOM元素的引用，此时怎么办?
App.vue:
App 根组件
Left.vue:
Left 组件---{{count}}
- jquery简化了程序员操作DOM的过程
- vue优势:MWM 在vue中，程序员不需要操作 DOM。程序员只需要把数据维护好即可! (数据驱动视图)
- 结论:在vue项目,强烈不建议大家安装和使用jQuery! !
- 假设:在vue中，需要操作 DOM了,需要拿到页面上某个 DOM元素的引用，此时怎么办?
3.2 使用 ref 引用 DOM 元素
通过refs获取页面元素的DOM：
3.3使用 ref 引用组件实例
通过refs获取页面元素的DOM：
3.4控制文本框和按钮的按需切换
3.4.1代码实现
3.4.2让文本框自动获得焦点
以上代码在执行的时候会出现一个问题：
为什么this.$emit.iptRef是undefined？
因为：this.inputVisiable=true执行完之后，数据变成了最新，但是页面还没来得及渲染，页面中还没有文本框。
解决办法：this.$nextTick(cb) 方法
3.4.3this.$nextTick(cb) 方法
以上代码在执行的时候会出现一个问题：
为什么this.$emit.iptRef是undefined？
因为：this.inputVisiable=true执行完之后，数据变成了最新，但是页面还没来得及渲染，页面中还没有文本框。
解决办法：this.$nextTick(cb) 方法
4、购物车案例
待更新
5、总结
