当前位置：首页 > news >正文

Vue学习Day3——生命周期\组件化

news 2025/11/11 8:04:07

一、Vue生命周期

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

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

1.创建阶段：创建响应式数据
2.挂载阶段：渲染模板
3.更新阶段：修改数据，更新视图
4.销毁阶段：销毁Vue实例

二、Vue生命周期钩子

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<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('beforeCreate响应式数据准备好之后',this.count)//this.数据名 = 请求回来的数据//可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount() {console.log('beforeMount模版渲染之前',document.querySelector('h3').innerHTML)},mounted() {console.log('beforeMount模版渲染之前',document.querySelector('h3').innerHTML)},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('Updated')},// 4. 卸载阶段beforeDestroy() {console.log('beforeDestroy')},destroyed() {console.log('destroyed')}})
</script>
</html>

三、生命周期钩子小案例

1、在created中发送数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>头条</title>
</head>
<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" v-for="(item,index) in list" :key="item.id"><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// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created(){const res = await  axios.get('http://hmajax.itheima.net/api/news')this.list = res.data.data}})
</script></html>

2、在mounted中获取焦点

在进入页面时，让输入框获取焦点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>搜索</title>
</head>
<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"><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: ''},//核心思路：等输入框出来，让输入框获取焦点mounted() {document.querySelector('#inp').focus()}})
</script>
</html>

四、案例——记账清单

1、需求图示

2、需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3、思路分析

1.基本渲染

立刻发送请求获取数据 created
拿到数据，存到data的响应式数据中
结合数据，进行渲染 v-for
消费统计 —> 计算属性

2.添加功能

收集表单数据 v-model，使用指令修饰符处理数据
给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
请求成功后，对文本框内容进行清空
重新渲染列表

3.删除功能

注册点击事件，获取当前行的id
根据id发送删除请求
需要重新渲染

4.饼图渲染

初始化一个饼图 echarts.init(dom) mounted钩子中渲染
根据数据试试更新饼图 echarts.setOptions({…})

4、实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- CSS only -->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
/>
<style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box  a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}
</style><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /><input v-model.number="price" type="text" class="form-control" placeholder="消费价格" /><button @click="add" type="button" class="btn btn-primary">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{ index + 1}}</td><td>{{  item.name }}</td><td :class="{ red: item.price > 500}">{{ item.price}}</td><td><a @click="del(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{ totalPrice }}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<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>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058** 功能需求：* 1. 基本渲染** 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: '#app',data: {list: [],name:'',price:''},computed: {totalPrice () {return this.list.reduce((sum, item)=> sum + item.price,0 )}},created() {// const  res = await axios.get('https://applet-base-api-t.itheima.net/bill',{//   params: {//     creator: 'wangkay'//   }// })//  this.list = res.data.datathis.getList()},mounted() {this.myChart =  echarts.init(document.querySelector('#main'))this.myChart.setOption ({tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: '消费账单',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 40,fontWeight: 'bold'}},labelLine: {show: false},data: []}]});},methods:{async getList(){const  res = await axios.get('https://applet-base-api-t.itheima.net/bill',{params: {creator: 'wangkay'}})this.list = res.data.datathis.myChart.setOption({series: [{data: this.list.map(item => ({value: item.price, name: item.name}))}]})},async add() {if (!this.name){alert('请输入名称')return}if (typeof this.price !=='number'){alert('请输入正确的消费价格')return}const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{creator: 'wangkay',name: this.name,price: this.price})this.getList()this.name=''this.price=''},async del(id) {const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)this.getList()}}})
</script>
</html>

五、工程化开发和脚手架

1.开发Vue的两种方式

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

工程化开发模式优点：

提高编码效率，比如使用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、项目目录介绍

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

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

2、运行流程

七、组件化开发

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

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

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

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

1、根组件App.vue

1.根组件介绍

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

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

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

1.特点：

只能在注册的组件内使用

2.步骤：

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

3.使用方式：

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

4.注意：

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

5.语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {'组件名': 组件对象,HmHeader:HmHeaer,HmHeader}
}

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

1.特点：

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

2.步骤

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

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

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

5.语法

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

例：

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

Vue学习Day3——生命周期\组件化

一、Vue生命周期 Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段：创建响应式数据 2.挂载阶段：渲染模板 3.更新阶段：修改数据，更…...

编程日记 2023/7/27 12:18:55

题目来自 Golang vs. Rust: Which Programming Language To Choose in 2023?[1] 141. Iterate in sequence over two lists Iterate in sequence over the elements of the list items1 then items2. For each iteration print the element. 依次迭代两个列表依次迭代列表项1…...

编程日记 2023/7/27 12:17:54

pytorch学习-线性神经网络——softmax回归+损失函数+图片分类数据集

1.softmax回归 Softmax回归（Softmax Regression）是一种常见的多分类模型，可以用于将输入变量映射到多个类别的概率分布中。softmax回归是机器学习中非常重要并且经典的模型，虽然叫回归，实际上是一个分类问题 1.1分类与…...

编程日记 2023/7/27 12:16:53

Docker compose（容器编排）

Docker compose（容器编排） 一、安装Docker compose 1.安装Docker compose Docker Compose 环境安装 Docker Compose 是 Docker 的独立产品，因此需要安装 Docker 之后在单独安装 Docker Compose#下载 curl -L https://github.com/docker/co…...

编程日记 2023/7/27 12:15:52

xmind latex【记录备忘】

xmind latex 换行换行必须要有\begin{align}和\end{align}，此时再在里面用\才能换行，如果只写112\224是不能换行的...

编程日记 2023/7/27 12:14:51

RocketMQ（1.NameServer源码）

NameServer功能简述主要功能如下服务注册与发现：Nameserver扮演了RocketMQ集群中服务注册中心的角色。当RocketMQ中的Broker、Producer和Consumer启动时，它们会向Nameserver注册自己的网络地址和角色信息。Nameserver维护着集群中所有活跃实例的信息…...

编程日记 2023/7/27 12:13:50

责任链vs金融登录

金融app相对普通app而言，出于安全考虑，其安全校验方式比较多，以某些银行app为例，手机号登录成功后，会增加指纹、手势、OCR人脸等验证！这些安全项的校验，会根据用户的风险等级有不同的校验优先级…...

编程日记 2023/7/27 12:12:49

通过VIOOVI，了解联合作业分析的意义和目标！

现如今企业的主流生产模式就是流水线生产，一道工序结束后，紧接着开展下一项工序，这种作业模式可以以一种比较高效的方式缩减生产时间。尽管流水作业的效率已经够高的了，但是各个工序之间如果衔接不到位的话，会造成生产…...

编程日记 2023/7/27 12:11:48

清洁机器人规划控制方案

清洁机器人规划控制方案作者联系方式Forrest709335543qq.com 文章目录清洁机器人规划控制方案方案简介方案设计模块链路坐标变换算法框架功能设计定点自主导航固定路线清洁区域覆盖清洁贴边沿墙清洁自主返航回充仿真测试仿真测试准备定点自主导航测试固定路线清洁测试区域…...

编程日记 2023/7/27 12:10:46

设计模式 - 工厂模式

一、简单工厂（Simple Factory Pattern） 1、概念一个工厂对象决定创建出哪一种产品类的实力，但不属于GOF23种设计模式。简单工厂适用于工厂类负责创建的对象较少的场景，且客户端只需要传入工厂类的参数，对于如何创…...

编程日记 2023/7/27 12:09:44

elementUI this.$confirm 文字大小样式

dangerouslyUseHTMLString:true // message部分以html片段处理 customClass //MessageBox 的自定义类名整个comfirm框自定义类名 cancelButtonClass // 取消按钮的自定义类名 confirmButtonClass // 确定按钮的自定义类名<style> .addcomfirm{width: 500px; } .a…...

编程日记 2023/7/27 12:08:43

Kafka的TimingWheel

Kafka的TimingWheel是Kafka中的一个时间轮实现，用于管理和处理延迟消息。时间轮是一种定时器的数据结构，可以高效地管理和触发定时事件。在Kafka中，TimingWheel用于处理延迟消息的重试。当Kafka生产者发送消息到Kafka集群，但由于某些原因导致消息发送失败，生产者会将这些…...

编程日记 2023/7/27 12:07:42

第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo

目录一、创建webpack工程1.1 新建 webpack工程目录1.2 项目初始化1.3 新建src目录和文件1.4 安装jQuery1.5 安装webpack1.6 配置webpack1.6.1 创建配置文件：webpack.config.js1.6.2 配置dev脚本1.7 运行dev脚本 1.8 查看效果1.9 附件1.9.1 package.json1.9.2 webpa…...

编程日记 2023/7/27 12:06:41

Python（Web时代）——初识flask

flask简介介绍 Flask是一个用Python编写的Web 微框架，让我们可以使用Python语言快速实现一个网站或Web服务。它是BSD授权的，一个有少量限制的免费软件许可。它使用了 Werkzeug 工具箱和 Jinja2 模板引擎。 Flask 的设计理念是简单、灵活、易于扩展&a…...

编程日记 2023/7/27 12:05:40

二、SQL-5.DQL-8).案例练习

1、查询年龄为20,21,22,23岁的员工信息 select * from emp where age in(20, 21, 22, 23) and gender 女; 2、查询性别为男，并且年龄在20-40岁（含）以内的姓名为三个字的员工 select * from emp where gender 男 && age between 2…...

编程日记 2023/7/27 12:04:39

浙大数据结构第五周之05-树7 堆中的路径

题目详情： 将一系列给定数字依次插入一个初始为空的小顶堆H[]。随后对任意给定的下标i，打印从H[i]到根结点的路径。输入格式: 每组测试第1行包含2个正整数N和M(≤1000)，分别是插入元素的个数、以及需要打印的路径条数。下一行给出区间[-1…...

编程日记 2023/7/27 12:03:37

C# Modbus TCP上位机测试

前面说了三菱和西门子PLC的上位机通信，实际在生产应用中，设备会有很多不同的厂家生产的PLC，那么，我们就需要一种通用的语言，进行设备之间的通信，工业上较为广泛使用的语言之一就是Modbus。 Modbus有多种连…...

编程日记 2023/7/27 12:02:35

instr字符查找函数（oracle用instr来代替like）

instr函数：字符查找函数。其功能是查找一个字符串在另一个字符串中首次出现的位置。 instr函数在Oracle/PLSQL中是返回要截取的字符串在源字符串中的位置。语法 instr( string1, string2, start_position,nth_appearance ) 参数 string1：源字符串&am…...

编程日记 2023/7/27 12:01:34

trie树的一点理解

这个是最简单的数据结构：因为只需要记住两句话就能完美的写出简洁优雅的代码 1. 每次都是从根节点开始看(或者说从第零次插入的东西开始遍历，son[][]里面存的是第几次插入) 2每次遍历都是插入和查询的字符串 #include<iostream> using namespace …...

编程日记 2023/7/27 12:00:33

Linux CentOS监控系统的运行情况工具 - top/htop/glances/sar/nmon

在CentOS系统中，您可以使用以下工具来监控系统的运行情况： 1. top： top 是一个命令行工具，用于实时监控系统的进程、CPU、内存和负载情况。您可以使用以下命令来启动 top： top 输出 2. htop： htop 是一…...

编程日记 2023/7/27 11:59:31

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/11/11 3:03:55

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2025/11/10 20:04:03

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2025/11/9 20:47:54

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/11/8 5:57:07

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...

编程新知 2025/10/28 23:14:00

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/11/11 1:56:04

C# 类和继承(抽象类)

抽象类抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。不能创建抽象类的实例。抽象类使用abstract修饰符声明。抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/11/10 12:21:43

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/11/7 14:06:31

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...

编程新知 2025/11/2 0:32:25

一、Vue生命周期

二、Vue生命周期钩子

三、生命周期钩子小案例

1、在created中发送数据

2、在mounted中获取焦点

四、案例——记账清单

1、需求图示

2、需求分析

3、思路分析

4、实现

五、工程化开发和脚手架

1.开发Vue的两种方式

2.脚手架Vue CLI

基本介绍：

好处：

使用步骤：

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

1、项目目录介绍

2、运行流程

七、组件化开发

1、根组件App.vue

1.根组件介绍

2.组件是由三部分构成

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

1.特点：

2.步骤：

3.使用方式：

4.注意：

5.语法：

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

1.特点：

2.步骤

3.使用方式

4.注意

5.语法

相关文章：