与禹老师学前端vue3学习汇总

news2024/11/13 7:03:11

24.5.15:

创建Vue3工程

1.确定自己电脑有没有nodejs环境,在cmd中输入node,如果出现Node.js的版本号说明已经有这个环境了,否则搜索Node.js安装

2.先在D盘创建一个文件夹Vue3_Study,然后在这个空文件夹中右键选择终端打开。

3.输入npm create vue@latest

4.输入项目名称 hello_vue3,然后下面的选项除了第一个选择是,其余的选择否

5.在VSCode中打开hello_vue3

编写App组件

1.index.html是项目的入口文件

2.加载index.html文件之后,解析<script type="module" src="/src/main.ts"></script>跳转到src="/src/main.ts"

3.Vue3通过createApp函数创建一个应用实例

4.

编写Person.vue

1.在src文件夹中新建一个components文件夹用来存放自己实现的效果

2.在components文件夹中新建一个Person.vue文件

3.仿照App.vue写Person.vue

<template>
    <div class="person">
        <h2>姓名:{{ name }}</h2>
        <h2>年龄: {{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
export default{
    name:'Person',//组件名

    data(){
        return {
            name:'张三',
            age:18,
            tel:'17999999999'
        }
    },

    methods:{
        showTel(){
            alert(this.tel)
        },
        changeName(){
            this.name='罗xx'
        },
        changeAge(){
            this.age+=1
        },
    }
}
</script>

<style scoped>
.person{
    background-color: aqua;
    box-shadow: 0 0 10px;
    padding: 20px;
}
button {/*修改按钮之间的间隔 */
    margin: 0 5px;
}
</style>

4.在App.vue中引入这个Person效果

5.最后效果:

5.下载vue插件便于在网页中检查

5.1网页搜索极简插件

5.2搜索vue

5.3选择推荐下载

5.4下载完之后将压缩包解压到某个位置

5.5打开常用浏览器,点击右上角的三个点,选择扩展-管理扩展,然后将开发者模式打开

5.6将压缩之后的文件夹拖入到浏览器页面选择安装

5.7之后在使用检查就可以看到VUE插件(没有的话看一下那个更多工具)

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

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

相关文章

【069】基于SpringBoot+Vue实现的企业资产管理系统

系统介绍 基于SpringBootVue实现的企业资产管理系统管理员功能有个人中心&#xff0c;用户管理&#xff0c;资产分类管理&#xff0c;资产信息管理&#xff0c;资产借出管理&#xff0c;资产归还管理&#xff0c;资产维修管理。用户可以对资产进行借出和归还操作。因而具有一定…

Git系列:Git Switch 高效使用技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

实时网络监控 - 一目了然网络状况

网络问题排查一直是IT管理员头痛的问题。随着网络规模的不断扩大和业务复杂度的提升&#xff0c;如何快速定位和解决网络故障变得尤为关键。本文详细介绍了一款名为 AnaTraf 的网络流量分析工具,它能提供全流量回溯分析、实时网络监控、性能分析等功能,助力企业快速诊断和解决各…

每日两题 / 236. 二叉树的最近公共祖先 124. 二叉树中的最大路径和(LeetCode热题100)

236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; dfs统计根节点到p&#xff0c;q节点的路径&#xff0c;两条路径中最后一个相同节点就是公共祖先 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* …

鸿蒙 DevEcoStudio:简单实现网络请求登录案例

使用http或axios实现登录案例 在entry/src/main/ets/pages路径下新建Page9.ets文件&#xff1a; import http from ohos.net.http import router from ohos.router Entry Component struct Page9 {State message: string Hello WorldState username: string State password:…

学习了java编程后,你就只能做java程序员吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 学习了Java编程后&#xff0c;…

KNN算法用于回归分析

生成数据集 from sklearn.datasets import make_regression import matplotlib.pyplot as plt# 生成特征数量为1&#xff0c; 噪音为50的数据集 X, y make_regression(n_features1, n_informative1, noise50, random_state8)# 散点图 plt.scatter(X, y, c"orange",…

CTF例题:[SWPU2019]Web1(无列名注入)

网址&#xff1a;BUUCTF在线评测 搜索web1 启动靶机 点击链接进入题目 进入题目后发现有登录和注册接口&#xff0c;直接注册登录。 首先通过1进行测试&#xff0c;查看是否有注入点 出现报错&#xff0c;说明可能存在注入点 然后继续测试发现该服务器过滤了&#xff1a; or、…

SFTPGO 整合minio AD群组 测试 |sftpgo with minio and ldap group test

SFTP-GO 研究 最近在测试sftpgo&#xff0c;发现中文的资料比较少&#xff0c;在企业中很多存储开始支持S3&#xff0c;比如netapp 于是想尝试把文件服务器换成sftpgoS3的存储&#xff0c;sftp go和AD 群组的搭配测试比较少 自己测试了一把&#xff0c;觉得还是没有server-u的A…

三类银行互联网贷款迎新规!速看菊风信贷智能双录解决方案

​​继2020年《商业银行互联网贷款管理暂行办法》&#xff08;下称《办法》&#xff09;和2021年《关于进一步规范商业银行互联网贷款业务的通知》之后&#xff0c;时隔三年&#xff0c;股份制银行、城商行、民营银行&#xff08;简称“三类银行”&#xff09;互联网贷款业务再…

shell脚本实现linux系统自动化配置免密互信

目录 背景脚本功能脚本内容及使用方法 1.背景 进行linux自动化运维时需要先配置免密&#xff0c;但某些特定场景下&#xff0c;做了互信的节点需要取消免密&#xff0c;若集群庞大节点数量多时&#xff0c;节点两两之间做互信操作非常麻烦&#xff0c;比如有五个节点&#x…

C++二叉搜索树搜索二叉树二叉排序树

C二叉搜索树 1. 二叉搜索树的概念 二叉搜索树&#xff08;BST,Binary Search Tree)&#xff0c;也称为二叉排序树或二叉查找树。它与一般二叉树的区别在于&#xff1a;每个结点必须满足“左孩子大于自己&#xff0c;右孩子小于自己”的规则。在这种规则的约束下&#xff0c;二…

海外云手机的运作原理和适用场景

海外云手机是一种基于云计算技术的虚拟手机服务&#xff0c;通过将手机操作系统和应用程序托管在远程服务器上&#xff0c;实现用户可以通过互联网连接来使用和管理手机功能&#xff0c;而无需实际拥有物理手机。以下是有关海外云手机的相关信息&#xff1a; 海外云手机的运作原…

【Linux】-Linux的实用操作:快捷键与软件安装操作、构建软连接、日期时区的设置[4]

目录 一、各类小技巧&#xff08;快捷键&#xff09; 1、ctrl c 强制停止 2、ctrl d 退出或登出 3、历史命令搜索 4、光标移动快捷键 5、清屏 二、软件安装 1、yum命令 2、apt命令 - 扩展&#xff08;ubuntu&#xff09; 三、systemctl命令 四、软连接 1、ln命令…

【PG数据库】PostgreSQL 日志归档详细操作流程

1.1 日志归档的目的 pg数据库日志归档是将PostgreSQL数据库的日志文件进行归档的过程。 归档的主要目的是为了保留历史数据&#xff0c;确保数据的一致性和完整性&#xff0c;同时为数据恢复提供必要的支持。 pg数据库日志归档的目的包括&#xff1a; 1.数据恢复&#xff1…

【MySQL】SQL基本知识点DDL(1)

目录 1.SQL分类&#xff1a; 2.DDL-数据库操作 3.DDL-表操作-创建 4.DDL-表操作-查询 5.DDL-表操作-数据类型 6.DDL-表操作-修改 1.SQL分类&#xff1a; 2.DDL-数据库操作 3.DDL-表操作-创建 注意&#xff1a;里面的符号全部要切换为英文状态 4.DDL-表操作-查询 5.DDL…

html基础(全)

html简介 目录 什么是网页 什么是 HTML 常用浏览器 WebE标准的构成 基本语法概述 第一个HTML页面 文档类型声明标签 lang 语言种类 字符集 标题标签 段落和换行标签 文本格式化标签 div和span标签 图像标签和路径 超链接标签 表格的主要作用 表头单元格标签 列…

【汇编语言】多文件组织

【汇编语言】多文件组织 文章目录 【汇编语言】多文件组织前言一、8086拓展1.子程序的另外一种写法2.程序的多文件组织 总结 前言 本篇文章将讲到子程序的另一种写法&#xff0c;以及程序的多文件组织。 一、8086拓展 1.子程序的另外一种写法 初始的程序 在这里我们对比一下…

战网国际服加速器哪个好用 暴雪战网免费加速器分享

战网国际服&#xff08;Battle.net International或Battle.net Global&#xff09;是由暴雪娱乐公司&#xff08;Blizzard Entertainment&#xff09;运营的面向全球玩家的多人在线游戏平台。与专注于特定地区的版本不同&#xff0c;国际服允许玩家不受地域限制地访问暴雪的多款…

一键修复所有dll缺失,教大家解决丢失的dll文件

修复所有DLL&#xff08;动态链接库&#xff09;文件缺失的问题通常不可能通过单一的"一键修复"按钮来实现&#xff0c;因为DLL文件缺失可能由各种不同的原因导致&#xff0c;比如应用程序安装不正确、病毒感染、或系统文件损坏等。 使用内置的系统文件检查器&#x…