vue3.0 入门基础知识汇总【1】 全面 精简 推荐

news2024/9/9 5:09:29

这篇博文主要对一些刚入门vue框架的同学,以及对vue基本知识进行巩固的,最后就是精简一下基本知识,以方便自己查看,感谢参考,有问题评论区交流,谢谢。

目录

1.component组件的基本结构和使用

2.method方法的定义和使用

3.状态管理

4.router路由的定义和使用、路由传参、父子组件传参


1.component组件的基本结构和使用

vue组件是可复用的功能以及代码,组件也是vue的最重要的核心概念。组件结构主要分为三部分template、script 和 style 分别对应写html、js和css代码,其中script标签中 scoped 表示样式私有化,对当前组件内生效。

vue 环境配置参考:

VUE 3.0 如何新建项目 详细教程 附环境搭建 推荐-CSDN博客

<template>
    //编写html代码
</template>

<script>
    //编写js代码
    import { defineComponent } from 'vue';
    export default defineComponent({
        name:"Top",//组件名称
        //接收父组件数据 后面详细说
        props:{
        },
        //定义子组件
        components: {
        },
        setup(props,ctx) {
            return {
            }
        }
    })
</script>

//scoped 表示只对当前样式生效,私有化样式
<style scoped lang="scss">
    //编写样式文件
</style>

模板语法

最基本的数据绑定形式是文本插值,它使用的是两个大括号{{}} + 变量值 语法 (即双大括号):

<span>Message: {{ msg }}</span>

双大括号标签会被替换为组件 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

ref定义单个数据

1.import 引入 ref ,在setup方法内定义变量 使用ref() 方法,参数传入初始值,最后return 返回变量值,就可以在html中绑定使用了,就像上面的模板语法一样 {{num}} 。

ref 可以定义 number,字符串、数组、对象。

reactive定义对象类型

同上 import 引入 reactive,直接定义一个data,返回也只需要返回一个data,最后插值表达式前面加上data即可。 {{data.name}}

toRef

也可引入toRef   import { defineComponent,reactive,toRef } from 'vue';

这样的话:return和template中是这样的

//只截取了部分代码 用于展示
<template>
    <span>{{name}}</span>
</template>
return {
    ...toRef(data)
}

v-for

原始数据多次渲染元素或模板块

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

2.method方法的定义和使用

常规用法

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="handler" 或 @click="handler"

注意:在方法中访问ref定义的数据,要用定义的常量名.value。

按键修饰符

在监听键盘事件时,我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

仅会在 $event.key 为 'PageDown' 时调用事件处理

<input @keyup.page-down="onPageDown" />

3.状态管理

文件存放路径

状态管理store文件在项目结构中一般放在src文件夹store路径下

方法说明

vue的项目默认store文件中各个方法,其中 createStore是新建状态,state、mutations、actions和modules看下图代码注释内容。

4.router路由的定义和使用、路由传参、父子组件传参

请参考:vue3.0 入门基础知识汇总【2】Router 路由传参 父子组件传参.。。。

后续会陆续出实战项目以及知识点解读

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

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

相关文章

全网最适合入门的面向对象编程教程:28 类和对象的Python实现-Python编程原则、哲学和规范大汇总

全网最适合入门的面向对象编程教程&#xff1a;28 类和对象的 Python 实现-Python 编程原则、哲学和规范大汇总 摘要&#xff1a; 本文主要介绍了在使用 Python 进行面向对象编程时&#xff0c;Python 异常处理的原则-“请求谅解&#xff0c;而非许可”&#xff0c;以及软件设…

什么是安全编程?

安全编程&#xff08;Secure Programming&#xff09;是一种编程方法论&#xff0c;旨在通过编写安全可靠的代码来保护计算机系统和数据的安全性。它涵盖了软件设计、开发、测试和维护的整个生命周期&#xff0c;旨在最大程度地降低软件漏洞和安全缺陷的风险。以下是对安全编程…

【前端 20】Element-UI快速入门

探索Element UI组件库&#xff1a;快速搭建Vue应用的必备工具 在现代Web开发中&#xff0c;Vue.js以其轻量级和灵活性赢得了广泛的关注。而Element UI&#xff0c;作为Vue.js的一个UI组件库&#xff0c;更是为开发者们提供了丰富、易用的前端组件&#xff0c;极大地加速了开发过…

Spring源码(八)--Spring实例化的策略

Spring实例化的策略有几种 &#xff0c;可以看一下 InstantiationStrategy 相关的类。 UML 结构图 InstantiationStrategy的实现类有 SimpleInstantiationStrategy。 CglibSubclassingInstantiationStrategy 又继承了SimpleInstantiationStrategy。 InstantiationStrategy I…

Java----反射

什么是反射&#xff1f; 反射就是允许对成员变量、成员方法和构造方法的信息进行编程访问。换句话来讲&#xff0c;就是通过反射&#xff0c;我们可以在不需要创建其对象的情况下就可以获取其定义的各种属性值以及方法。常见的应用就是IDEA中的提示功能&#xff0c;当我…

摆弄it:越走越深

在英语中&#xff0c;it是一个单词&#xff0c;就是“它”&#xff0c;这是众所周知的事情。今天&#xff0c;我们就来摆弄一下it&#xff0c;摆弄一下“它”&#xff0c;看看能摆弄出什么名堂来。 一、它是它自己 it 大家都知道&#xff0c;同样&#xff0c;itself&#xff0…

大模型算法面试题(十七)

本系列收纳各种大模型面试题及答案。 1、LoRA权重是否可以合入原模型 LoRA权重可以合入原模型。LoRA&#xff08;Low-Rank Adaptation of Large Language Models&#xff09;是一种用于微调大型语言模型的低秩适应技术。它通过训练低秩矩阵&#xff0c;并将这些参数注入到原始…

onlyoffice用nginx反向代理

我对于onlyoffice的需求就是当个在线编辑器使用。在集成react的时候之前都是写的绝对路径的地址&#xff0c;这样在需要迁移应用的时候就造成了巨大的麻烦&#xff0c;所以我决定用nginx做反向代理&#xff0c;这样我集成的时候就不用每次都修改源码中的地址了。 一开始写的代…

LINUX进程间的通信(IPC)--信号

一、概念 信号通信&#xff0c;其实就是内核向用户空间进程发送信号&#xff0c;只有内核才能发信号&#xff0c;用户空间进程不能发送信号。信号已经是存在内核中的了&#xff0c;不需要用户自己创建。 信号通信的框架 * 信号的发送&#xff08;发送信号进程&#xff09;&am…

阿联酋云手机怎么做TikTok引流?

根据字节跳动广告资源的数据显示&#xff0c;2024年初&#xff0c;TikTok在阿联酋拥有1073万18岁及以上用户&#xff0c;其广告覆盖率达到当地互联网用户群的113%。从2023年初到2024年初&#xff0c;TikTok在阿联酋的潜在广告覆盖率增加了250万&#xff0c;增长率达30.4%。特别…

基于ant-design-vue3多功能操作表格,表头序号为动态添加记录按钮,鼠标在表格记录行,当前行序号显示删除按钮

由于项目需要&#xff0c;并考虑到尽可能让空间利用率高&#xff0c;因此定制开发一个表格组件&#xff0c;组件功能主要是在序号表头位置为添加按钮&#xff0c;点击按钮&#xff0c;新增一行表格数据&#xff1b;表格数据删除不同于以往表格在操作栏定义删除按钮&#xff0c;…

深度学习(概念相关)

深度学习&#xff08;论文相关&#xff09; 深度学习一些概念 通过阅读论文可以理解提取数据特征的重要性 深度学习学习怎么去提取特征 应用领域 深度学习应用&#xff1a; 输入&#xff1a;图像输入或者文字输入 算法&#xff1a;还是基础的模块计算 神经网络中的参数几千…

[JavaScript] 动态获取方法参数名

JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript基于原型编程、多范式的动态脚本语言&am…

Java导出Excel给每一列设置不同样式示例

Excel导出这里不讲&#xff0c;方法很多&#xff0c;原生的POI可以参照 Java原生POI实现的Excel导入导出&#xff08;简单易懂&#xff09; 这里只说怎么给Excel每一列设置不同的样式&#xff0c;比如下面这样的 直接上代码 Overridepublic void exportTemplate(HttpServletRe…

昇思25天学习打卡营第23天|CV-ResNet50迁移学习

打卡 目录 打卡 迁移学习 实战练习 数据准备 数据处理 数据处理函数 数据处理流程 数据可视化 训练模型 构建Resnet50网络 固定特征进行训练 network 的输出 训练和评估 可视化模型预测 通过本文&#xff0c;了解迁移学习的重点在于&#xff0c;了解你的模型结构…

LGA-4500激光气体分析仪说明手册

目 录 阅 读 说 明 I 用户须知 I 概况 I 注意和警示信息 I 供货和运输 III 质保和维修 III 联系方式 III 一、简介 1 1.1概要 1 1.2测量原理 1 1.2.1单线光谱技术 1 1.2.2激光频率扫描技术 2 1.2.3谱线展宽自动修正技术 2 1.3系统组成 2 1.4系统特点 3 1.5系统指标 4 1.6激光产…

决策树可解释性分析

决策树可解释性分析 决策树是一种广泛使用的机器学习算法&#xff0c;以其直观的结构和可解释性而闻名。在许多应用场景中&#xff0c;尤其是金融、医疗等领域&#xff0c;模型的可解释性至关重要。本文将从决策路径、节点信息、特征重要性等多个方面分析决策树的可解释性&…

Thymeleaf(看这一篇就够了)

目录&#xff1a; Thymeleaf变量输出操作字符串&时间条件判断迭代遍历使用状态变量获取域中的数据URL写法相关配置 Thymeleaf Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎&#xff0c;类似JSP。它可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。Spri…

暄桐林曦老师推荐书单——《菜根谭》

暄桐是一间传统美学教育教室&#xff0c;创办于2011年&#xff0c;林曦是创办人和授课老师&#xff0c;教授以书法为主的传统文化和技艺&#xff0c;皆在以书法为起点&#xff0c;亲近中国传统之美&#xff0c;以实践和所得&#xff0c;滋养当下生活。      在暄桐教室的课…

机械运动、工控机概念整理

Signal &#xff1a; 信号 pul 【pulse】是驱动脉冲信号&#xff0c;发一个脉冲&#xff0c;电机走一步。 dir是方向控制信号&#xff0c;控制电机正转或反转。 ena是使能信号&#xff0c;这个信号必须开启&#xff0c;才能驱动电机。 voltage&#xff1a; 电压 VCC&#…