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

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.mzph.cn/web/12997.shtml

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

相关文章

首次曝光!我喂了半年主食冻干,喵状态真滴顶~

科学养猫理念的推广&#xff0c;使得主食冻干喂养越来越受到养猫者的欢迎。主食冻干不仅符合猫咪的自然饮食习惯&#xff0c;还能提供丰富的营养&#xff0c;有助于保持猫咪的口腔和消化系统健康。我家喂了半年主食冻干&#xff0c;猫咪的状态是真的不一样了&#xff01; 然而…

五丰黎红引领新营销模式:布局一物一码数字化营销,提高调味品销量和复购率

调味品行业的销售渠道主要有餐饮、家庭消费和食品加工&#xff0c;按销售额的占比约为6&#xff1a;3&#xff1a;1&#xff0c;餐饮行业是调味品行业的供需主力。在餐饮行业中&#xff0c;“大厨”这一角色具有十分重要的地位。因此&#xff0c;借助大厨的力量成为了许多调味品…

回文数[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个整数x&#xff0c;如果x是一个回文整数&#xff0c;返回true&#xff1b;否则返回false。回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。例如&#xff0c;121是…

洛谷P1364 医院设置

P1364 医院设置 题目描述 设有一棵二叉树&#xff0c;如图&#xff1a; 其中&#xff0c;圈中的数字表示结点中居民的人口。圈边上数字表示结点编号&#xff0c;现在要求在某个结点上建立一个医院&#xff0c;使所有居民所走的路程之和为最小&#xff0c;同时约定&#xff0c…

单元测试—BMI脚本设计

BMI例题如下&#xff1a; BMI中国计算标准&#xff1a;体质指数&#xff08;BMI&#xff09;体重&#xff08;kg&#xff09;身高^2&#xff08;m&#xff09; 例如&#xff1a;一个人的身高为1.75米,体重为68千克&#xff0c;他的BMI68/(1.75^2)22.2&#xff08;千克/米^2&a…

每日5题Day3 - LeetCode 11 - 15

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;11. 盛最多水的容器 - 力扣&#xff08;LeetCode&#xff09; class Solution {public int maxArea(int[] height) {//这道题比较特殊&#xff0c;因为两边是任意…

04、SpringBoot 源码分析 - SpringApplication启动流程四

SpringBoot 源码分析 - SpringApplication启动流程四 初始化基本流程SimpleApplicationEventMulticaster的multicastEvent广播事件resolveDefaultEventType获取ResolvableType实例ResolvableType的forInstance创建ResolvableType实例 开始广播AbstractApplicationEventMulticas…

脉冲水路清洗机,全自动脉冲技术清除管道堵塞

邦注脉冲水路清洗机是一种高效的清洗设备&#xff0c;它利用全自动脉冲技术来清除管道内的堵塞和污垢。以下是对该设备的一些详细描述&#xff1a; 全自动脉冲技术&#xff1a;脉冲水路清洗机采用了全自动脉冲技术&#xff0c;这是一种先进的清洗方法。该技术通过产生高强度的…

window10下安装ubuntu系统以及docker使用

window10下安装ubuntu系统以及docker使用 1. 启用适用于Linux的Windwos子系统2.下载Linux内核更新包3.将 WSL 2 设置为默认版本4.安装Ubuntu<br />直接去Microsoft store里面直接搜索Ubuntu进行安装。5.可能出现的问题1.win10启动ubuntu报错 参考的对象类型不支持尝试的操…

Linux|基础环境开发工具使用(1)

目录 Linux 软件包管理器 yum 什么是软件包 关于 rzsz 注意事项 查看软件包 如何安装软件 如何卸载软件 Linux编辑器-vim介绍 vi与vim的相同点 vi与vim区别 Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译…

【WebGPU】WebGPU 中的反应扩散计算着色器

在本教程中&#xff0c;我们将使用 WebGPU 技术中的计算着色器实现图像效果。更多精彩内容尽在数字孪生平台。 程序结构 主要构建两个 WebGPU 管道&#xff1a; 运行反应扩散算法多次迭代的计算管道&#xff08;js/rd-compute.js 和 js/shader/rd-compute-shader.js&#xff…

script标签以及defer和async属性

1. <script>标签 将JavaScript代码嵌入到HTML中主要方式是使用<script>元素。 使用<script>的方式有两种&#xff1a; &#xff08;1&#xff09;直接在网页中嵌入JavaScript代码&#xff1a; <script>function sayHi() {console.log("Hi"…

Leetcode—2244. 完成所有任务需要的最少轮数【中等】

2024每日刷题&#xff08;136&#xff09; Leetcode—2244. 完成所有任务需要的最少轮数 实现代码 class Solution { public:int minimumRounds(vector<int>& tasks) {unordered_map<int, int> map;for(int task: tasks) {map[task];}int ans 0;// freq 1 …

【前端】CSS基础(3)

文章目录 前言1. CSS常用元素属性1.1 字体属性1.1.1 字体1.1.2 字体大小1.1.3 字体颜色1.1.4 字体粗细1.1.5 文字样式 前言 这篇博客仅仅是对CSS的基本结构进行了一些说明&#xff0c;关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏&#xff0c;会持续…

c++父类指针指向子类

有一个常见的c题&#xff0c;就是父类和子类的构造函数和析构函数分别调用顺序&#xff1a; 父类构造函数子类构造函数子类析构函数父类析构函数 以及父类中的函数在子类中重新实现后&#xff0c;父类指针指向子类后&#xff0c;该指针调用的函数是父类中的还是子类中的&…

震撼发布!GPT-4o 上线!

5 月 14日凌晨一点&#xff0c;OpenAI 发布了 GPT-4o&#xff01; 新模型的功能简单概括就是&#xff1a;更快、更智能、更像人类。 秉承着持续更新的态度&#xff0c;Hulu AI 快速接入 GPT-4o 啦&#xff01; 继 5 月份上线 Suno 之后&#xff0c;这次是 Hulu AI 的又一重大…

vue3专栏项目 -- 六、上传组件(上)

1、上传组件需求分析 我们还需要新建和展示文章&#xff0c;新建文章自然是发送post请求&#xff0c;同时在post中自带对应的数据&#xff0c;展示文章就是根据id取出已有的数据并且展示出来。 这里有一个难点就是上传组件&#xff0c;上传文件是App应用中最基本的需求&#…

Socks5:网络世界的隐形斗篷

在数字化时代&#xff0c;网络隐私和安全已成为人们日益关注的话题。Socks5&#xff0c;作为一种代理协议&#xff0c;为用户在网络世界中的匿名性提供了强有力的支持。本文将从Socks5的多个方面&#xff0c;深入探讨这一技术如何成为网络世界的“隐形斗篷”。 一、Socks5的基本…

linux基础指令讲解(ls、pwd、cd、touch、mkdir)

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;c大冒险 总有光环在陨落&#xff0c;总有新星在闪烁 这个是我们今天要用到的初始…

P8805 [蓝桥杯 2022 国 B] 机房

P8805 [蓝桥杯 2022 国 B] 机房 分析 是一道lca题目&#xff0c;可以直接套模板 前缀和处理点权 具体思路&#xff1a; 1.n台电脑用n-1条网线相连&#xff0c;任意两个节点之间有且仅有一条路径&#xff08;拆分成各自到公共祖先节点的路径——lca&#xff09;&#xff1b;…