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

目录

  • 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.hqwc.cn/news/652508.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「Kafka」Kafka单机和集群安装(二)

「Kafka」Kafka单机和集群安装&#xff08;二&#xff09; 一、单机启动1. 下载安装Kafka2. 启动ZooKeeper2. 启动Kafka 二 、集群启动1. 安装zookeeper2. 安装kakfa3. 封装启动脚本 一、单机启动 1. 下载安装Kafka 阿里云下载地址&#xff1a;Kafka阿里云镜像站&#xff0c;官…

AI大模型探索之路-训练篇5:大语言模型预训练数据准备-词元化

系列文章目录&#x1f6a9; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据…

全面解析平台工程与 DevOps 的区别与联系

平台工程的概念非常流行&#xff0c;但很多开发人员仍然不清楚它是如何实际运作的&#xff0c;这是非常正常的。 平台工程是与 DevOps 并行吗&#xff1f;还是可以相互替代&#xff1f;或者 DevOps 和平台工程是两个完全不同的概念&#xff1f; 一种比较容易将两者区分开来的方…

mysql中join内外连接查询例子

文章目录 join关键字概要举例using 与 on 区别 join关键字 在MySQL中&#xff0c;JOIN 是一种用于将两个或多个表中的行联合起来的操作。 连接&#xff08;join&#xff09;就是将一张表中的行按照某个条件&#xff08;连接条件&#xff09;与另一张表中的行连接起来形成一个新…

泰坦尼克号乘客生存情况预测分析2

泰坦尼克号乘客生存情况预测分析1 泰坦尼克号乘客生存情况预测分析2 泰坦尼克号乘客生存情况预测分析3 泰坦尼克号乘客生存情况预测分析总 背景描述 Titanic数据集在数据分析领域是十分经典的数据集&#xff0c;非常适合刚入门的小伙伴进行学习&#xff01; 泰坦尼克号轮船的…

react 基础学习笔记一

1、jsx语法过程 jsx使用react构造组件&#xff0c;通过bable进行编译成js对象&#xff0c;在用ReactDom.render()渲染成DOM元素&#xff0c;最后再插入页面的过程。 2、创建组件 组件的定义&#xff1a;将公用的代码组装成一个独立的文件&#xff0c;保持代码独立性&#xff0…

如何将图片压缩100k?几个方法帮你解决

很多平台为了保证用户体验&#xff0c;会限制我们上传图片的大小&#xff0c;所以我们在社交平台分享图片的时候&#xff0c;就会看有些要求为100kb的字样&#xff0c;那么我们怎么把一些过大的图片压缩100kb大小呢&#xff1f;试试下面介绍的这几个方法吧。 在工具栏中选择【…

每天五分钟深度学习:如何理解梯度下降算法可以逼近全局最小值?

本文重点 上节课程中,我们已经知道了逻辑回归的代价函数J。要想最小化代价函数,我们需要使用梯度下降算法。 梯度下降算法地直观理解: 为了可视化,我们假设w和b都是单一实数,实际上,w可以是更高地维度。 代价函数J是在水平轴w和b上的曲面,因此曲面的高度就是J(w,b)在…

深入理解分布式事务① ---->分布式事务基础(四大特性、五大类型、本地事务、MySQL并发事务问题、MySQL事务隔离级别命令设置)详解

目录 深入理解分布式事务① ---->分布式事务基础&#xff08;四大特性、五大类型、本地事务、MySQL并发事务问题、MySQL事务隔离级别命令设置&#xff09;详解事务的基本概念1、什么是事务&#xff1f;2、事务的四大特性2-1&#xff1a;原子性&#xff08;Atomic&#xff09…

创建electron,解决包清理的问题,解决镜像源卡住下载时间长

我的电脑用户名是Anyphasy,我的node.js安装在D:\developp\nodejss18.18.0 使用npm config get prefix查看node.js安装路径 npm config get prefix 创建electron 创建package.json文件,它里面记载了你的electron版本,项目描述,以及启动命令等信息 npm init -y 先查看你自己的…

什么样的内外网文档摆渡,可以实现安全高效传输?

内外网文档摆渡通常指的是在内网&#xff08;公司或组织的内部网络&#xff09;和外网&#xff08;如互联网&#xff09;之间安全地传输文件的过程。这个过程需要特别注意安全性&#xff0c;因为内网往往包含敏感数据&#xff0c;直接连接内网和外网可能会带来安全风险。因此会…

PyCharm 中的特殊标记

在使用 PyCharm 开发 Python 项目的时候&#xff0c;经常会有一些特殊的标记&#xff0c;有些是 IDE 提示的代码规范&#xff0c;有些则为了方便查找而自定义的标记。 我在之前写过一些关于异常捕获的文章&#xff1a;Python3 PyCharm 捕获异常报 Too broad exception clause …