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

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

news 2026/2/10 14:56:42

一、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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/11/30 15:33:36

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/2/7 20:40:53

React19源码系列之事件插件系统

事件类别事件类型定义文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

【学习笔记】深入理解Java虚拟机学习笔记——第4章虚拟机性能监控，故障处理工具

第2章虚拟机性能监控，故障处理工具 4.1 概述略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

一、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.语法

相关文章：