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

这篇博文主要对一些刚入门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】

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