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

一、今日目标

1.生命周期

生命周期介绍
生命周期的四个阶段
生命周期钩子
声明周期案例

2.工程化开发入门

工程化开发和脚手架
项目运行流程
组件化
组件注册

二、Vue生命周期

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

Vue生命周期：就是一个Vue实例从

创建

到

销毁

的整个过程。

生命周期四个阶段：

① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：

创建响应式数据

2.挂载阶段：

渲染模板

3.更新阶段：

修改数据，更新视图

4.销毁阶段：

销毁Vue实例

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

三、Vue生命周期钩子

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

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divid="app"><h3>{{ title }}</h3><div><button@click="count--">-</button><span>{{ count }}</span><button@click="count++">+</button></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app =newVue({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中发送数据

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divid="app"><ul><liv-for="(item, index) in list":key="item.id"class="news"><divclass="left"><divclass="title">{{ item.title }}</div><divclass="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><divclass="right"><img:src="item.img"alt=""></div></li></ul></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app =newVue({el:'#app',data:{list:[]},asynccreated(){// 1. 发送请求获取数据const res =await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data
      }})</script></body></html>

2.在mounted中获取焦点

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>示例-获取焦点</title><!-- 初始化样式 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/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><divclass="container"id="app"><divclass="search-container"><imgsrc="https://www.itheima.com/images/logo.png"alt=""><divclass="search-box"><inputtype="text"v-model="words"id="inp"><button>搜索一下</button></div></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app =newVue({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配置】

好处：

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

使用步骤：

全局安装（只需安装一次即可）yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本vue --version
创建项目架子vue create project-name #(项目名不能使用中文)
启动项目yarn serve 或者 npm run serve (命令不固定，找package.json)

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

1.项目目录介绍

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

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

```
 main.js 入口文件
```
```
App.vue App根组件
```
```
 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.步骤：

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

3.使用方式：

当成html标签使用即可

 <组件名></组件名>

4.注意：

组件名规范 —>

大驼峰命名法

，如 HmHeader

5.语法：

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

// 导入需要注册的组件// import 组件对象 from '.vue文件路径'import HmHeader from'./components/HmHeader'exportdefault{// 局部注册components:{// '组件名': 组件对象,HmHeader:HmHeaer,
    HmHeader // 也可以简写}}

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

1.特点：

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

2.步骤

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

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —>

大驼峰命名法

，如 HmHeader

5.语法

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

例：

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

标签： vue.js 前端 javascript

本文转载自: https://blog.csdn.net/weixin_46370595/article/details/132516313
版权归原作者 小钟不想敲代码 所有，如有侵权，请联系我们删除。

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

一、今日目标

1.生命周期

2.工程化开发入门

二、Vue生命周期

三、Vue生命周期钩子

四、生命周期钩子小案例

1.在created中发送数据

2.在mounted中获取焦点

五、工程化开发和脚手架

1.开发Vue的两种方式

2.脚手架Vue CLI

基本介绍：

好处：

使用步骤：

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

1.项目目录介绍

2.运行流程

七、组件化开发

八、根组件 App.vue

1.根组件介绍

2.组件是由三部分构成

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

1.特点：

2.步骤：

3.使用方式：

4.注意：

5.语法：

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

1.特点：

2.步骤

3.使用方式

4.注意

5.语法

发表评论

“vue2 生命周期,工程化开发入门”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航