Vue入门篇:生命周期,钩子函数,工程化开发Vue(脚手架安装),组件化开发(全局注册,局部注册)

embedded/2024/9/24 13:43:16/

目录

  • 1.Vue生命周期和生命周期的四个阶段
  • 2.Vue生命周期函数(钩子函数)
  • 3.工程化开发&脚手架Vue CLI
    • 1.在powershell管理员权限下打开命令行安装脚手架:
    • 2.查看vue版本:
    • 3.创建项目架子
    • 4.运行项目
  • 4.组件化开发&根组件
    • 1.App.vue文件(单文件组件)的三个组成部分
    • 2.普通组件的注册使用

1.Vue生命周期和生命周期的四个阶段

Vue生命周期:一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段:①创建挂载更新销毁
在这里插入图片描述

2.Vue生命周期函数(钩子函数)

Vue生命周期过程中,会自动运行一些函数,被称为生命周期钩子
让开发者可以在特定阶段运行自己的代码。
在这里插入图片描述

3.工程化开发&脚手架Vue CLI

开发Vue的两种方式:
①核心包传统开发模式:基于 html / css / js 文件,直接引入核心包,开发Vue。
②工程化开发模式:基于构建工具(例如: webpack )的环境中开发Vue。

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

1.在powershell管理员权限下打开命令行安装脚手架:

需要事先安装node.js环境

yarn global add @vue/cli

2.查看vue版本:

出现了以下报错:
在这里插入图片描述
解决方案:重装脚手架

npm uninstall -g @vue/cli
npm install -g @vue/cli

再次查看vue版本,可以成功显示:
在这里插入图片描述

3.创建项目架子

vue create vue-demo1(项目名称)

在这里插入图片描述

4.运行项目

根据package.json文件中的script键值对:

在这里插入图片描述

yarn serve

或者是

npm run serve

成功访问Vue的默认初始页面:
在这里插入图片描述

4.组件化开发&根组件

组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为
好处:便于维护,利于复用→提升开发效率
组件分类:普通组件、根组件。
根组件:整个应用最上层的组件,包裹所有普通小组件。

1.App.vue文件(单文件组件)的三个组成部分

①template:结构(有且只能一个根元素)
②script: js逻辑
③style:样式(可支持less,需要装包)
在这里插入图片描述

语法高亮组件:
在这里插入图片描述

2.普通组件的注册使用

组件注册的两种方式:
1.局部注册:只能在注册的组件内使用
①创建.vue文件(三个组成部分)
②在使用的组件内导入并注册
2.全局注册:所有组件内都能使用
①创建.vue文件(三个组成部分)
②main.js中进行全局注册

使用
当成html标签使用<组件名></组件名>
注意:
组件名规范→大驼峰命名法


http://www.ppmy.cn/embedded/18571.html

相关文章

SpringBoot中多数据源灵活切换解决方案

本篇内容介绍了“SpringBoot中如何使用Dynamic Datasource配置多数据源”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 源码地址/文档说明 功能特性: 支持 数据源分组…

Xcode for Mac:强大易用的集成开发环境

Xcode for Mac是一款专为苹果开发者打造的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它集成了代码编辑器、编译器、调试器等一系列开发工具&#xff0c;让开发者能够在同一界面内完成应用的开发、测试和调试工作。 Xcode for Mac v15.2正式版下载 Xcode支持多种编程…

【TensorFlow深度学习】数据统计在深度学习中的重要性

数据统计在深度学习中的重要性 1. 数据统计的基础概念2. 数据统计在TensorFlow中的实现2.1 张量范数2.2 归约操作2.2.1 计算最大值和最小值2.2.2 计算均值和总和 2.3 损失函数的统计2.3.1 均方误差 2.4 模型性能的统计2.4.1 准确率 3. 数据统计在模型训练中的应用3.1 学习率调整…

8.4.3 使用3:配置单臂路由实现VLAN间路由

1、实验目的 通过本实验可以掌握&#xff1a; 路由器以太网接口上的子接口配置和调试方法。单臂路由实现 VLAN间路由的配置和调试方法。 2、实验拓扑 实验拓扑如下图所示。 3、实验步骤 &#xff08;1&#xff09;配置交换机S1 S1(config)#vlan 2 S1(config-vlan)#exit S…

鸿蒙OpenHarmony【轻量系统 编译】 (基于Hi3861开发板)

编译 OpenHarmony支持hb和build.sh两种编译方式。此处介绍hb方式&#xff0c;build.sh脚本编译方式请参考[使用build.sh脚本编译源码]。 使用build.sh脚本编译源码 进入源码根目录&#xff0c;执行如下命令进行版本编译。 ./build.sh --product-name name --ccache 说明&…

快手面试算法真题

按照html中的标签层数遍历节点名。 例如&#xff1a;html代码如下&#xff1a;(上面的数字表示层数) <!-- 1 --><div class"div1"><!-- 2 --><span class"span1"></span><!-- 2 --><p class"p1"><…

iOS——NSCache

什么是NSCache NSCache是Foundation框架中的一个类&#xff0c;用于在iOS和macOS应用程序中进行临时性的内存缓存。它提供了一种轻量级的缓存机制&#xff0c;可以用于存储临时性的数据&#xff0c;例如图片、对象等。NSCache的主要特点和用法包括&#xff1a; 临时性缓存&…

如何实现直播声卡反向给手机充电功能呢?

在数字化时代的浪潮中&#xff0c;声卡作为多媒体系统的核心组件&#xff0c;扮演着声波与数字信号相互转换的关键角色。它不仅能够将来自各类音源的原始声音信号转换为数字信号&#xff0c;进而输出到各类声响设备&#xff0c;更能够通过音乐设备数字接口(MIDI)发出合成乐器的…