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标签使用<组件名></组件名>
注意:
组件名规范→大驼峰命名法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/577533.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决双击PDF文件出现打印的问题【Adobe DC】

问题描述 电脑安装Adobe Acrobat DC之后&#xff0c;双击PDF文件就会出现打印&#xff0c;而无法直接打开。 右键PDF文件就会发现&#xff0c;第一栏出现的不是用Adobe打开&#xff0c;而是打印。 重装软件多次仍然无法解决。 原因 右键菜单被改写了。双击其实是执行右键菜…

计算机网络—— book

文章目录 一、概述1.1互联网的核心部分1&#xff0e;电路交换的主要特点2&#xff0e;分组交换的主要特点 1.2.计算机网络的性能1&#xff0e;速率2&#xff0e;带宽3&#xff0e;吞吐量4&#xff0e;时延5&#xff0e;利用率 1.3.计算机网络体系结构协议与划分层次具有五层协议…

Git如何配合Github使用

1.安装Git https://git-scm.com/ ##2.配置 Git 安装完成后&#xff0c;你需要设置 Git 的用户名和邮箱地址&#xff0c;这样在提交代码时就能知道是谁提交的。你可以在命令行中输入以下命令来配置&#xff1a; git config --global user.name "Your Name" git con…

JavaScript创建和填充数组的更多方法

空数组fill()方法创建并填充数组 ● 我们之前创建数组的方式都是手动去创建去一个数据&#xff0c;例如 console.log([1, 2, 3, 4, 5, 6, 7]);● 当然我们也可以使用Array对象来构造数组 console.log([1, 2, 3, 4, 5, 6, 7]); console.log(new Array(1, 2, 3, 4, 5, 6, 7));…

惊爆:Apple重启OpenAI谈判为iphone引入其技术

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

用宝塔部署一套自己的漏洞扫描OpenVAS

一、OpenVAS简单说明 OpenVAS是一个开源且功能开放的网络安全漏洞评估系统&#xff0c;它集成了多种相关工具&#xff0c;构成了一套全面的网络扫描解决方案。因此&#xff0c;OpenVAS能够免费提供给用户部署和使用。在其最新版本中&#xff0c;仅需安装一个基于浏览器/服务器架…

【OceanBase诊断调优 】—— 如何快速定位SQL问题

作者简介&#xff1a; 花名&#xff1a;洪波&#xff0c;OceanBase 数据库解决方案架构师&#xff0c;目前负责 OceanBase 数据库在各大型互联网公司及企事业单位的落地与技术指导&#xff0c;曾就职于互联网大厂和金融科技公司&#xff0c;主导过多项数据库升级、迁移、国产化…

论文解读-面向高效生成大语言模型服务:从算法到系统综述

一、简要介绍 在快速发展的人工智能&#xff08;AI&#xff09;领域中&#xff0c;生成式大型语言模型&#xff08;llm&#xff09;站在了最前沿&#xff0c;彻底改变了论文与数据交互的方式。然而&#xff0c;部署这些模型的计算强度和内存消耗在服务效率方面带来了重大挑战&a…

BUUCTF-Misc22

[WUSTCTF2020]爬1 1.打开附件 第一个文件 2.foremost 用binwalk 文件名 查看文件是否包含其他文件 foremost 文件名 分离文件 打开分离的文件&#xff0c;看到PDF文件夹下有一个PDF的文本文档 打开提示被图片覆盖住了 3.WPS 用WPS打开PDF文件&#xff0c;点击编辑即可将图…

适合弱电行业用的项目管理系统,找企智汇项目管理系统!

弱电行业&#xff0c;是指通信、计算机、监控、安防、智能家居等一系列与现代生活息息相关的行业。在这个行业&#xff0c;项目管理的重要性不言而喻。企智汇项目管理系统在弱电行业的应用中&#xff0c;展现出了其独特的优势和价值。该系统能够充分满足弱电工程项目的复杂需求…

408数据结构专项算法题-2018年

题目&#xff1a; 分析&#xff1a;类似于2年前的排序问题难度&#xff0c;要进行有思考的暴力&#xff0c;即找到一些题目隐含的性质。 注&#xff1a;如果只是贴正确思路的话非常简单&#xff0c;展示错误思路有利于我整理思考一道题目的过程&#xff0c;锻炼思维的循序渐进。…

C++对象的初始化和处理

生活中我们买的电子产品都基本会有出厂设置!在某一天我们不用时候也会删除一些自己信息数据保证安全。 C中的面向对象来源于生活&#xff0c;每个对象也都会有初始设置以及对象销毁前的清理数据的设置。 构造函数和析构函数 对象的初始化和清理也是两个非常重要的安全问题 一…

数据分析:扩增子-16s rRNA分析snakemake流程

介绍 扩增子测序是分析环境微生物的常见手段&#xff0c;通常使用的是16s rRNA片段。16srRNA分析主要有质控、去冗余、聚类OTU、去嵌合体、生成OTU表和物种注释等步骤。更多知识分享请到 https://zouhua.top/。 先看看前期数据处理的可视化图。 数据 18份来自宏基因组公众号…

go 测试和文件

go 测试和文件 需求传统测试单元测试牛刀小试总结练习文件介绍打开关闭文件读文件一次性读取文件写文件文件或文件夹是否存在文件拷贝 需求 有一个函数&#xff0c;怎样确认他运行结果是正确的&#xff1f; func addUpper(n int)int {res : 0for i : 1; i < n; i {res1}r…

设计模式学习笔记 - 开源实战五(下):总结Mybatis中用到的10种设计模式

概述 本章再对 Mybatis 用到的设计模式做一个总结。它用到的设计模式也不少。有些前面章节已经经过了&#xff0c;有些则比较简单。 SqlSessionFactoryBuilder&#xff1a;为什么要用建造者模式来创建 SqlSessionFactory&#xff1f; 在《Mybatis如何权衡易用性、性能和灵活性…

【算法基础实验】图论-UnionFind连通性检测之quick-find

Union-Find连通性检测之quick-find 理论基础 在图论和计算机科学中&#xff0c;Union-Find 或并查集是一种用于处理一组元素分成的多个不相交集合&#xff08;即连通分量&#xff09;的情况&#xff0c;并能快速回答这组元素中任意两个元素是否在同一集合中的问题。Union-Fin…

编译支持播放H265的cef控件

接着在上次编译的基础上增加h265支持编译支持视频播放的cef控件&#xff08;h264&#xff09; 测试页面&#xff0c;直接使用cef_enhancement,里边带着的那个html即可&#xff0c;h265视频去这个网站下载elecard,我修改的这个版本参考了里边的修改方式&#xff0c;不过我的这个…

用友政务财务系统FileDownload接口存在任意文件读取漏洞

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 用友政务财务系统是由用友软件开发的一款针对政府机…

maven-idea新建和导入项目

全局配置 新建项目 需要新建的文件夹 src/testsrc/test/javasrc/main/java 注&#xff1a;1、新建Java-class&#xff0c;输入.com.hello.hellomaven 2、快捷键psvm显示 public static void main(String[] args) {.... } package com.hello;public class hellomaven {publ…

初学python记录:力扣1146. 快照数组

题目&#xff1a; 实现支持下列接口的「快照数组」- SnapshotArray&#xff1a; SnapshotArray(int length) - 初始化一个与指定长度相等的 类数组 的数据结构。初始时&#xff0c;每个元素都等于 0。void set(index, val) - 会将指定索引 index 处的元素设置为 val。int sna…