建企业网站哪家好,国内设计的企业网站,天猫购物商城官网,湖南省房屋和城乡建设部网站2023 的最后一篇博客#xff0c;祝大家元旦快乐#xff0c;新的一年一起共勉#xff01; 06. Vue 生命周期
6.1 基本介绍 生命周期就是一个 Vue 示例从 创建 到 销毁 的整个过程#xff0c;创建、挂载、更新、销毁 有一些请求是必须在某个阶段完成之后或者某个阶段之前执行… 2023 的最后一篇博客祝大家元旦快乐新的一年一起共勉 06. Vue 生命周期
6.1 基本介绍 生命周期就是一个 Vue 示例从 创建 到 销毁 的整个过程创建、挂载、更新、销毁 有一些请求是必须在某个阶段完成之后或者某个阶段之前执行的
所以在 Vue 生命周期过程中会 自动 运行一些函数被成为 生命周期钩子可以让开发者在特定的阶段运行自己的代码。
每个阶段对应两个钩子函数共八个 这里面比较重要的是 created 和 mounted 分别用于发送初始化渲染请求和操作 DOM
6.2 各个阶段及对应的钩子函数
创建阶段Initialization
beforeCreate在实例初始化之后数据观测 (data 和 methods 初始化之前)。created在实例创建完成后立即调用。可以在这个阶段进行数据操作但是模板和虚拟DOM尚未生成。
挂载阶段Mounting
beforeMount在挂载开始之前调用相关的 render 函数首次被调用。mounted在挂载完成后调用此时组件已经被挂载到 DOM 中。在这个阶段可以访问到模板中的元素并可以对其进行操作。
更新阶段Updating
beforeUpdate在数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。updated在数据更新完成时调用组件 DOM 已经更新。
销毁阶段Unmounting
beforeDestroy在实例销毁之前调用。此时实例仍然完全可用。destroyed在实例销毁之后调用。该阶段组件完全被销毁清理工作应该在这里完成。
script src./vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100,title: 计数器},beforeCreate () {console.log(响应式数据准备好前);},created () {console.log(响应式数据准备好后);},beforeMount () {console.log(模板渲染前);},mounted () {console.log(模板渲染后);},beforeUpdate () {console.log(数据修改了视图还没更新);},updated () {console.log(数据修改了视图已经更新);},beforeDestroy () {console.log(销毁前);},destroyed () {console.log(销毁后);}})/script比如上面的测试代码当我们可以看到视图的时候创建阶段 和 挂载阶段 已经执行完了需要注意的是更新阶段更新的是视图这两个阶段对应的都是视图更新前和更新后不是数据。
6.3 created 应用
下面我们来实现一个加载新闻信息的实例当用户打开网页渲染之前我们需要发送请求将数据替换
li classnewsdiv classleftdiv classtitle模拟数据/divdiv classinfospan模拟数据/spanspan模拟数据/span/div/divdiv classrightimg :srcitem.img alt/div/li比如将下面的模拟数据改为发送请求获取到的数据这个操作需要在渲染之前响应式数据准备完成之后再进行操作这时候就用到了我们的 created 钩子函数我们写如下的操作
使用 v-for 渲染 li 标签
li classnews v-foritem in list :keyitem.iddiv classleftdiv classtitle{{item.title}}/divdiv classinfospan{{item.source}}/spanspan{{item.time}}/span/div/divdiv classrightimg :srcitem.img alt/div/li通过 axios 发送请求并存储
script src./vue.js/scriptscript src./axios.js/scriptscript// 接口地址http://hmajax.itheima.net/api/news// 请求方式getconst app new Vue({el: #app,data: {list: []},async created () {// 发送请求获取数据const res await axios.get(http://hmajax.itheima.net/api/news);console.log(res);this.list res.data.data;}})/script这样就完成了操作
07. 工程化开发
7.1 工程化开发基本介绍
Vue 的开发方式分为两种一种是我们前面使用的导入核心包的传统开发模式即基于 html、css、js 文件直接引入 vue 核心包的开发方式。
还有一种是基于构建工具例如 webpack的环境总开发 Vue 的方式自动化构建工具是用来 简化和优化 软件开发过程中的一系列重复性任务和复杂性操作的工具。它们可以帮助开发人员自动化地执行诸如编译、打包、优化、压缩、转译、部署 等多种任务以提高开发效率并确保项目的质量和稳定性。
以下是自动化构建工具的主要功能和作用
代码打包和压缩 自动化构建工具能够将项目中的多个文件或模块打包成一个或多个最终可执行的文件以减少网络传输时间和提高页面加载速度。它们还可以对代码进行压缩和优化去除不必要的空格、注释和未使用的代码从而减小文件大小提高页面加载性能。 资源转换和处理 自动化构建工具可以处理项目中的各种资源文件例如将 SCSS 或 LESS 文件转换为 CSS将 ES6 语法转译为兼容性更好的 ES5 代码处理图片压缩等。通过这些转换和处理开发者可以使用更加便捷的开发方式而无需手动进行繁琐的转换工作。 模块化管理 当项目中使用了模块化的开发方式时如使用 CommonJS、ES6 模块等自动化构建工具可以帮助将模块化的代码打包成浏览器可识别的代码。它们可以管理模块之间的依赖关系将多个模块合并为一个文件以提高页面的加载速度和性能。 代码检查和测试 自动化构建工具可以集成代码检查工具如 ESLint、JSHint、TSLint 等帮助开发者发现并修复代码中的潜在问题和错误。它们还可以集成单元测试和端到端测试工具自动运行和监控测试用例以确保代码质量和功能的稳定性。 部署和发布 自动化构建工具可以帮助开发者简化项目的部署和发布流程自动将构建后的代码部署到服务器或云端以便最终的产品发布和线上运行。
但是 webpack 的配置并不简单而且由于很多雷同的配置需要重复进行且没有统一的配置标准使得开发研究成本比较高这就需要用到一个工具来进行 标准化 的配置。
这就要提到 Vue CLI。
7.2 Vue CLI 基本介绍 Vue CLI 是一个由 Vue.js 官方提供的命令行工具用于快速搭建 Vue.js 项目、管理项目依赖、开发和构建 Vue.js 应用程序。它是 Vue.js 生态系统中的一个重要工具能够帮助开发者快速初始化 Vue.js 项目并提供了一套现代化的开发环境和工作流程。 使用步骤 全局安装 通过 yarn 安装
yarn global add vue/cli
通过 npm 安装
npm i vue/cli -g检查安装是否成功查看版本 vue -- version创建项目架子初始化项目project-name 是你的项目名不要使用中文名 vue create project-name启动项目通过 package.json 查看 通过 yarn 启动
yarn serve
通过 npm 启动
npm run serve完成了上述的步骤我们就拥有了一个 vue 开发的初始模板且安装是一次安装我们后续可以任意使用 vue create 全局命令拉取模板开机不需要再次安装。
通过在 vs 中打开项目我们可以见到如下的目录 接下来让我们来认识这些文件。
7.3 目录介绍 基于 vue2 构建的和基于 vue3 构建的在一些语法方面可能有部分不同这里先看基于 vue2 构建的。 这里面最核心的是 index.html App.vue 和 main.js 三个文件main.js 可以看作是程序的入口首先会执行这里面的代码
Vue 2 的 main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)
Vue 3 的 main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)这两个版本起到的作用是相同的首先是引入了 App 组件和 createApp 函数再利用下面的 createApp 将这个组件后面详细的讲组件是什么渲染到 index.html 中 id 名为 app 的容器中。
index.html
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbody!-- 对不支持 JavaScript 的浏览器的适配显示下面语句 --noscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/html index.htmlindex.html 是整个应用的入口 HTML 文件。它是一个静态文件通常位于项目的 public 文件夹中。这个文件是最初由 Vue CLI 自动生成的其中可能包含一些标记比如 div idapp/div这个 div 标签就是 Vue 应用所挂载的根 DOM 元素。main.jsmain.js 是 Vue 应用的主要 JavaScript 文件。它是应用的入口文件在这里创建了 Vue 实例并将其挂载到 index.html 中的根 DOM 元素上。main.js 中通常包含了创建 Vue 实例、引入所需的组件、配置路由如果有的话、设置全局配置等逻辑。 main.js 文件通过 Vue 实例化并在指定的 DOM 元素中通常是 index.html 中的 div idapp/div挂载 Vue 应用。这种挂载过程将 Vue 应用程序和 HTML 文件联系在一起实现了 Vue 应用的渲染和展示。 虽然 index.html 和 main.js 之间没有直接的物理绑定但通过 Vue 的挂载机制main.js 中创建的 Vue 实例会将应用程序动态地渲染到 index.html 中指定的位置因此二者是应用程序的入口文件和主逻辑文件。 下面我们来启动一个项目看看效果
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
运行 yarn serve 我们打开浏览器输入地址默认在8080 端口打开看到下面的界面就表示成功了
下面我们来试试上面讲的机制
import Vue from vue
Vue.config.productionTip false
new Vue({
}).$mount(#app)我们将 App 组件移除这时候界面是完全空白的了 说明确实是影响到了 index.html 界面
7.4 组件化
上面一直提到组件化接下来让我们来具体的看看组件化是什么。
组件化就是将页面拆分成一个个小的组件这样做的意义是什么呢
之前我们开发的网页都比较简单修改和维护都很容易但是如果开发的是一整个项目的话那么寻找是哪个部分出了问题或者修改某个部分都有很大的工作量而且如果多个界面出现重复的内容只能通过复制粘贴的方式解决。
所以为什么不把网页拆分成一个个小组件比如说一个大的页面有头部组件、主题组件、尾部组件这些组件里面 又有一个个小的组件这样维护起来就十分容易只需要去修复对应的组件即可而且也解决了复用性的问题。 和 html 中的 body 一样组件也有包含所有小组件的大组件作为整个应用的最上层我们称之为 根组件 7.5 组件的组成
当我们打开 App.vue 的时候会发现和我们平时写的 vue 代码有很大的差别其实一个组件可以分为三部分分别控制这个组件的行为、结构和样式对应着 javascript html 和 css。 如果代码不是和我一样高亮的需要安装 Vetur 插件 7.4 组件的注册和使用
组件可以看成一个个的积木我们通过将这些组件组合在一起就搭建起了整个网页那积木也有搭建某一部分使用的和搭建全局都需要使用到的积木不知道这个例子恰不恰当主要是看使用的范围。
对于这些经常需要用到的的就可以注册为 全局组件而那些部分地方需要的就可以注册为 局部组件 来局部的注册和使用。
先来看局部注册的方式局部注册只能在注册的组件内使用分为两步
创建 .vue 文件在使用的组件内 导入 并 注册
比如我们来看 Vue 架子准备好的 App.vue 当我们引入这个对象后需要在该组件的配置对象的 components 中注册组件原本的写法应该是 组件名: 组件对象 作为 components 对象的属性但是变量名和变量值相同可以简写成为上述的写法。
使用就可以当作正常的 html 标签使用还可以传递属性。
再来看看我们引入的内容
script
export default {name: HelloWorld,props: {msg: String}
}
/script上面的是 HellowWorld 组件中的导出部分我们通过 import HelloWorld from ./components/HelloWorld.vue 语句可以拿取到默认导出的部分并且将它赋值给 HelloWorld 变量。
很明显这个默认导出的部分就是 HellowWorld 组件的 配置对象在上面的例子中我们传递了 Welcome to Your Vue.js App 的字符串变量关于这部分后面详细解释。
再来看全局注册的方式全局注册于局部注册唯一的不同就是在 main.js 中进行注册
import Vue from vue
// 引入组件
import HelloWorld from ./components/HelloWorld
import App from ./App.vue
// 全局注册
Vue.component(HelloWorld)Vue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)这样注册的组件在全局都可以使用。
