【vue3语法】开发使用创建项目等

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、vue3
      • 创建vue3
      • v2函数式、v3组合式api
      • 响应式方法ref、reactive
      • 计算属性conputed
      • 监听属性wacth
      • vue3 选项式生命周期
      • 父子通信
        • 父传子
          • defineProps编译宏
        • 子传父
          • defineEmits方法
        • 获取DOM ref
          • defineExpose
      • 跨组件通信 provied & inject
      • vue3一些定义define
        • 1、defineOptions 可以声明和setup平级的
        • 2、 defineExpose 暴露当前组件方法和函数
        • 3、 defineEmits 子父通信
        • 4、 defineProps 父子通信
        • 5、 defineModel
  • 二、Pinia
      • 安装Pinia,及使用
  • 总结


前言

一、vue3

创建vue3

npm init vue@latest

在这里插入图片描述

v2函数式、v3组合式api

函数式
在这里插入图片描述
组合式
>在这里插入图片描述

响应式方法ref、reactive

ref script里面使用要.value 简单类型或复杂类型
reactive 复杂类型

<script setup>
import { ref,reactive } from "vue"
const a = ref(0)
console.log(a.value) // 0
const clicks=()=>{
a.value++
}const b = reactive({
color:"1234"
})</script>
<template>
<div>
{{a}}
<button @click=”clicks“></button>
</div>
</template>

在这里插入图片描述

计算属性conputed

conputed 计算属性应该只包含计算逻辑
避免直接修改计算属性的值
支持get,set

<script setup>
import { ref,conputed } from "vue"
const list = ref([1,2,3,4,5,6,7,8,9])const a = conputed(()=>{return list.value.filter((item)=>{return item>3}) 
}) // a 为[4,5,6,7,8,9]
</script>

监听属性wacth

wacth 支持浅监听、深度监听

<script>
const s =ref(0)
// 浅监听
const a = wacth([s]/**[s] //监听数组s  //监听单个属性()=>s.age //监听复杂类型里的单个属性*/,(newValue,oldValue)=>{
})// 深度监听
const a = wacth([s]/**s 可写数组和监听单个*/,(newValue,oldValue)=>{
}{
deep:true;//深度监听 复杂数据等等
immediate:true //页面加载时执行一次
})
<?script>

在这里插入图片描述### 生命周期

vue3 选项式生命周期

beforeCreate/created 变成setup
beforeUnmount/Unmounted
其他与v2一样

组合式api
setup 初始化
其他在选项是前加on

<script setup></script>

在这里插入图片描述

父子通信

父传子

父":"动态声明,子defineProps接收

defineProps编译宏
<template>
<Bate mesage="子"></Bate>//子组件
</template>
<script>
const a = defineProps({
mesage:"123"
})
</script>

在这里插入图片描述

子传父

emit传递,@接收

defineEmits方法
<template>
<Bate @changes="(e)=>{console.log(e);/**e为5*/}"></Bate>//子组件
</template>
<script>
const emit = defineEmits(['changes'])//声明
const a = ()=>{
emit('changes',5)传递
}
</script>

在这里插入图片描述在这里插入图片描述

获取DOM ref

ref 获取DOM
ref 获取组件 需要暴露组件内部方法,默认不暴露
ref 声明响应式数据

defineExpose

暴露setup方法可以在父组件访问

<script setup>
import {ref} from "vue"
const inp =ref(null)
onMounted(()=>{
console.log(inp.value)
})
defineExpose({
inp,
})
</script>
<template>
<input type="text"/ ref="inp">//绑定ref
</template>

在这里插入图片描述

跨组件通信 provied & inject

顶层组件

const key= '123'
provied('key', key)

在这里插入图片描述

底层组件

const key= inject('key')
console.log(key)// 返回值123

在这里插入图片描述

vue3一些定义define

1、defineOptions 可以声明和setup平级的

在这里插入图片描述

2、 defineExpose 暴露当前组件方法和函数
<script>
defineExpose({
inp,
})
</script>
3、 defineEmits 子父通信
<script>
const emit = defineEmits(['changes'])//声明
const a = ()=>{
emit('changes',5)传递
}
</script>
4、 defineProps 父子通信
<script>
const a = defineProps({
mesage:"123"
})
</script>
5、 defineModel

动态显示父子传值
实验性质的宏

使用v-model需要父传子,然后监听修改值
在这里插入图片描述在这里插入图片描述

defineModel的写法
v-model 父组件传值,
在这里插入图片描述

在这里插入图片描述
启动defineModel,重新运行项目
在这里插入图片描述

二、Pinia

安装Pinia,及使用

npm init vue@latest 创建vue项目可选Pinia直接安装好
npm install pinia

  • main.ts
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import router from './router'
import pinia from './store'
// import 'element-plus/dist/index.css'
createApp(App).use(router).use(pinia).mount('#app')
  • src下创建store/index.ts
import { createPinia } from 'pinia'
// * pinia持久化数据,可以将 pinia 的状态持久化到本地存储中,以便在页面刷新或重新加载后保持状态的一致性。
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'// 引入自定方法
import userAppStrote from './user/index'
export { userAppStrote }const pinia = createPinia()// 注册持久化插件
pinia.use(piniaPluginPersistedstate)export default pinia
  • 创建store/user/index.ts
  • 声明方法等,persist: true 开启持久化
import { defineStore } from 'pinia'
import { userTpye } from './types'
import { productType } from '@/api'
const userAppStrote = defineStore('useAppStrote',(): userTpye => {// 产品类型const ProductType = ref('2')productType().then((res: any) => {ProductType.value = res.data.ProductType})// 防抖var timer: any = nullconst AntiShake = (request: any, params: object, time: number) => {return new Promise(async r => {if (timer == null) {timer = setTimeout(() => {request(params).then((res: any) => {timer = nullr(res)})}, time * 1000)} else {r(false)}})}return {ProductType,productType,timer,AntiShake,}},{persist: true, // 开起持久化}
)export default userAppStrote
  • 创建store/user/type.ts 类型定义
// 类型定义
export interface userTpye {ProductType: Ref<string>productType: () => Promise<unknown>timer: anyAntiShake: (arg0: any, arg1: object, arg3: number) => Promise<unknown>
}
  • 使用pinia
  • userStrote或使用storeToRefs解构
import { userAppStrote } from '@/store'
import { storeToRefs } from 'pinia'
const userStrote = userAppStrote()
// userStrote.ProductType
const rouer = useRouter()
const { ProductType } = storeToRefs(userStrote)console.log(ProductType)

总结

vue语法,以及基本配置

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

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

相关文章

互联网加竞赛 机器视觉opencv答题卡识别系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 答题卡识别系统 - opencv python 图像识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分…

并查集例题(食物链)C++(Acwing)

代码&#xff1a; #include <iostream>using namespace std;const int N 50010;int n, m; int p[N], d[N];int find(int x) {if(p[x] ! x){int t find(p[x]);d[x] d[p[x]];p[x] t;}return p[x]; }int main() {scanf("%d%d", &n, &m);for(int i 1…

linux前端部署

安装jdk 配置环境变量 刷新配置文件 source profile source /etc/profile tomcat 解压文件 进去文件启动tomcat 开放tomcat的端口号 访问 curl localhsot:8080 改配置文件 改IP,改数据库名字&#xff0c;密码&#xff0c; 安装数据库 将war包拖进去 访问http:…

【Python笔记-设计模式】代理模式

一、说明 代理模式是一种结构型设计模式&#xff0c;提供对象的替代品或其占位符。代理控制着对于原对象的访问&#xff0c;并允许在将请求提交给对象前后进行一些处理。 (一) 解决问题 控制对对象的访问&#xff0c;或在访问对象前增加额外的功能或控制访问 (二) 使用场景…

apidoc接口文档的自动更新与发布

文章目录 一、概述二、环境准备三、接口文档生成1. 下载源码2. 初始化3.执行 四、文档发布五&#xff0c;配置定时运行六&#xff0c;docker运行七&#xff0c;不足与优化分析 一、概述 最近忙于某开源项目的接口文档整理&#xff0c;采用了apidoc来整理生成接口文档。 apidoc…

深度学习系列59:文字识别

1. 简单文本&#xff1a; 使用google加的tesseract&#xff0c;效果不错。 首先安装tesseract&#xff0c;在mac直接brew install即可。 python调用代码&#xff1a; import pytesseract from PIL import Image img Image.open(1.png) pytesseract.image_to_string(img, lan…

MES管理系统生产过程控制的核心要素

MES&#xff08;制造执行系统&#xff09;是为优化制造业生产过程和管理而设计的软件系统&#xff0c;其核心要素包括&#xff1a; 工单管理&#xff1a;工单管理是MES系统最基本的功能之一&#xff0c;它可以跟踪和管理各种类型的工单&#xff0c;如生产工单、维修工单和质量…

Spring篇----第六篇

系列文章目录 文章目录 系列文章目录前言一、spring 支持集中 bean scope?二、spring bean 容器的生命周期是什么样的?三、什么是 spring 的内部 bean?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男…

Java EE改名Jakarta EE,jakarta对程序开发的影响

一、前言 很多Java程序员在使用新版本的Spring6或者springboot3版本的时候&#xff0c;发现了一些叫jakarta的包。我在阅读开源工作流引擎camunda源代码的时候&#xff0c;也发展了大量jakarta的工程包。 比如&#xff1a;camunda的webapps编译工程就提供了2种方式javax和jaka…

SCI一区 | Matlab实现ST-CNN-MATT基于S变换时频图和卷积网络融合多头自注意力机制的多特征分类预测

SCI一区 | Matlab实现ST-CNN-MATT基于S变换时频图和卷积网络融合多头自注意力机制的故障多特征分类预测 目录 SCI一区 | Matlab实现ST-CNN-MATT基于S变换时频图和卷积网络融合多头自注意力机制的故障多特征分类预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍…

论文阅读:Ground-Fusion: A Low-cost Ground SLAM System Robust to Corner Cases

前言 最近看到一篇ICRA2024上的新文章&#xff0c;是关于多传感器融合SLAM的&#xff0c;好像使用了最近几年文章中较火的轮式里程计。感觉这篇文章成果不错&#xff0c;代码和数据集都是开源的&#xff0c;今天仔细读并且翻译一下&#xff0c;理解创新点、感悟研究方向、指导…

【杂谈】还能这么骗Github开源者?

起因 StarkNet给Github前5000的账户空投了一波STRK代币,一般有资格获得空投的开发者&#xff0c;大概能获得 110个 STRK 代币&#xff0c;按目前价格计算大概 1500人民币左右。 什么是有资格的开发者呢&#xff1f;按 Starknet要求&#xff0c;如果你给在 GitHub上排名前 5000…

基于SSM的废品买卖回收管理系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的废品买卖回收管理系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spri…

Vue+SpringBoot打造开放实验室管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实验管理模块2.4 实验设备模块2.5 实验订单模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示五、样例代码5.1 查询实验室设备5.2 实验放号5.3 实验预定 六、免责说明 一、摘…

设计模式-创建型模式-建造者模式

建造者模式&#xff08;Builder Pattern&#xff09;&#xff1a;将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。建造者模式是一种对象创建型模式。 建造者模式一步一步地创建一个复杂的对象&#xff0c;它允许用户只通过指定复杂对象…

windows 中, bash: conda: command not found(已解决)

git bash 中运行conda命令&#xff0c;出现这种错误&#xff0c;原因是你没有在git bash中 配置conda&#xff0c;导致git bash无法找到conda 那就配置一下&#xff0c;找到你的conda的安装位置下的bash.sh文件&#xff0c;一般在安装位置&#xff08;我的安装在C盘的自定义路径…

RocketMQ生产环境常见问题分析与总结

RocketMQ生产环境常见问题分析与总结 如何保证消息不丢失 消息丢失场景 对于跨网络的节点可能会丢消息&#xff0c;因为MQ存盘都会先写入OS的PageCache中&#xff0c;然后再让OS进行异步刷盘&#xff0c;如果缓存中的数据未及时写入硬盘就会导致消息丢失 生产端到Broker端Brok…

nc开发刚导入项目eclipse出现莫名其妙的错误,红叉,感叹号,文件missing

解决类出现红叉 解决感叹号&#xff0c;文件missing 其他问题 右上角的视图&#xff0c;要选择java&#xff0c;如果是javaEE也会有一些文件没有展示出来。

2024全国水科技大会暨土壤和地下水污染防治与修复技术创新论坛(七)

论坛召集人&#xff1a;李 辉 上海大学环境与化学工程学院教授 一、会议背景 十四五”时期&#xff0c;我国生态文明建设进入以减污降碳协同增效为重点战略方向&#xff0c;促进经济社会发展全面绿色转型&#xff0c;实现生态环境质量改善由量变到质变的关键时期。聚焦土壤与地…

挑战杯 基于机器学习与大数据的糖尿病预测

文章目录 1 前言1 课题背景2 数据导入处理3 数据可视化分析4 特征选择4.1 通过相关性进行筛选4.2 多重共线性4.3 RFE&#xff08;递归特征消除法&#xff09;4.4 正则化 5 机器学习模型建立与评价5.1 评价方式的选择5.2 模型的建立与评价5.3 模型参数调优5.4 将调参过后的模型重…