Vue生命周期

二、Vue生命周期

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>
    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>