目錄
三、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">
（第二篇，總共六篇）)
