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

news2024/10/6 14:29:13

目录

  • 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.coloradmin.cn/o/1627404.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaSE字节缓冲流

欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的延伸的后端开发者。 博客特色&#xff1a; 在我的博客中&a…

解决minIO 文件上传回显报 403 问题

一、问题描述&#xff1a; minIO 上传文件回显时 提示 403 Forbidden 二、问题原因&#xff1a; minIO 中文件相对应的 buckets 权限问题造成 三、解决办法&#xff1a; 进入 minIO 控制台&#xff0c;将 buckets 中 access Policy 改为 public

监听器模式(三)

一、介绍 监听器模式是一种软件设计模式&#xff0c;在对象的状态发生改变时&#xff0c;允许依赖它的其他对象获得通知。在Java中&#xff0c;可以使用接口和回调机制来实现监听器模式。 二、代码实例 1、事件Event类 package com.xu.demo.listener;// 事件类 public class…

go设计模式之抽象工厂模式

抽象工厂模式 提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。 工厂方法模式通过引入工厂等级结构&#xff0c;解决了简单工厂模式中工厂类职责太重的问题&#xff0c;但由于工厂方法模式中的每个工厂只生产一类产品&#xff0c;可能会导致…

【禅道客户案例】同方智慧能源数智化转型新实践 禅道助力前行

同方智慧能源是同方股份有限公司的骨干企业。依托中核集团、清华大学的科技优势&#xff0c;坚持技术和资源双核驱动&#xff0c;基于30多年行业积淀&#xff0c;面向建筑、交通、工业、北方供热、数据中心等主要用能场景提供设计咨询、产品技术、投资建设、运营服务&#xff0…

每天一题crypto(8)---RSA(相邻素数)

题目&#xff1a; p getPrime(512) q gmpy2.next_prime(p) from Crypto.Util.number import * import gmpy2 flag bNSSCTF{******}p getPrime(512) q gmpy2.next_prime(p) n p*q e 65537 phi (p-1)*(q-1)m bytes_to_long(flag)c pow(m, e, n)print(fn {n}) print(f…

Linux网络编程---多进/线程并发服务器

一、多进程并发服务器 实现一个服务器可以连接多个客户端&#xff0c;每当accept函数等待到客户端进行连接时 就创建一个子进程 思路分析&#xff1a; 核心思路&#xff1a;让accept循环阻塞等待客户端&#xff0c;每当有客户端连接时就fork子进程&#xff0c;让子进程去和客户…

【调研分析】机器视觉及其系统

机器视觉 定义 机器视觉主要利用计算机模拟人的视觉功能&#xff0c;但不仅限于人眼的简单延伸&#xff0c;而是具备人脑的部分功能&#xff0c;即从客观事物的图像中提取信息、进行处理并加以理解&#xff0c;从而应用于实际的检测识别、测量和控制过程。 机器视觉系统组成 …

JavaEE >> Spring Boot(2)

Spring Boot 配置文件 前面的文章已经介绍了 Spring Boot 项目的创建&#xff0c;上文&#xff0c;本文介绍 Spring Boot 的简单进阶使用。 配置文件的作用 项目中的所有重要数据都是在配置文件中配置的&#xff0c;例如&#xff1a; 数据库的连接信息&#xff08;包括数据…

BossCMS RCE(下)

未授权漏洞 在登录后台的时候通过查看添加用户功能&#xff0c;看能不能挖掘sql注入漏洞&#xff0c;结果发现了个大问题&#xff0c;一个比较好玩的权限逻辑问题。这里添加用户的路由 我们跟进到manager.class.php里面的add()方法&#xff0c;这里先into::basc_class(admin)&…

DS进阶:并查集

一、并查集的原理 在一些应用问题中&#xff0c;需要将n个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个单元素集合&#xff0c;然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复用到查询某一个元素归属于那个集合的运算。适合于描述这…

局部多项式近似与 AMPM 算法

kappa3; %已在您的代码中定义% 定义窗口大小 windowSize (2*kappa1);% 初始化梯度估计值 [rows, cols] size(wrappedPhase); phi_y zeros(rows, cols); phi_x zeros(rows, cols);% 遍历每个窗口 for m 1kappa:rows-kappafor n 1kappa:cols-kappa% 提取局部窗口Z_mn wrap…

python 使用flask_httpauth和pyjwt实现登录权限控制

最近需要用到&#xff0c;学习了一下记录 首先安装依赖 pip install Flask-HTTPAuth pyjwt passlib Welcome to Flask-HTTPAuth’s documentation! — Flask-HTTPAuth documentation Welcome to PyJWT — PyJWT 2.8.0 documentation Passlib 1.7.4 documentation — Passl…

【代码随想录刷题记录】LeetCode27移除元素

题目地址 1. 思路 1.1 基本思路及代码的初步实现 基本思路大体上和卡尔老师的想法是一致的&#xff0c;详见代码随想录&#xff1a;数组&#xff1a;移除元素&#xff0c;暴力法大家都能想到&#xff0c;我这里写一下算法时间复杂度为 O ( n ) O(n) O(n)时候的思路&#xff…

短视频矩阵营销系统 poihuoqu 任意文件读取漏洞复现

0x01 产品简介 短视频矩阵营销系统是由北京华益云数据科技有限公司开发的一款产品,这家公司专注于抖音短视频矩阵营销系统的研发,致力于为企业提供全方位的短视频营销解决方案。华益云抖销短视频矩阵系统可以帮助企业快速搭建多个短视频账号,实现内容的批量制作和发布,提高…

ShardingSphere 5.x 系列【25】 数据分片原理之 SQL 解析

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 分片执行流程1.1 Simple Push Down1.2 SQL Federation2. SQL 解析2.1 解析…

SystemUI KeyButtonView setDarkIntensity 解析

继承自 ImageView KeyButtonDrawable intensity为0时按键颜色为白色。 intensity为1时黑色为的调用堆栈&#xff1a; java.lang.NullPointerException: Attempt to invoke virtual method int java.lang.String.length() on a null object referenceat com.android.systemui.…

嵌入式学习Day18

一、输入两个数&#xff0c;实现排序 代码&#xff1a; #!/bin/bashread -p "please enter n m:" n m if [ $n -gt $m ] thentemp$nn$mm$temp fi echo $n $m运行结果 二、输入一个数判断是否水仙花数 代码&#xff1a; echo narcissistic number read -p "p…

店匠科技技术产品闪耀,引领新质生产力发展

在科技飞速发展的今天,新质生产力正成为推动社会进步和经济高质量发展的核心力量。店匠科技,作为一家致力于为全球B2C电商提供产品和技术解决方案的领先企业,其技术产品不仅体现了新质生产力的创新特质,更在推动电商行业转型升级中发挥了重要作用。 新质生产力,以创新为主导,摆…

Java设计模式 _创建型模式_原型模式(Cloneable)

一、原型模式 1、原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能比较好。一般对付出较大代价获取到的实体对象进行克隆操作&#xff0c;可以提升性能。 2、实现思路&#xff1a; &#xff08;1&#xff09;、需要克隆的…