Vue3 基础语法

news2024/12/23 23:45:10

文章目录

        • 1.创建Vue项目
          • 1.1创建项目
          • 1.2 初始项目
        • 2.vue3 语法
          • 2.1 复杂写法
          • 2.2 简易写法
          • 2.3 reactive(对象类型)
          • 2.4 ref(简单类型)
          • 2.5 computed(计算属性)
          • 2.6 watch(监听)
        • 3.vue3 生命周期
        • 4.vue3 组件通信
          • 4.1 父传子(defineProps)
          • 4.1 子传父(defineEmits)
        • 4.vue3 跨组件通信
          • 4.1 跨层传递数据
          • 4.2 跨层传递方法
        • 4.vue3 跨组件通信(pinia)
          • 4.1 下载pinia
          • 4.2 pinia的全局注册
          • 4.3 pinia的使用

1.创建Vue项目

1.1创建项目

项目文件下运行 npm init vue@latest

npm init vue@latest
1.2 初始项目
 npm install

2.vue3 语法

2.1 复杂写法
<script>
export default {
  setup() {
    const message = "年后";
    const messagehandle = () => {
      console.log(message);
    };
    return {
      message,
      messagehandle,
    };
  },
};
</script>
2.2 简易写法
<script setup>
const message = "你好呀";
const logHandle = () => {
  console.log(message);
};
</script>

响应式api,完成响应式数据

2.3 reactive(对象类型)
<script setup>
//引入响应式对象
import { reactive } from "vue";
//执行响应式对象
const state = reactive({
  status: 0,
});
//自定义匿名函数
const addCunt = () => {
  state.status++;
};
</script>
2.4 ref(简单类型)

ref执行的响应式数据,要用.value接受,


import { ref } from "vue";

const state = ref(0);

const addCunt = () => {
  state.value++;
};
2.5 computed(计算属性)

调用computed,返回值用一个常量接受。

<script setup>
import { ref } from "vue";
import { computed } from "vue";
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);

const computedList = computed(() => {
  return list.value.filter((item) => item > 2);
});
</script>
2.6 watch(监听)

1.监听单个值的变化
2.watch 默认是监听ref浅层监听。

//监听数据的变化
watch(count, (newValue, oldValue) => {
  console.log(newValue, "+", oldValue);
});

2.监听多个值的变化

//监听数据的变化
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName, "+", oldCount, oldName);
});
  1. immediate在为触发前执行一次
watch(
  count,
  () => {
    console.log("11");
  },
  {
    immediate: true,
  }
);

4.深度监听

watch(
  count,
  () => {
    console.log("111");
  },
  {
    deep: true,
  }
);

3.vue3 生命周期

vue3的生命周期和vue2类似。
在这里插入图片描述

4.vue3 组件通信

4.1 父传子(defineProps)

1.在父组件在vue3中引入子组件,直接使用,不需要注册
2.在子组件通过defineProps接受数据

<script setup>
import { ref } from "vue";
import sonCom from "./components/son.vue";
const number = ref(100);
</script>

<template>
  <div>
    <sonCom message="小明" :number="number"></sonCom>
  </div>
</template>

<template>
  <div>{{ message }}{{ number }}</div>
</template>

<script setup>
const count = defineProps({
  message: String,
  number: Number,
});
console.log(count.message);
</script>

<style></style>
4.1 子传父(defineEmits)
<script setup>
import sonCom from "./components/son.vue";
import { ref } from "vue";
const getMessage = (msg) => {
  console.log(msg);
};
</script>

<template>
  <div>
    <sonCom @get-message="getMessage"></sonCom>
  </div>
</template>

<template>
  <button @click="sendMsg">按钮</button>
</template>

<script setup>
const emit = defineEmits(["get-message"]);
const sendMsg = () => {
  emit("get-message", "5555");
};
</script>

<style></style>

4.vue3 跨组件通信

provide 发送消息,inject接受消息

4.1 跨层传递数据

发送消息

provide("data-key", count);

接受消息

const message = inject("data-key");
4.2 跨层传递方法
const count = ref(0);
const addcount = () => {
  count.value++;
};

provide("methods", addcount);
const methods = inject("methods");

4.vue3 跨组件通信(pinia)

pinia官网

4.1 下载pinia
npm install pinia
4.2 pinia的全局注册
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia=createPinia()

createApp(App).use(pinia).mount('#app')

4.3 pinia的使用

在这里插入图片描述

import {defineStore} from 'pinia'
import { ref } from 'vue'
export const useCounterStore=defineStore('counter',()=>{
    //定义数据
    const count=ref(0)
    //定义方法
    const addCount=()=>{
        count.value++
    }
    //以对象返回数据
    return{
        count,
        addCount
    }
})

使用pinia

<script setup>
//导入方法
import { useCounterStore } from "./stores/counter";
//执行方法得到实例对象
const useCounter = useCounterStore();
console.log(useCounter);
</script>

<template>
  <div>
    <button @click="useCounter.addCount">{{ useCounter.count }}</button>
  </div>
</template>

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

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

相关文章

程序员应该怎么自学才能入门 ?我来聊聊自己的经历

当你想成为一名程序员&#xff0c;如何自学入门是一个非常重要的问题。在这里我分享一下我的经验&#xff0c;希望能对你有所帮助。 首先&#xff0c;为了制定好你的学习路线&#xff0c;你可以在网上的培训机构网站找到一张基础路线图。这张路线图必须是跟行业对标的&#xf…

Leetcode 42 接雨水

Leetcode42接雨水 题解1&#xff1a;正反两扫&#xff08;Simple and effect&#xff09;题解2&#xff1a;DP题解3&#xff1a;单调栈&#xff08;单调栈存储的是下标&#xff0c;满足从栈底到栈顶的下标对应height的元素呈递减&#xff09;题解4&#xff1a;双指针&#xff0…

【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…

【数据结构】- 链表之带头(哨兵位)双向循环链表(上)

文章目录 前言&#x1f31f;一、带头双向循环链表&#x1f31f;二、带头双向循环链表结构图&#xff1a;&#x1f31f;三、带头双向循环链表代码实现&#xff1a;&#x1f30f;3.1头插&#xff1a;&#x1f30f;3.2头插流程图&#x1f30f;3.3 尾插&#x1f30f;3.4尾插流程图&…

【CSS系列】第三章 · CSS三大特性和颜色的表示

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…

Swagger简单了解

Swagger 介绍 使用swagger你只需要按照它的规范去定义接口及接口相关信息&#xff0c;在通过swagger衍生出来的一系列项目和工具&#xff0c;就可以做到生成各种格式的接口文档&#xff0c;以及在线接口调试页面等等。 官网&#xff1a;https://swagger.io/ knife4j是为javaMVC…

Linux网络——Shell编程之函数

Linux网络——Shell编程之函数 一、概述二、定义函数的格式1.格式一2.格式二 三、函数的查看和删除1.查看 declare2.删除 declare 四、函数的返回值1.return 返回值2.echo 返回值 五、函数的参数传入与变量范围1.函数的传参2.函数变量的作用范围 六、函数的应用1.阶乘2.递归目录…

知识不断分叉,知怎么来,才知怎么去

知识不断分叉&#xff0c;知怎么来&#xff0c;才知怎么去 定位方法论在中国的演化和继承 趣讲大白话&#xff1a;知道什么来&#xff0c;方知怎么去 【趣讲信息科技159期】 **************************** 定位也谈不上是科学意义上的理论 而是商业实践方法 不能神话 但也要有基…

深入了解目标检测技术--从基本概念到算法入门

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 众所周知&#xff0c;目标检测是计算机视觉领域中的重要任务之一&#xff0c;其目的是识别图像或视频中包含的物体实例并将其定位。实现目标检测可以帮助人们在自动驾驶、机器人导航、安防监控等领域中更好地理解和应用图…

K_A37_002 基于STC89C52RC驱动PCF8591模块 串口与OLED0.96双显示

K_A37_002 基于STC89C52RC驱动PCF8591模块 串口与OLED0.96双显示 所有资源导航一、资源说明二、基本参数参数引脚说明 三、驱动说明IIC地址/采集通道选择/时序对应程序: 四、部分代码说明1、接线引脚定义1.1、STC89C52RCPCF8591模块 五、基础知识学习与相关资料下载六、视频效果…

JavaScript的基础语法

目录 一、初识JavaScript&#xff08;简称JS&#xff09; 1.JavaScript 运行过程 2.JavaScript 的组成 二、JavaScript的规范与调试 1.JavaScript 的书写形式 1.1 行内式 1.2 内嵌式&#xff08;建议写在之前&#xff09; 1.3 外部式&#xff08;建议写在之前&#xf…

基于 SpringBoot+Vue 的在线学习平台(附源码)

摘 要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括学习平台的网络应用&#xff0c;在外国学习平台已经是很普遍的方式&#xff0c;不过国内的管理平台可能还处于起步阶段。学习平台具有学习信息管理功能的选择。学习平台…

【Java|golang】2437. 有效时间的数目

给你一个长度为 5 的字符串 time &#xff0c;表示一个电子时钟当前的时间&#xff0c;格式为 “hh:mm” 。最早 可能的时间是 “00:00” &#xff0c;最晚 可能的时间是 “23:59” 。 在字符串 time 中&#xff0c;被字符 ? 替换掉的数位是 未知的 &#xff0c;被替换的数字…

大型数据库期末总复习【SQL server 2008 基础教程】

一、概述 1.Microsoft SQL Server系统的体系结构 Microsoft SQL Server 2008系统由4个主要部分组成。这4个部分被称为4个服务&#xff0c;这些服务分别是数据库引擎、分析服务、报表服务和集成服务。这些服务之间相互存在和相互应用&#xff0c;它们的关系示意图如图所示&…

Web安全:AppScan 安装和使用.(渗透常用工具)

Web安全&#xff1a;AppScan 安装和使用. AppScan是一款web安全扫描工具&#xff0c;可以利用爬虫技术进行网站安全渗透测试&#xff0c;根据网站入口自动对网页链接进行安全扫描&#xff0c;扫描之后会提供扫描报告和修复建议等. 目录&#xff1a; Web安全&#xff1a;AppSc…

【CSS系列】第四章 · CSS字体属性

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…

51单片机(八)串口通信

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

网易云音乐开发--video模块开发

video页面头部搭建 首先头部的结构是这样的 这里采用的是淘宝双飞翼布局。俩端固定&#xff0c;中间自适应。 这里说一下这个flex:1 flex-grow:可拉伸 flex-shrink:可压缩 flex-basis:当前元素的宽度 flex默认值:flex-grow:0,flex-shrink:1,flex-basis:auto flex:1 flex-gr…

Linux一学就会——系统文件I/O

Linux一学就会——系统文件I/O 有几种输出信息到显示器的方式 #include <stdio.h> #include <string.h> int main() {const char *msg "hello fwrite\n";fwrite(msg, strlen(msg), 1, stdout);printf("hello printf\n");fprintf(stdout, &q…

DEJA_VU3D - Cesium功能集 之 106-鹰眼地图

前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小140个左右的功能,后续也会不断的追加,所以暂时打算一周2-3更的样子来更新本专栏(每篇博文都会奉上完整demo的源代码…