Vue3学习笔记+报错记录

文章目录

    • 1.创建Vue3.0工程
      • 1.1使用vue-cli创建
      • 1.2 使用vite创建工程
      • 1.3.分析Vue3工程结构
    • 2.常用Composition
      • 2.1 拉开序幕的setup
      • 2.2 ref函数_处理基本类型

1.创建Vue3.0工程

1.1使用vue-cli创建

查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
在这里插入图片描述
如果不是,则重新安装或升级你的@vue/cli

npm install -g @vue/cli

创建vue项目,去你想创建的目录下,执行该语句

vue create vue3_teat

出现报错,解决问题参考博客npm install安装时一直idealTree:npm: sill idealTree buildDeps解决方案
在这里插入图片描述
需要更换一下镜像网站,进入cmd后输入

npm config set registry https://registry.npmmirror.com

查看是否成功

npm config get registry

创建成功页面
在这里插入图片描述
启动项目,注意路径要切换到项目里

cd vue3_test
npm run serve

在这里插入图片描述
最后复制地址到浏览器运行查看

1.2 使用vite创建工程

什么是vite? --新一代前端构建工具
现在这一代构建工具是webpack
vite的启动速度会更快,动态引用(代码分割)

传统构建与vite构建对比?
传统的是先打包好再启动服务器,vite是先启动服务器,再按需编译,不再等待整个应用编译完成。

1.3.分析Vue3工程结构

在这里插入图片描述
构造函数与工厂函数区别?
构造函数需要通过new关键字调用,工厂函数无需通过new关键字调用

2.常用Composition

2.1 拉开序幕的setup

1.Vue3中的一个新的配置项,值为一个函数
2.组件中所用到的:数据、方法等,均要配置在setup中

3.setup函数的两种返回值
如果返回一个对象,则对象中的属性,方法,在模板中均可以直接使用!!!
即我写在return里面的属性、方法在template中是可以直接使用的
如果返回一个渲染函数,则可以自定义渲染内容

<template><h1>我是App组件</h1><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button @click="sayHello">说话</button>
</template><script>
export default {name: 'App',//此处只是测试一下setup,暂时不考虑响应式的问题setup:function(){//数据,所谓数据就是直接定义变量let name = '张三'let age = 18//方法function sayHello(){alert(`我叫${this.name},我${this.age}岁了,你好啊!`)}return{name,age,sayHello}}
}
</script>

4.vue2与vue3尽量不要混用
vue2配置(data,methos,computed…)中可以访问到setup中的属性,方法。
但是setup中不能访问到vue2配置(data,methods,computed…)
如果有重名,setup优先
5.setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性

2.2 ref函数_处理基本类型

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

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

相关文章

无缝投屏技巧:怎样将Windows电脑屏幕共享到安卓手机?

使用屏幕共享技术的好处是多方面的。首先&#xff0c;它为远程协助提供了极大的便利。当用户遇到电脑操作难题时&#xff0c;技术支持人员可以远程查看用户的屏幕&#xff0c;实时指导解决问题&#xff0c;就像他们身临其境一样。其次&#xff0c;这种技术也为教育和培训带来了…

Python PDF页面设置 -- 旋转页面、调整页面顺序

在将纸质文档扫描成PDF电子文档时&#xff0c;有时可能会出现页面方向翻转或者页面顺序混乱的情况。为了确保更好地浏览和查看PDF文件&#xff0c;本文将分享一个使用Python来旋转PDF页面或者调整PDF页面顺序的解决方案。 目录 使用Python旋转PDF页面 使用Python调整PDF页面…

Vue组件中的v-model(深入解析)

基本用法 v-model 可以在组件上使用以实现双向绑定。 从 Vue 3.4 开始&#xff0c;推荐的实现方式是使用 defineModel() 宏&#xff1a; <!-- Child.vue --> <script setup> const model defineModel()function update() {model.value } </script><templ…

燃气管网安全运行监测系统功能介绍

燃气管网&#xff0c;作为城市基础设施的重要组成部分&#xff0c;其安全运行直接关系到居民的生命财产安全和城市的稳定发展。然而&#xff0c;随着城市规模的不断扩大和燃气使用量的增加&#xff0c;燃气管网的安全运行面临着越来越大的挑战。为了应对这些挑战&#xff0c;燃…

备考ICA----Istio实验16---HTTP流量授权

备考ICA----Istio实验16—HTTP流量授权 1. 环境准备 kubectl apply -f istio/samples/bookinfo/platform/kube/bookinfo.yaml kubectl apply -f istio/samples/bookinfo/networking/bookinfo-gateway.yaml访问测试 curl -I http://192.168.126.220/productpage2. 开启mtls …

Linux——线程控制

目录 前言 一、线程创建 1.创建线程 2.线程传递结构体 3.创建多线程 4.收到信号的线程 二、线程终止 三、线程等待 四、线程分离 五、取消线程 六、线程库管理的原理 七、站在语言角度理解pthread库 八、线程的局部存储 前言 前面我们学习了线程概念和线程创建&…

Topaz Video AI for Mac v5.0.0激活版 视频画质增强软件

Topaz Video AI for Mac是一款功能强大的视频处理软件&#xff0c;专为Mac用户设计&#xff0c;旨在通过人工智能技术为视频编辑和增强提供卓越的功能。这款软件利用先进的算法和深度学习技术&#xff0c;能够自动识别和分析视频中的各个元素&#xff0c;并进行智能修复和增强&…

k8s + springcloud 微服务开发调试工具kt Connect的使用

概览 KtConnect(全称Kubernetes Toolkit Connect)是一款基于Kubernetes环境用于提高本地测试联调效率的小工具。 通过这个工具,可以不在本地启动所有服务,只需启动当前开发的服务即可,其它服务使用的是部署在k8s集群的实例,如下图: Reference 官方文档:https://gith…

vCenter Server出现no healthy upstream的解决方法

https://blog.51cto.com/wangchunhai/4907250 访问vCenter 7.0 地址后&#xff0c;页面出现“no healthy upstream”,无法正常登录vCenter&#xff0c;重启后依旧如此&#xff0c;该故障的前提是没有对vCenter做过任何配置&#xff0c;如下图所示。 尝试登录"VMware vCen…

35岁,一切重新开始

今天是休假的第9天了。虽然一直在准备面试&#xff0c;但是面试了几家&#xff0c;但是都不是很理想&#xff0c;虽然手上也拿到了两个offer&#xff0c;但是都不是很理想。其实内心是十分焦虑的。 现在也在积极的准备面试&#xff0c;但是说实话&#xff0c;心里很慌&#xff…

左、右值(C++基础)

左、右值 左值&#xff1a;有地址的值 右值&#xff1a;字面量的值&#xff0c;无地址&#xff08;临时对象&#xff09; static int i 10; int& getValue() {return i; }getValue() 5;i 7;std::cout << i << std::endl; 返回参数带&的方法可接收右…

写时拷贝技术

不采用写时拷贝,如何fork? 第一:复制开销比较大; 第二:占用内存空间; 所以我们对fork复制进程的过程就做了一个优化-----写时拷贝技术; 综上,就是fork的时候,子进程直接把父进程的页表复制过来,子进程发生写入(修改)的时候才分配内存复制,然后进行相应的页表修改.写时拷贝是…

使用deepspeed小记

1. 减少显存占用的历程忠告 医学图像经常很大&#xff0c;所以训练模型有时候会有难度&#xff0c;但是现在找到了很多减少显存的方法。 不知道为什么&#xff0c;使用transformers的trainer库确确实实会减少显存的占用&#xff0c;即使没有使用deepspeed&#xff0c;占用的显…

【蓝桥杯嵌入式】11届程序题刷题记录及反思

一、题目介绍 按键输入&#xff1a;短按 模拟电压输出&#xff1a;ADC LCD显示 PWM输出&#xff1a;PA6,PA7 二、usr.c #include "usr.h" #include "lcd.h" #include "stdio.h" #include "tim.h" #include "adc.h" /*v…

Ps:颜色查找

颜色查找 Color Lookup命令通过应用预设的 LUT 来改变图像的色彩和调性&#xff0c;从而为摄影师和设计师提供了一种快速实现复杂色彩调整的方法&#xff0c;广泛应用于颜色分级、视觉风格的统一和创意色彩效果的制作。 Ps菜单&#xff1a;图像/调整/颜色查找 Adjustments/Colo…

C++11---右值引用(深度讲解)

简要介绍 右值引用是C11的新特性,无论左值引用还是右值引用&#xff0c;都是在给对象取别名 什么是左值 什么是右值 1.左值,左值引用 左值是一个数据的表达式(例如变量或者解引用后的指针),我们可以对其进行取地址和修改赋值,左值可以出现在赋值符号的左边,而右值不能出现在…

C语言 练习题

目录 1.统计二进制中1的个数 方法1 方法2 方法3 2.求两个数二进制中不同位的个数 方法1 方法2 3.打印整数二进制的奇数位和偶数位 4.用“ * ”组成的X形图案 5.根据年份和月份判断天数 6.结语 1.统计二进制中1的个数 【题目内容】 写一个函数返回参数二进制中 1 的个…

YARN集群 和 MapReduce 原理及应用

YARN集群模式 本文内容需要基于 Hadoop 集群搭建完成的基础上来实现 如果没有搭建&#xff0c;请先按上一篇: <Linux 系统 CentOS7 上搭建 Hadoop HDFS集群详细步骤> 搭建&#xff1a;https://mp.weixin.qq.com/s/zPYsUexHKsdFax2XeyRdnA 配置hadoop安装目录下的 etc…

web-AOP

AOP基础 AOP进阶 通知顺序和类型 切入点表达式 连接点

任意设定蜂鸣器响的次数

这次来分享一个比较有意思的知识点 控制蜂鸣器响的次数 首先&#xff0c;我自己画了一个蜂鸣器的小模块&#xff0c;用来测试的。如下图 实物和原理图如上图 下面是代码解释