前端工程化 - 快速通关 - vue

目录

npm

2.1环境

2.2命令

2.3使用流程

Vite 

3.1简介

3.2实战

Vue3

 4.1组件化

4.2SFC 

4.3Vue工程

4.4基础使用 

4.5进阶用法

4.6总结


npm


npm 是 nodejs 中进行 包管理 的工具;
下载:Node.js — Run JavaScript Everywhere
 

2.1环境

●安装Node.js
●配置 npm

npm config set registry https://registry.npmmirror.com  #设置国内阿里云镜像源
npm config get registry  #查看镜像源

2.2命令

  • ●npm init: 项目初始化;
    • ○npm init -y:默认一路yes,不用挨个输入信息
  • ●npm install 包名:安装js包到项目中(仅当前项目有效)。指定 包名,或者 包名@版本号
    • ○npm install -g: 全局安装,所有都能用
    • ○可以去 npm仓库 搜索第三方库
  • ●npm update 包名:升级包到最新版本
  • ●npm uninstall 包名:卸载包
  • ●npm run:项目运行

2.3使用流程

Java:
●项目创建:Java环境 ==》 maven 初始化 ==》 添加依赖 ==》运行项目
●项目迁移:Java环境 ==》 maven 下载依赖 ==》运行项目

Vite 

3.1简介

快速创建前端项目脚手架
●统一的工程化规范:目录结构、代码规范、git提交规范 等
●自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作,可以通过集成自动化部署脚本,自动将代码部署到测试、生产环境等;

3.2实战

创建项目


npm create vite #根据向导选择技术栈

安装依赖

npm install #安装项目所有依赖npm install axios #安装指定依赖到当前项目
npm install -g xxx # 全局安装

项目启动

npm run dev #启动项目

项目打包

npm run build #构建后 生成 dist 文件夹

项目部署

●前后分离方式:需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
●前后不分离方式:把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面

Vue3

2023 年前端框架各个国家使用占比。

我们使用 vite 创建 vue项目脚手架,并测试Vue功能

npm create vite #根据向导选择技术栈

 4.1组件化


组件系统是一个抽象的概念;

  • ●组件:小型、独立、可复用的单元
  • ●组合:通过组件之间的组合、包含关系构建出一个完整应用

几乎任意类型的应用界面都可以抽象为一个组件树;

4.2SFC 

Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中

<script setup>//编写脚本
</script><template>//编写页面模板
</template><style scoped>//编写样式
</style>

4.3Vue工程

运行原理

4.4基础使用 
 

插值

<script setup>
//基本数据
let name = "张三"
let age = 18//对象数据
let car = {brand: "奔驰",price: 777
}
</script><template><p> name: {{name}} </p><p> age: {{age}} </p><div style="border: 3px solid red"><p>品牌:{{car.brand}}</p><p>价格:{{car.price}}</p></div>
</template><style scoped></style>vue

事件绑定:v-on

使用 v-on指令,可以为元素绑定事件。可以简写为 @

<script setup>
//定义事件回调
function buy(){alert("购买成功");
}
</script>
<template><button v-on:click="buy">购买</button><button @click="buy">购买</button>
</template>
<style scoped>
</style>

Modifiers:修饰符详情
事件处理 | Vue.js


条件判断:v-if

循环:v-for
内置指令 | Vue.js;后期我们都会用到。

image.png


属性绑定

响应式 - ref()
数据的动态变化需要反馈到页面;
Vue通过ref()和reactive()包装数据,将会生成一个数据的代理对象。vue内部的 基于依赖追踪的响应式系统 就会追踪感知数据变化,并触发页面的重新渲染。

使用方式
使用步骤:
1使用 ref() 包装原始类型、对象类型数据,生成 代理对象
2任何方法、js代码中,使用 代理对象.value 的形式读取和修改值
3页面组件中,直接使用 代理对象
注意:推荐使用 const(常量) 声明代理对象。代表代理对象不可变,但是内部值变化会被追踪。

<script setup>
import { ref } from 'vue'const count = ref(0)function increment() {count.value++
}
</script><template><button @click="increment">{{ count }}</button>
</template>

深层响应性

import { ref } from 'vue'const obj = ref({nested: { count: 0 },arr: ['foo', 'bar']
})function mutateDeeply() {// 以下都会按照期望工作obj.value.nested.count++obj.value.arr.push('baz')
}



 

响应式 - reactive()
使用步骤:
1使用 reactive() 包装对象类型数据,生成 代理对象
2任何方法、js代码中,使用 代理对象.属性的形式读取和修改值
3页面组件中,直接使用 代理对象.属性

import { reactive } from 'vue'const state = reactive({ count: 0 })<button @click="state.count++">
{{ state.count }}
</button>

 基本类型用 ref(),对象类型用 reactive(),ref 要用 .value,reactive直接 . 。页面取值永不变。
也可以 ref 一把梭,大不了 天天 .value

表单绑定

复制如下模板到组件,编写你的代码,实现表单数据绑定

<div style="display: flex;"><div style="border: 1px solid black;width: 300px"><form><h1>表单绑定</h1><p style="background-color: azure"><label>姓名(文本框):</label><input/></p><p style="background-color: azure"><label>同意协议(checkbox):</label><input type="checkbox"/></p><p style="background-color: azure"><label>兴趣(多选框):</label><br/><label><input type="checkbox" value="足球"/>足球</label><label><input type="checkbox" value="篮球"/>篮球</label><label><input type="checkbox" value="羽毛球"/>羽毛球</label><label><input type="checkbox" value="乒乓球"/>乒乓球</label></p><p style="background-color: azure"><label>性别(单选框):</label><label><input type="radio" name="sex" value="男">男</label><label><input type="radio" name="sex" value="女">女</label></p><p style="background-color: azure"><label>学历(单选下拉列表):</label><select><option disabled value="">选择学历</option><option>小学</option><option>初中</option><option>高中</option><option>大学</option></select></p><p style="background-color: azure"><label>课程(多选下拉列表):</label><br/><select multiple><option disabled value="">选择课程</option><option>语文</option><option>数学</option><option>英语</option><option>道法</option></select></p></form></div><div style="border: 1px solid blue;width: 200px"><h1>结果预览</h1><p style="background-color: azure"><label>姓名:</label></p><p style="background-color: azure"><label>同意协议:</label></p><p style="background-color: azure"><label>兴趣:</label></p><p style="background-color: azure"><label>性别:</label></p><p style="background-color: azure"><label>学历:</label></p><p style="background-color: azure"><label>课程:</label></p></div>
</div>

计算属性 - computed

计算属性:根据已有数据计算出新数据

<script setup>
import {computed, reactive, toRef, toRefs} from "vue";//省略基础代码const totalPrice = computed(()=>{return price.value * num.value - coupon.value*100
})</script><template><div class="car"><h2>优惠券:{{ car.coupon }} 张</h2><h2>数量:{{ car.num }}</h2><h2>单价:{{ car.price }}</h2><h1>总价:{{totalPrice}}</h1><button @click="getCoupon">获取优惠</button><button @click="addNum">加量</button><button @click="changePrice">加价</button></div></template><style scoped></style>

4.5进阶用法

监听 - watch

watch(num, (value, oldValue, onCleanup) => {console.log("newValue:" + value + ";oldValue:" + oldValue)onCleanup(() => {console.log("onCleanup....")})
})

生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。

生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。
常用的钩子:

●onMounted(挂载完毕)
●onUpdated(更新完毕)
●onBeforeUnmount(卸载之前)

<script setup>
import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";
const  count = ref(0)
const btn01 = ref()// 生命周期钩子
onBeforeMount(()=>{console.log('挂载之前',count.value,document.getElementById("btn01"))
})
onMounted(()=>{console.log('挂载完毕',count.value,document.getElementById("btn01"))
})
onBeforeUpdate(()=>{console.log('更新之前',count.value,btn01.value.innerHTML)
})
onUpdated(()=>{console.log('更新完毕',count.value,btn01.value.innerHTML)
})
</script><template><button ref="btn01" @click="count++"> {{count}} </button>
</template><style scoped>
</style>


组件传值

父组件给子组件传递值;
单向数据流效果:
●父组件修改值,子组件发生变化
●子组件修改值,父组件不会感知到

//父组件给子组件传递数据:使用属性绑定
<Son :books="data.books" :money="data.money"/>//子组件定义接受父组件的属性
let props = defineProps({money: {type: Number,required: true,default: 200},books: Array
});

子传父 - Emit

props 用来父传子,emit 用来子传父

//子组件定义发生的事件
let emits = defineEmits(['buy']);
function buy(){// props.money -= 5;emits('buy',-5);
}//父组件感知事件和接受事件值<Son :books="data.books" :money="data.money"@buy="moneyMinis"/>

思考:
●利用父子传值即可


插槽 - Slots

<!-- 组件定义 -->
<button class="fancy-btn"><slot></slot> <!-- 插槽出口 -->
</button><!-- 组件使用 -->
<FancyButton>Click me! <!-- 插槽内容 -->
</FancyButton>

默认内容

<button type="submit"><slot>Submit <!-- 默认内容 --></slot>
</button>

具名插槽

<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>

使用: v-slot可以简写为 #

<BaseLayout><template v-slot:header><!-- header 插槽的内容放这里 --></template>
</BaseLayout>

4.6总结

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

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

相关文章

KubeKey 部署 K8s v1.28.8 实战

在某些生产环境下&#xff0c;我们仅需要一个原生的 K8s 集群&#xff0c;无需部署 KubeSphere 这样的图形化管理控制台。在我们已有的技术栈里&#xff0c;已经习惯了利用 KubeKey 部署 KubeSphere 和 K8s 集群。今天&#xff0c;我将为大家实战演示如何在 openEuler 22.03 LT…

使用DBeaver的第2天-使用sql导入数据

使用sql导入数据这块我会仔细的说一下 首先位置一定要放在库上&#xff08;实例&#xff09;&#xff0c;放在表上可不好使用哦 然后点击工具-再点击执行脚本 这样就执行成功了 但是如果你执行失败了&#xff0c;多半可能是因为本地没有部署mysql&#xff0c;记住只有本地有…

【IOS】swift新手踩坑总汇

这里写自定义目录标题 ESTabBarController_swiftQMUIKit ESTabBarController_swift Exception NSException * "调用了 pushViewController 但实际上没 push 成功&#xff0c;viewController&#xff1a;<HuangShan.ViewControllers: 0x106832a00>; superclass: EST…

【强训笔记】day23

NO.1 思路&#xff1a;直接计算结果&#xff0c;先计算怪物可以抗几次攻击&#xff0c;再计算勇士受到的伤害&#xff0c;如果勇士的攻击力大于等于怪物的血量&#xff0c;那么就可以击杀无数只&#xff0c;如果勇士的血量正好是受到攻击的整数倍&#xff0c;那么击杀的怪物数…

前端项目的准备工作

1.下载less或sass&#xff08;如果使用的话&#xff09; pnpm i -D less | pnpm i -D sass &#xff08;-D: 这是一个选项或标志&#xff0c;表示安装的软件包将被添加为开发依赖项&#xff08;devDependencies&#xff09;。开发依赖项是指在开发过程中需要使用的工具…

【信息系统项目管理师知识点速记】风险管理:实施风险应对

实施风险应对是确保项目风险管理计划得以执行的关键步骤,旨在通过监控和执行预先设定的策略来减轻威胁、抓住机遇,以及维持项目目标的一致性。此过程概括如下: 目标: 确保风险应对计划的执行。最小化单个风险的负面影响。最大化利用单个风险带来的机会。持续管理项目范围内…

web agent 学习 3:screen ai

学习论文&#xff1a;ScreenAI: A Vision-Language Model for UI and Infographics Understanding 摘要部分介绍了作者的screenai&#xff0c;是一个专门用于UI和信息图形理解的视觉语言模型。模型利用pix2struct灵活的补丁策略改进了PaLI架构&#xff0c;并在独特的数据集混合…

ubuntu编译pcl时报错

报错如下 cc1plus: warning: -Wabi wont warn about anything [-Wabi] cc1plus: note: -Wabi warns about differences from the most up-to-date ABI, which is also used by default cc1plus: note: use e.g. -Wabi11 to warn about changes from GCC 7 在网上找到了一封邮件…

国外新闻媒体投放:多元化媒体分发投稿平台-大舍传媒

引言 随着全球信息传播的加速和全球化的发展&#xff0c;国外新闻媒体的推广变得越来越重要。在这个数字化时代&#xff0c;多元化的媒体分发投放成为了有效推广的关键。本文将介绍大舍传媒在国外新闻媒体推广中的经验与策略。 国外新闻媒体的重要性 国外新闻媒体是获取国际…

insert语句的锁

insert … select 语句 CREATE TABLE t (id int(11) NOT NULL AUTO_INCREMENT,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),UNIQUE KEY c (c) ) ENGINEInnoDB;insert into t values (null, 1, 1); insert into t values (null, 2, 2); insert into t v…

网页转长图插件html2canvas【前端】

网页转长图插件html2canvas【前端】 前言版权开源推荐网页转长图插件html2canvas【前端】wkImageStorage流程使用后端application.propertiesWkConfigShareControllerImageCleanupTask 前端html2canvas.jsshare.htmlshare.jsgetShare.jsgetShare.html 最后 前言 2024-5-10 18:…

超分辨率重建——CAMixerSR网络训练与推理测试(详细图文教程)

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《暗光增强》 &a…

iOS Swift 中使用 ReplayKit 进行屏幕录制并获取文件路径

在 iOS 开发中&#xff0c;屏幕录制是一项强大的功能&#xff0c;尤其在应用演示、教育教程或游戏录屏等场景中非常有用。Apple 提供了一个名为 ReplayKit 的框架&#xff0c;允许开发者直接在应用中添加屏幕录制功能。本文将详细介绍如何使用 Swift 和 ReplayKit 结合 AVFound…

在做题中学习(56):二维前缀和模板

【模板】二维前缀和_牛客题霸_牛客网 (nowcoder.com) 理解题意&#xff1a; 要求的是(x1,y1) - (x2,y2)这段区间的和。 解法&#xff1a;二维前缀和 1. 和一维前缀和一样&#xff0c;需要有一个同等规模的dp数组&#xff0c;用来保存一段连续区域的和。 在二维dp中&#xff0…

客户案例:CACTER云网关为企业O365系统提供安全新护盾

一、客户背景 某智能驾驶企业是一家国际性的高科技创新型企业&#xff0c;其智能驾驶领域处于全球领先地位&#xff0c;专注于为广大客户提供个性化的智能驾驶解决方案&#xff0c;共建美好智能新时代。 使用产品&#xff1a;CACTER邮件安全云网关 二、痛点难点问题 根据…

最强特征点检测算法 DeDoDe v1/v2

论文地址v1:https://arxiv.org/pdf/2308.08479 论文地址v1:https://arxiv.org/pdf/2404.08928 代码地址:GitHub - Parskatt/DeDoDe: [3DV 2024 Oral] DeDoDe 🎶 Detect, Dont Describe --- Describe, Dont Detect, for Local Feature Matching 实测确实牛X! DeDoDeV1 关…

网安热议 | 中小企面临什么网络安全困扰?中小企网络安全是不是智商税?

近日&#xff0c;Coro 公司表示&#xff0c;许多中小型企业的 IT 人员被开发安全工作中多工具操作的复杂性和安全需求&#xff0c;压得“喘不过气”&#xff0c;导致其可能错过很多关键安全事件告警信息&#xff0c;从而将公司的网络安全置于危险之地。 研究机构采访了美国多行…

Python基本统计分析

常见的统计分析方法 import numpy as np import scipy.stats as spss import pandas as pd 鸢尾花数据集 https://github.com/mwaskom/seaborn-data df pd.read_csv("iris.csv",index_col"species") v1 df.loc["versicolor",:].petal_lengt…

比大小(打擂台)(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//声明比较大小函数max; int max(int a, int b);int main() {//初始化变量值&#xff1b;int i, n, m, a[10];//填充数组&#xff1b;printf("请输入10个数…

数据结构选择题(期末)

1.给定NN的二维数组A&#xff0c;则在不改变数组的前提下&#xff0c;查找最大元素的时间复杂度是&#xff08;A&#xff09;&#xff1a; A.O(N2) B.O(NlogN) C.O(N) D.O(N2logN) 两重循环即O(N2)的时间复杂度 2.与数据元素本身的形式、内容、相对位置、个数无关的是数据的…