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函数_处理基本类型

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

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

相关文章

Mybatis——一对一映射

一对一映射 预置条件 在某网络购物系统中&#xff0c;一个用户只能拥有一个购物车&#xff0c;用户与购物车的关系可以设计为一对一关系 数据库表结构&#xff08;唯一外键关联&#xff09; 创建两个实体类和映射接口 package org.example.demo;import lombok.Data;import …

SV-7101V网络音频终端产品简介

网络广播终端SV-7101V&#xff0c;接收网络音频流&#xff0c;实时解码播放。本设备只有网络广播功能&#xff0c;是一款简单的网络广播终端。提供一路线路输出接功放或有源音箱。 网络广播终端SV-7101V&#xff0c;接收网络音频流&#xff0c;实时解码播放。本设备只有网络广播…

docker容器环境安装记录(MAC M1)(完善中)

0、背景 在MAC M1中搭建商城项目环境时&#xff0c;采用docker统一管理开发工具&#xff0c;期间碰到了许多环境安装问题&#xff0c;做个总结。 1、安装redis 在宿主机新建redis.conf文件运行创建容器命令&#xff0c;进行容器创建、端口映射、文件挂载、以指定配置文件启动…

网络安全应急响应:保护网络安全的最后一道防线

网络安全应急响应&#xff1a;保护网络安全的最后一道防线 网络安全是当今信息社会中至关重要的问题&#xff0c;网络攻击的频繁发生使得企业、政府和个人面临着越来越大的安全威胁。为了及时有效地应对网络安全事件&#xff0c;网络安全应急响应成为了必不可少的一环。 小德将…

云智慧发布对象关系型数据库CloudPanguDB,打破传统技术壁垒

近日&#xff0c;云智慧推出关系型数据库CloudPanguDB&#xff08;中文名称&#xff1a;盘古数据库&#xff09;&#xff0c;旨在通过高兼容性能和创新技术架构&#xff0c;降低企业项目整体运营成本。 无论是处理海量复杂数据&#xff0c;还是构建清晰有序的数据结构关系&…

【OpenCV】图像算术操作

1 前言 介绍图像算术操作&#xff0c;以及其可以实现的图像亮度、对比度调整效果。相关API&#xff1a; add() subtract() multiply() divide() addWeighted() 2 代码及内容 #include "iostream" #include "opencv2/opencv.hpp"using namespace std…

nodeJs 实现视频的转换(超详细教程)

前段时间拿到一个视频是4k的&#xff0c;没法播放&#xff0c;于是通过 node.js 和 ffmpeg 实现了视频的转换。在win10 系统下实现。 所需工具 node 16.19 直接安装 ffmpeg-5.1.1-essentials_build 解压后重名 ffmpeg 放到C盘 然后配置下环境变量 Git-2.42.0.2-64-bit 直接…

前端:注册页面(后端php实现)

效果 代码 Regist.php <!-- 内部员工注册 --> <?php require_once get_db_conn.php; $conn db_connect();?> <?php //设置变量的默认值 if (!isset($_POST[UserID])) {$_POST[UserID] ; } if (!isset($_POST[Password])) {$_POST[Password] ; } if (!i…

Android 关于apk反编译d2j-dex2jar classes.dex失败的几种方法

目录 确认路径正确直接定位到指定目录确定目录正确&#xff0c;按如下路径修改下面是未找到相关文件正确操作 确认路径正确 &#xff0c;即d2j-dex2jar和classes.dex是否都在一个文件夹里&#xff08;大部分的情况都是路径不正确&#xff09; 直接定位到指定目录 路径正确的…

Python框架下的qt设计之JSON格式化转换小程序

JSON转换小程序 代码展示&#xff1a; 主程序代码&#xff1a; from PyQt6.QtWidgets import (QApplication, QDialog, QMessageBox )import sys import jsonclass MyJsonFormatter(jsonui.Ui_jsonFormatter,QDialog): # jsonui是我qt界面py文件名def __init__(self):super()…

Github 2024-04-02Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-04-02统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10系统设计指南 创建周期:2507 天开发语言:Python协议类型:OtherStar数量:241693 个Fork数量:42010 次关注人数:241693 人贡献…

提升常州小程序软件开发的搜索排名:关键步骤解析

在移动互联网的浪潮中&#xff0c;小程序作为连接用户与服务的桥梁&#xff0c;其重要性日益凸显。对于常州的小程序软件开发企业来说&#xff0c;如何让自己的产品在浩如烟海的互联网信息中脱颖而出&#xff0c;提升搜索排名&#xff0c;成为了亟待解决的问题。本文将为您解析…

【Qt 学习笔记】如何在Qt中打印日志 | qDebug的使用 | Assistant的使用

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 如何在Qt中打印日志 | qDebug的使用 文章编号&#xff1a;Qt 学习笔记…

云计算对象存储服务

对象存储服务&#xff08;OSS&#xff09;中的存储桶(Bucket)叫做‘OBS桶 存储桶&#xff08;Bucket&#xff09;&#xff1a;存储桶式对象存储服务中用于存储对象的基本容器&#xff0c;类似于文件系统中的文件夹。每个存储桶具有唯一的名称&#xff0c;并且可以在桶中存储任…

Databend 开源周报第 138 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持多表插入 …

mac 切换 jdk

查看 mac 上都有哪些版本 /usr/libexec/java_home -V看准版本切换 按前缀切换 比如 export JAVA_HOME/usr/libexec/java_home -v 1.8这样会随机一个 1.8 的 如果想再确定一个比如 openjdk export JAVA_HOME/usr/libexec/java_home -v 1.8.0_292这个方式是临时的&#xff0c…

Spark-Scala语言实战(10)

在之前的文章中&#xff0c;我们学习了如何在spark中使用RDD的filter,distinct,intersection三种方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-…

【嵌入式硬件】光耦

1.光耦作用 光耦一般用于信号的隔离。当两个电路的电源参考点不相关时,使用光耦可以保证在两边不共地的情况下,完成信号的传输。 2.光耦原理 光耦的原理图如下所示,其内部可以看做一个特殊的“三极管”; 一般的三极管是通过基极B和发射极E间的电流,去控制集电极C和发射极…

【2023】kafka原生以及配合springboot的使用(Kafka-3)

&#x1f4bb;目录 前言 一、依赖二、原生使用kafka1、发送消息1.1、生产者同步发送消息1.2、生产者异步发送消息1.3、常用配置&#xff1a; 2、接收消息2.1、关于消费者的自动提交和手动提交2.2、长轮训poll消息2.3、消费者的健康状态检查2.4、指定分区和偏移量&#xff0c;时…

Java基础知识总结(第八篇):集合:Collection(List、Set)、Map、Collections 工具类

声明: 1. 本文根据韩顺平老师教学视频自行整理&#xff0c;以便记忆 2. 若有错误不当之处, 请指出 系列文章目录 Java基础知识总结&#xff08;第一篇&#xff09;&#xff1a;基础语法 Java基础知识总结&#xff08;第二篇&#xff09;&#x…