day03
一、今日目标
1.生命周期
- 生命周期介绍
- 生命周期的四个阶段
- 生命周期钩子
- 声明周期案例
2.综合案例-小黑记账清单
- 列表渲染
- 添加/删除
- 饼图渲染
3.工程化开发入门
- 工程化开发和脚手架
- 项目运行流程
- 组件化
- 组件注册
4.综合案例-小兔仙首页
- 拆分模块-局部注册
- 结构样式完善
- 拆分组件 – 全局注册
二、Vue生命周期
思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）
Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段：创建响应式数据
2.挂载阶段：渲染模板
3.更新阶段：修改数据，更新视图
4.销毁阶段：销毁Vue实例
三、Vue生命周期钩子
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
<div id="app"> <h3>{{ title }}</h3> <div> <button @click="count--">-</button> <span>{{ count }}</span> <button @click="count++">+</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { count: 100, title: '计数器' }, // 1. 创建阶段（准备数据） // 2. 挂载阶段（渲染模板） // 3. 更新阶段(修改数据 → 更新视图) // 4. 卸载阶段 }) </script>
四、生命周期钩子小案例
1.在created中发送数据
<style> * { margin: 0; padding: 0; list-style: none; } .news { display: flex; height: 120px; width: 600px; margin: 0 auto; padding: 20px 0; cursor: pointer; } .news .left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-right: 10px; } .news .left .title { font-size: 20px; } .news .left .info { color: #999999; } .news .left .info span { margin-right: 20px; } .news .right { width: 160px; height: 120px; } .news .right img { width: 100%; height: 100%; object-fit: cover; } </style> <div id="app"> <ul> <li class="news"> <div class="left"> <div class="title">5G商用在即，三大运营商营收持续下降</div> <div class="info"> <span>新京报经济新闻</span> <span>2222-10-28 11:50:28</span> </div> </div> <div class="right"> <img src="http://ajax-api.itheima.net/public/images/0.webp" alt=""> </div> </li> <li class="news"> <div class="left"> <div class="title">5G商用在即，三大运营商营收持续下降</div> <div class="info"> <span>新京报经济新闻</span> <span>2222-10-28 11:50:28</span> </div> </div> <div class="right"> <img src="http://ajax-api.itheima.net/public/images/0.webp" alt=""> </div> </li> <li class="news"> <div class="left"> <div class="title">5G商用在即，三大运营商营收持续下降</div> <div class="info"> <span>新京报经济新闻</span> <span>2222-10-28 11:50:28</span> </div> </div> <div class="right"> <img src="http://ajax-api.itheima.net/public/images/0.webp" alt=""> </div> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // 接口地址：http://hmajax.itheima.net/api/news // 请求方式：get const app = new Vue({ el: '#app', data: { list: [] } }) </script>
2.在mounted中获取焦点
<style> html, body { height: 100%; } .search-container { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .search-container .search-box { display: flex; } .search-container img { margin-bottom: 30px; } .search-container .search-box input { width: 512px; height: 16px; padding: 12px 16px; font-size: 16px; margin: 0; vertical-align: top; outline: 0; box-shadow: none; border-radius: 10px 0 0 10px; border: 2px solid #c4c7ce; background: #fff; color: #222; overflow: hidden; box-sizing: content-box; -webkit-tap-highlight-color: transparent; } .search-container .search-box button { cursor: pointer; width: 112px; height: 44px; line-height: 41px; line-height: 42px; background-color: #ad2a27; border-radius: 0 10px 10px 0; font-size: 17px; box-shadow: none; font-weight: 400; border: 0; outline: 0; letter-spacing: normal; color: white; } body { background: no-repeat center /cover; background-color: #edf0f5; } </style> <div class="container" id="app"> <div class="search-container"> <img src="https://www.itheima.com/images/logo.png" alt=""> <div class="search-box"> <input type="text" v-model="words" id="inp"> <button>搜索一下</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { words: '' } }) </script>
