Vue2.x核心技术与实战(二)
目录
三、Vue2.x：生命周期+工程化开发(组件入门)
3.1 生命周期
3.1.1 生命周期 & 生命周期四个阶段
3.1.2 生命周期钩子
Vue生命周期钩子案例 - 新闻列表 & 输入框自动聚焦
3.2 综合案例：小黑记账清单
3.3 工程化开发入门
3.3.1 工程化开发 & 脚手架Vue CLI
3.3.2 脚手架目录文件介绍 & 项目运行流程
3.3.3 组件化开发 & 根组件
App.vue文件(单文件组件)的三个组成部分
3.3.4 普通组件的注册使用
3.4 综合案例：小兔鲜首页
三、Vue2.x：生命周期+工程化开发(组件入门)
3.1 生命周期
3.1.1 生命周期 & 生命周期四个阶段
思考：什么时候可以发送初始化渲染请求? ( 越早越好)什么 时候可以开始操作dom? (至少dom得渲染出来)
Vue生命周期：一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段：①创建 ②挂载 ③更新 ④销毁
3.1.2 生命周期钩子
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】 → 让开发者可以在【特定阶段】运行自己的代码。
Vue生命周期钩子案例 - 新闻列表 & 输入框自动聚焦
created数据准备好了，可以开始发送初始化渲染请求。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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>
</head><body><div id="app"><ul><li v-for="(item,index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{item.title}}</div><div class="info"><span>{{item.source }}</span><span>{{item.time}}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="./vue.js"></script><script src="./axios.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created() {// 1.发送请求，获取数据const res = await axios.get("http://hmajax.itheima.net/api/news")// console.log(res);// 2. 将数据更新给 data 中的 listthis.list = res.data.data},})</script>
</body></html>要求：一进入页面自动获取焦点
mounted模板渲染完成，可以开始操作DOM了。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例-获取焦点</title><!-- 初始化样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"><!-- 核心样式 --><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 .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>
</head><body><div class="container" id="app"><div class="search-container"><div class="search-box">