DAY3:
1.生命周期
1.生命周期 &生命周期四个阶段
1.思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来)
2.Vue生命周期:一个Vue实例从 创建 到销毁 的整个过程
3.生命周期四个阶段:1.创建 2.挂载 3.更新 4.销毁
4.创 建（new Vue()） ——> 销毁 经历下面4个阶段
1.创建阶段 响应式数据... 创建阶段结束就可以 发送初始化渲染请求
2.挂载阶段 渲染模板 挂载阶段结束就可以 操作 dom
3.更新阶段 数据修改，更新视图
4.销毁阶段 销毁实例
2.Vue 生命周期函数(钩子函数)
1.Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→让开发者可以在【特定阶段】运行自己的代码。
2.一共8个代码，分别对应上面的4个阶段，每个阶段两个代码
1.beforeCreate ——> created 就是上面所说的此时可以发送初始化渲染请求
2.beforeMount ——> mounted 就是上面所说的此时可以操作 dom
3.beforeUpdate ——> pdated
4.beforedestroyed ——> destroyed
3.生命周期案例
第37集
总结:四个阶段，八个钩子 → 三个常用 created，mounted，beforeDestroy（目前掌握前两者）
2.综合案例:小黑记账清单
列表渲染(请求)/添加/删除/饼图渲染
第38和39集
3.工程化开发入门：demo\03-vue
1.工程化开发和脚手架
1.全局安装(一次):yarn global add @vue/cli 或 npmi @vue/cli -g
2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name(项目名-不能用中文)
4.启动项目:yarn serve 或 npm run serve(找package.json)
2.项目运行流程
1.目录文件重点介绍
1.index.html index.html模板文件
2.App.vue App根组件 → 项目运行看到的内容就在这里编写
3.main.is 入口文件 → 打包或运行，第一个执行的文件
3.组件化开发&根组件
1.组件化:一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为
1.好处:便于维护，利于复用 →提升开发效率
2.组件分类:普通组件、根组件
2.根组件:整个应用最上层的组件，包裹所有普通小组件。
App根组件：1.头部组件
2.导航组件
3.主体组件：商品组件1、商品组件2...
4.底部组件
3.App.vue 文件(单文件组件)的三个组成部分
1.template:结构(有且只能一个根元素)
2.script:js逻辑
3.style:样式(可支持less，需要装包)
1.让组件支持 less
1.style标签，lang="less"开启less功能
2.装包:yarn add less less-loader
4.总结
1.组件化:
页面可拆分成一个个组件，每个组件有着独立的结构、样式、行为
1.好处:便于维护，利于复用 → 提升开发效率
2.组件分类:普通组件、根组件。
2.根组件:
整个应用最上层的组件，包裹所有普通小组件。
一个根组件App.vue，包含的三个部分:
1.template 结构(只能有一个根节点)
2.style 样式(可以支持less，需要装包 less 和 less-loader)
3.script 行为
4.组件注册
1.局部注册:只能在注册的组件内使用
1.创建 .vue 文件(三个组成部分)
2.在使用的组件内导入并注册
//先在components文件夹下 创建 .vue 文件
//导入需要注册的组件
import 组件对象 from'.vue文件路径' 如下：
import HmHeader from"./components/HmHeader
export default {
// 局部注册
components:{
'组件名':组件对象，
HmHeader: HmHeader
//HmHeader //简写一个HmHeader也行
}
}
2.全局注册:所有组件内都能使用
1.使用:当成 html标签使用<组件名></组件名>
2.注意:组件名规范 → 大驼峰命名法，如:HmHeader
//先在components文件夹下 创建 .vue 文件
// 在 main.js 中导入需要全局注册的组件
import HmButton from'./components/HmButton'
//调用 Vue.component 进行全局注册
//Vue.component('组件名'，组件对象)
Vue.component('HmButton',HmButton)
3.总结
普通组件的注册使用:
1.两种注册方式:
1.局部注册:
(1)创建.vue组件(单文件组件)
(2)使用的组件内导入，并局部注册components:{组件名:组件对象}
2.全局注册:
(1)创建.vue组件(单文件组件)
(2)main.js内导入，并全局注册 Vue.component(组件名,组件对象)
2.使用:<组件名></组件名>
3.技巧:一般都用局部注册，如果发现确实是通用组件，再抽离到全局。
4.综合案例:小兔鲜首页
拆分模块-局部注册/结构样式完善/拆分组件-全局注册
页面开发思路:
1.分析页面，按模块拆分组件，搭架子(局部或全局注册)
2.根据设计图，编写组件 html结构 css 样式(已准备好)
3.拆分封装通用小组件(局部或全局注册)
将来 →通过 js 动态渲染，实现功能
第45和46集
