vue2 生命周期,工程化开发入门

一、今日目标

1.生命周期

  1. 生命周期介绍
  2. 生命周期的四个阶段
  3. 生命周期钩子
  4. 声明周期案例

2.工程化开发入门

  1. 工程化开发和脚手架
  2. 项目运行流程
  3. 组件化
  4. 组件注册

二、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DACIFzt7-1693057054325)(assets/1682065937815.png)]

三、Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDd6J4Lc-1693057054327)(assets/1682066040295.png)]

<!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>
</head>
<body>

  <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. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>
</html>

四、生命周期钩子小案例

1.在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="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: []
      },
      async created () {
        // 1. 发送请求获取数据
        const res = await axios.get('http://hmajax.itheima.net/api/news')
        // 2. 更新到 list 中，用于页面渲染 v-for
        this.list = res.data.data
      }
    })
  </script>
</body>
</html>

2.在mounted中获取焦点


<!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 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>
</head>

<body>
<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: ''
    },
    // 核心思路：
    // 1. 等input框渲染出来 mounted 钩子
    // 2. 让input框获取焦点 inp.focus()
    mounted () {
      document.querySelector('#inp').focus()
    }
  })
</script>

</body>

</html>

五、工程化开发和脚手架

1.开发Vue的两种方式

  • 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue
  • 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTuvPyF3-1693057054329)(assets/1682090039070.png)]

  • 工程化开发模式优点：

    • 提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

  • 工程化开发模式问题：

    • webpack配置不简单
    • 雷同的基础配置
    • 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

  • Vue CLI 是Vue官方提供的一个全局命令工具

  • 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

  1. 开箱即用，零配置
  2. 内置babel等工具
  3. 标准化的webpack配置

使用步骤：

  1. 全局安装（只需安装一次即可）

     yarn global add @vue/cli 或者 npm i @vue/cli -g

  2. 查看vue/cli版本

    vue --version

  3. 创建项目架子

    vue create project-name #(项目名不能使用中文)

  4. 启动项目

    yarn serve 或者 npm run serve (命令不固定，找package.json)

六、项目目录介绍和运行流程

1.项目目录介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtCQK5se-1693057054330)(assets/1682092148521.png)]

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

1. main.js 入口文件
2.App.vue App根组件
3. index.html 模板文件

2.运行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jHbLh6fy-1693057054331)(assets/1682094032876.png)]

七、组件化开发

  • 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为

  • 好处：便于维护，利于复用 → 提升开发效率

  • 组件分类：普通组件、根组件

​ 比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvJHfnHX-1693057054331)(assets/1682168852372.png)]

八、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXGMolcu-1693057054332)(assets/1682169131688.png)]

2.组件是由三部分构成

  • 语法高亮插件

    在这里插入图片描述

  • 三部分构成

    • template：结构 （有且只能一个根元素）
    • script: js逻辑
    • style： 样式 (可支持less，需要装包)

  • 让组件支持less

    （1） style标签，lang=“less” 开启less功能

    （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

九、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

  1. 创建.vue文件（三个组成部分）
  2. 在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imoz189E-1693057054334)(assets/1682227966812.png)]

// 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
   // '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader // 也可以简写
  }
}

十、普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

  1. 创建.vue组件（三个组成部分）
  2. main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/90836.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Hightopo 使用心得（6）- 3D场景环境配置（天空球，雾化，辉光，景深）

Hightopo 使用心得（6）- 3D场景环境配置（天空球，雾化，辉光，景深）

在前一篇文章《Hightopo 使用心得&#xff08;5&#xff09;- 动画的实现》中&#xff0c;我们将一个直升机模型放到了3D场景中。同时&#xff0c;还利用动画实现了让该直升机围绕山体巡逻。在这篇文章中&#xff0c;我们将对上一篇的场景进行一些环境上的丰富与美化。让场景更…
阅读更多...
docker搭建opengrok环境2

docker搭建opengrok环境2

引言&#xff1a; 虚拟机关闭后重新开启&#xff0c;理论上是需要重新启动一下docker的&#xff0c;以重新启动其中的服务。 命令基础&#xff1a; docker images&#xff1a;查看docker中现有的镜像 docker container ls -all&#xff1a;查看docker中目前在运行的containe…
阅读更多...
2023国赛数学建模D题思路模型代码 高教社杯

2023国赛数学建模D题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…
阅读更多...
【Unity】制作一个简单的菜单栏页面并实现其功能

【Unity】制作一个简单的菜单栏页面并实现其功能

这是一个简单的菜单页面制作&#xff0c;接下来我们将制作一个完整的菜单页面&#xff0c;并且通过一定的代码去实现它对应的效果。这个主要的功能就是我们在游戏中如果想暂停一下或者重新开始&#xff0c;那么就要用到我们这个功能。接下来我们将实现在游戏中按ESC退出键可以调…
阅读更多...
聚观早报 | 青瓷游戏上半年营收3.34亿元；如祺出行冲击IPO

聚观早报 | 青瓷游戏上半年营收3.34亿元；如祺出行冲击IPO

【聚观365】8月26日消息 青瓷游戏上半年营收3.34亿元 如祺出行冲击IPO 索尼互动娱乐将收购Audeze 昆仑万维上半年净利润3.6亿元 T-Mobile计划在未来五周内裁员5000人 青瓷游戏上半年营收3.34亿元 青瓷游戏发布截至2023年6月30日止的中期业绩&#xff0c;财报显示&#xf…
阅读更多...
vue3范围选择组件封装

vue3范围选择组件封装

个人项目地址&#xff1a; SubTopH前端开发个人站 &#xff08;自己开发的前端功能和UI组件&#xff0c;一些有趣的小功能&#xff0c;感兴趣的伙伴可以访问&#xff0c;欢迎提出更好的想法&#xff0c;私信沟通&#xff0c;网站属于静态页面&#xff09; SubTopH前端开发个人站…
阅读更多...
K8S如何部署ZooKeeper以及如何进行ZooKeeper的平滑替换

K8S如何部署ZooKeeper以及如何进行ZooKeeper的平滑替换

前言 在之前的章节中&#xff0c;我们已经成功地将Dubbo项目迁移到了云环境。在这个过程中&#xff0c;我们选择了单机ZooKeeper作为注册中心。接下来&#xff0c;我们将探讨如何将单机ZooKeeper部署到云端&#xff0c;以及在上云过程中可能遇到的问题及解决方案。 ZooKeeper…
阅读更多...
免费开源使用的几款红黑网络流量工具，自动化的多功能网络侦查工具、超级关键词URL采集工具、Burpsuite被动扫描流量转发插件

免费开源使用的几款红黑网络流量工具，自动化的多功能网络侦查工具、超级关键词URL采集工具、Burpsuite被动扫描流量转发插件

免费开源使用的几款红黑网络流量工具&#xff0c;自动化的多功能网络侦查工具、超级关键词URL采集工具、Burpsuite被动扫描流量转发插件。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&am…
阅读更多...
【C++】初步认识模板

【C++】初步认识模板

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录 前言一、泛型编程二、函数模板2.1 函…
阅读更多...
【Java】基础练习（十）

【Java】基础练习（十）

1.判断邮箱 输入一个电子邮箱&#xff0c;判断是否是正确电子邮箱地址。 正确的邮箱地址&#xff1a; 必须包含 字符&#xff0c;不能是开头或结尾必须以 .com结尾和.com之间必须有其他字符 (1) Email类&#xff1a; package swp.kaifamiao.codes.Java.d0823; /** 输入一个…
阅读更多...
4-4 Representing text Exercise

4-4 Representing text Exercise

本文所用资料下载 一. Representing text Let’s load Jane Austen’s Pride and Prejudice. We first split our text into a list of lines and pick an arbitrary line to focus on: with open(D:jane-austen/1342-0.txt, encodingutf8) as f:text f.read() lines text.…
阅读更多...
简单了解文件上传漏洞（md版）

简单了解文件上传漏洞（md版）

简单了解文件上传漏洞 一、什么是文件上传漏洞二、常见功能点三、成功的前提四、文件上传的校验方式五、Pass-1六、Pass-2七、蚁剑结合msf获取目标权限 一、什么是文件上传漏洞 在文件上传的功能处&#xff0c;如果服务端未对上传的文件进行严格的验证和过滤&#xff0c;导致攻…
阅读更多...
登录校验-Filter-详解

登录校验-Filter-详解

目录 执行流程 拦截路径 过滤器链 小结 执行流程 过滤器Filter拦截到请求之后&#xff0c;首先执行方放行之前的逻辑&#xff0c;然后执行放行操作&#xff08;doFilter&#xff09;&#xff0c;然后会访问对应的Web资源&#xff08;对应的Controller类&#xff09;&#…
阅读更多...
【C++】C++ 引用详解 ⑤ ( 函数 “ 引用类型返回值 “ 当左值被赋值 )

【C++】C++ 引用详解 ⑤ ( 函数 “ 引用类型返回值 “ 当左值被赋值 )

文章目录 一、函数返回值不能是 " 局部变量 " 的引用或指针1、函数返回值常用用法2、分析函数 " 普通返回值 " 做左值的情况3、分析函数 " 引用返回值 " 做左值的情况 函数返回值 能作为 左值 , 是很重要的概念 , 这是实现 " 链式编程 &quo…
阅读更多...
Acrobat Pro DC软件安装包分享（附安装教程）

Acrobat Pro DC软件安装包分享（附安装教程）

目录 一、软件简介 二、软件下载 一、软件简介 Acrobat Pro DC是Adobe公司开发的一款PDF编辑软件&#xff0c;简称为DC&#xff0c;是Acrobat系列软件中的一款&#xff0c;是行业内的标准工具&#xff0c;被广泛应用于文档处理、电子合同、PDF表单等领域。 Acrobat Pro DC软…
阅读更多...
【SpringBoot】第一篇：redis使用

【SpringBoot】第一篇：redis使用

背景&#xff1a; 本文是教初学者如何正确使用和接入redis。 一、引入依赖 <!--redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><depen…
阅读更多...
适配器模式实现stack和queue

适配器模式实现stack和queue

适配器模式实现stack和queue 什么是适配器模式&#xff1f;STL标准库中stack和queue的底层结构stack的模拟实现queue的模拟实现 什么是适配器模式&#xff1f; 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)&#xff…
阅读更多...
基于广义神经网络的网络入侵检测Matlab代码

基于广义神经网络的网络入侵检测Matlab代码

1.案例背景 1.1 FCM 聚类算法 聚类方法是数据挖掘中经常使用的方法,它将物理的或抽象的对象分为几个种群,每个种群内部个体间具有较高的相似性,不同群体内部间个体相似性较低。模糊c均值聚类算法(Fuzzy C- Mean, FCM)是用隶属度确定每个元素属于某个类别程度的一种聚类算法&am…
阅读更多...
Rspack 创建 vue2/3 项目接入 antdv（rspack.config.js 配置 less 主题）

Rspack 创建 vue2/3 项目接入 antdv（rspack.config.js 配置 less 主题）

一、简介 Rspack CLI 官方文档。 rspack.config.js 官方文档。 二、创建 vue 项目 创建项目&#xff08;文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式&#xff0c;根据需求进行选择&#xff09; # npm 方式 $ npm create rspacklatest# yarn 方式 $ yarn create…
阅读更多...
AI 绘画Stable Diffusion 研究（十四）SD 图生图+剪映制作人物说话视频

AI 绘画Stable Diffusion 研究（十四）SD 图生图+剪映制作人物说话视频

大家好&#xff0c;我是风雨无阻。 前一篇&#xff0c;我们详细介绍了使用 SadTlaker制作数字人视频案例&#xff0c;感兴趣的朋友请前往查看:AI 绘画Stable Diffusion 研究&#xff08;十三&#xff09;SD数字人制作工具SadTlaker使用教程。 对于没有安装 SadTlaker 插件的朋友…
阅读更多...
最新文章

Copyright @ 2022~2023