vue的声明周期、钩子函数、工程化开发

1.vue的声明周期:

一个vue实例的生命周期可以分为四个阶段:

(1)创建(2)挂载(3)更新(4)销毁

(1)创建阶段:

数据的响应式处理:将普通数据转换成响应式数据。我们定义的数据默认是普通类型数据,Vue底层会对我们创建的数据进行监听,监听到了之后会自动将其转化成响应式数据,只有转换成响应式数据,后续页面在渲染的时候,才会自动更新;

(2)挂载阶段:

结合定义好的模板和转换后的响应式数据,实现数据的渲染,并在页面上显示出来;

(3)更新阶段:

用户操作最多的阶段。用户修改数据过后,试图会重新更新。并且这个阶段是可重复的,如果用户重复多次修改数据,那么更新阶段会执行多次;

(4)当浏览器页面关闭就会销毁vue实例

2.vue声明周期中的钩子函数:

我们最常用的就是created和mounted,created可以在数据完成响应式转化之后进行数据的获取显示等功能,而mounted则是在渲染之后可以进行dom操作;

3.Vue CLI工程化开发:

Vue CLI 是 Vue 官方提供的一个全局命令工具。 可以帮助我们快速创建一个开发Vue 项目的标准化基础架子。【集成了webpack配置】

在使用的时候在项目所在文件夹打开powerSheel然后输入vue create 项目名指令,进行项目的创建,创建后用cd切换到该项目下,输入npm run serve运行项目;

项目的内部构造:

4.项目运行流程:

App.vue作为全局组件已经导入其内部所需的子组件;

5.组件化开发和根组件的介绍:

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

一个组件分为三部分:

<templete></templete> ------------结构

<script></script>---------------------行为

<style></style>-----------------------样式

6.组件的注册:

组件的注册方式有两种,一种是局部注册,还有一种是全局注册;

组件的局部注册:

局部注册:只能在注册的组件内使用

注册步骤:

第一步:在components里面创建vue子组件;

第二步:注册子组件;

第三步:使用子组件;

复制代码
<template>
  <div class="app">
      <MyHeader></MyHeader>
      <MyBody></MyBody>
      <MyFooter></MyFooter>
  </div>
</template>

<script>
//导入子组件  import 组件对象 from 子组件的路径
import MyFooter from './components/MyFooter.vue'
import MyHeader from './components/MyHeader.vue'
import MyBody from './components/MyBody.vue'
export default {
    //组件的局部注册
    components: {
      // 组件名称 : 组件对象
      MyHeader:  MyHeader,
      MyFooter: MyFooter,
      // 如果组件名称和组件对象的名字是一样的 就可以简写。
      MyBody
    }
}
</script>

<style>
   .app{
      width: 400px;
      height: 700px;
      background-color: brown;
   }
</style>

导入的时候在script内部导入,在export default中进行注册,注册方式是组件名称:组件对象名

如果组件名称和组件对象名一样就可以直接写组件对象名;

组件的全局注册:

全局注册的组件在所有组件内部都可以使用,注册步骤如下:

(1)在与components同级位置创建全局组件,完成组件内部的编写;

(2)在main.js中完成对于导入并注册全局变量

(3)在其他的组件中使用全局组件

一般来说都是使用局部组件,如果发现通用组件再抽离到全局

相关推荐
子兮曰17 小时前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰17 小时前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万17 小时前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝17 小时前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A17 小时前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋17 小时前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁18 小时前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄19 小时前
JavaScript 隐式全局变量解析
javascript
honkun619 小时前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs199120 小时前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net