vue3黑马笔记

news2024/11/26 17:33:11

一、创建vue3项目

需要node16版本或者以上，

npm init vue@latest

在这里插入图片描述

二、vue3模块

在这里插入图片描述

在vue3中所有的创建都用了函数封装，保证了每个实例的独立性
在这里插入图片描述

三、setup

1、setup选项

setup组合式api
1、执行时间比beforeCreate还早
2、setup函数，获取不到this
3、数据和函数需要return出去才可以使用
在这里插入图片描述

<script>
export default {

  setup(){
    console.log("setup", this)

    const message = "消息"
    const aaa = () =>{
      console.log("函数调用")
    }
    return {
      message,
      aaa
    }
  },
  beforeCreate() {
    console.log("beforeCreate")
  }
}
</script>

<template>
  <div>{{message}}</div>
  <button @click="aaa">点击按钮</button>
</template>

2、setup语法糖（<script setup>）

不需要return就可以使用函数和参数

<script setup>
   const message = "消息"
    const aaa = () =>{
      console.log("函数调用")
    }
</script>

<template>
  <div>{{message}}</div>
  <button @click="aaa">点击按钮</button>
</template>

3、setup原理

在这里插入图片描述
在这里插入图片描述

四、响应式(推荐使用ref)

1、reactive 响应式对象

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    count: 100
  })

  const aaa = () => {
    state.count++
  }

   
</script>

<template>
  <div>{{state.count}}</div>
  <button @click="aaa">增加</button>
</template>

2、ref 响应式简单类型或者对象类型

实际上ref是被给包了一层，可以打印看到变成了对象

1、在js中需要变量.value去拿到值
2、在vue的template可以直接拿到值（vue3给拔了一层）

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  console.log("包装了对象", count)
  console.log("取值", count.value)
  const aaa = () => {
    count.value++
  }

   
</script>

<template>
  <!-- 直接取值就行 -->
  <div>{{count}}</div>
  <button @click="aaa">增加</button>
</template>

五、计算属性

1、computed

<script setup>
  import { ref, computed } from 'vue'
  const list = ref([0,1,2,3,4,5])
  const computedList = computed(()=>{
    return list.value.filter(item => item > 2)
  })
  const aaa = () => {
    list.value.push("666")
  }
</script>

<template>
  <!-- 直接取值就行 -->
  <div>{{ list }}</div>
  <div>{{ computedList }}</div>
  <button @click="aaa">增加</button>
</template>

2、computed完整写法

<script setup>
  import { ref, computed } from 'vue'
  const count = ref(1)
  const computedList = computed({
    //简写get: () => count.value + 1
    get() {
      return count.value + 1
    },
    set(val){
      console.log(val)
      count.value = val
    }
  })
  const aaa = () => {
    computedList.value = 100
  }

</script>

<template>
  <!-- 直接取值就行 -->
  <div>{{ computedList }}</div>
  <button @click="aaa">增加</button>
</template>

六、watch监听

1、watch监听单个

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('张三')

  const setName = () => {
    name.value = "里斯"
  }
  
  const setCount = () => {
    count.value = 18
  }


  // 单个监听
  watch(count, (newValue, oldValue)=>{
    if (newValue == 18) {
      name.value = "小伙子"
    }
  })

</script>

<template>

<div>{{count}}</div>
<div>{{name}}</div>
<button @click="setName">修改名称</button>
<button @click="setCount">修改年龄</button>
</template>

2、watch监听多个

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('张三')

  const setName = () => {
    name.value = "里斯"
  }
  
  const setCount = () => {
    count.value = 18
  }

  //多个监听
  watch([count, name], (newValue, oldValue)=>{
    console.log(newValue, oldValue)
  })
</script>

<template>
<div>{{count}}</div>
<div>{{name}}</div>
<button @click="setName">修改名称</button>
<button @click="setCount">修改年龄</button>
</template>

在这里插入图片描述

3、watch监听配置参数

deep:true 对复杂类型进行深度监听
immdiate:true 页面初始化 立刻执行一次
这边就简写了

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('张三')

  const setName = () => {
    name.value = "里斯"
  }
  
  const setCount = () => {
    count.value = 18
  }

  //多个监听
  watch([count, name], (newValue, oldValue)=>{
    console.log(newValue, oldValue)
  },{
  	deep:true,
  	immdiate:true
  })
</script>

<template>
<div>{{count}}</div>
<div>{{name}}</div>
<button @click="setName">修改名称</button>
<button @click="setCount">修改年龄</button>
</template>

4、精准监听对象

在这里插入图片描述

七、生命周期

在这里插入图片描述

在这里插入图片描述

八、父子通信

8.1、父传子

1、父传子语法

语法
>子对象
实例：其中:money是动态绑定的，到子组件就会动态变化
在这里插入图片描述

2、原理

在这里插入图片描述

8.2、子传父

1、语法

语法
在这里插入图片描述

九、模板引用和defineExpose宏函数

1、ref获取dom对象

在这里插入图片描述

案例
在这里插入图片描述

2、defineExpose宏函数

在这里插入图片描述

ref调用子组件内的方法

子组件
在这里插入图片描述

父组件

在这里插入图片描述

十、provide和inject跨层级别通讯

语法 顶层组件也可以把函数传递下去
在这里插入图片描述

十一、vue3.3的新特性

1、defineOptions（与setup函数平级例如：组件命名）

语法：
在这里插入图片描述
例子
在这里插入图片描述

2、defineModel（为了解决动态绑定值传递问题）

1、原本实现方法（使用vue2的逻辑在vue3中写）

父组件

在这里插入图片描述

子组件
1、先接prop
2、注册emit发送事件
3、监听组件value
4、发送组件消息

在这里插入图片描述

2、新特性的写法

语法
在这里插入图片描述
案例

  1. 父组件不变
  2. 子组件
    在这里插入图片描述
  3. 开启事件（vite.config.js中开启）
    在这里插入图片描述
  4. 重启vue项目

十二、pinia（替代vuex）

1、pinia是什么

官网
在这里插入图片描述

2、变量和函数和计算

安装

npm install pinia

导包

import { createApp } from 'vue'
import App from './App.vue'
//1、导入
import { createPinia } from 'pinia'
//2、.use(createPinia())
createApp(App).use(createPinia()).mount('#app')

使用
新建目录store，新建counter.js

import { defineStore } from "pinia";
import { ref,computed } from "vue";

export const useCounterStore = defineStore('counter', () => {
    //声明变量
    const count = ref(100)

    //声明函数action
    const addCount = () => count.value++
    const subCount = () => {
        count.value--
    }

    //计算属性getters(computed)
    const double = computed(() => count.value * 2)

    //声明变量
    const msg = ref('hello')

    return {
        addCount,
        subCount,
        count,
        msg,
        double
    }

})

App.vue

<script setup>
import Son1Com from '@/components/Son1Com.vue';
import Son2Com from '@/components/Son2Com.vue';




</script>

<template>
  <Son1Com></Son1Com>
  <Son2Com></Son2Com>


</template>

Son1Com

<script setup>
import { useCounterStore } from '@/store/counter'



const counterStore = useCounterStore()

</script>
<template>
    <h1>{{ counterStore.count }}</h1>
    <div>我是Son1</div>
    <button @click="counterStore.addCount">+</button>

    <h3>{{counterStore.double}}</h3>
</template>

Son2Com

<script setup>
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
</script>
<template>

    <h1>{{ counterStore.count }}</h1>
    <div>我是Son2</div>
    <button @click="counterStore.subCount">-</button>
</template>

3、异步函数

在这里插入图片描述

4、storeRefs方法

注意直接解构不会响应式
在这里插入图片描述

如何变成响应式
在这里插入图片描述

5、持久化persistedstate插件

官网
使用

安装

npm i pinia-plugin-persistedstate

将插件添加到 pinia 实例上在main.js当中

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
createApp(App).use(pinia).mount('#app')

使用在counter.js中

import { defineStore } from "pinia";
import { ref,computed } from "vue";
export const useCounterStore = defineStore('counter', () => {
    //声明变量
    const count = ref(100)
    return {
        count
    }
},{
    // 开启持久化
    persist: true,
})

持久化参数

import { defineStore } from "pinia";
import { ref,computed } from "vue";
export const useCounterStore = defineStore('counter', () => {
    //声明变量
    const count = ref(100)
    return {
        count
    }
},{
    // 开启持久化
    persist: {
	//看文档
	}
})

其中paths持久存储哪些值
在这里插入图片描述

6、封装

记得在main.js中vue实体记得use一下pinia
在这里插入图片描述

在这里插入图片描述

使用
在这里插入图片描述

十三、pnpm创建项目

命令

npm install -g pnpm
pnpm create vue

在这里插入图片描述

项目创建
在这里插入图片描述

十四、eslint和prettier配置代码风格

1、下载插件

vscode中prettier插件卸载
安装ESLint插件

2、配置.eslint.cjs文件

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },



//此处开始配置
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printWith: 80, //行宽
        trailingComma: 'none', //不加对象|数组最后的逗号
        endOfLine: 'auto' // 换行符号不限
      }
    ],
    //ESLint关注代码规范
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] //vue组件名称多单词组成(忽略index.vue)
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭prop结构的校验(props结构丢失响应式)
    //变量未定义报错
    'no-undef': 'error'
  }
}

3、打开设置（左下角）

在这里插入图片描述
在这里插入图片描述

1和2加上去

{
    "explorer.confirmDelete": false,
    "security.workspace.trust.untrustedFiles": "open",
    "workbench.editorAssociations": {
        "*.dll": "default"
    },
    
    // 1保存自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 2关闭保存自动格式化
    "editor.formatOnSave": false
}

十五、路由

在这里插入图片描述
简单介绍
在这里插入图片描述

其中这个文件是router文件夹下的index.js文件
import.meta.env.BASE_URL这个是比如使用了hash模式，其中那个#号可以在这通过变量传来，变量在vite.config.js文件中
在这里插入图片描述
语法
支持vue2的用法直接在模板中进行$xxx.push
在这里插入图片描述

十六、axios

pnpm add axios

封装跟vue2差不多，你自己看着找找

十七、路由守卫

唯一不同的就是next换成了

//全局前置路由，配合浏览器localStorage进行鉴权操作
const urls = ['/pay','/myOrder']
router.beforeEach((to, from, next) =>{
    
    // console.log(to, from);
    
    if(!urls.incloudes(to.path)){   
    	 
     	return true
    }
    //如果没有token并且还是鉴权路径
    return '/login'
})

// 全局后置路由，简单写一个弹窗，在进入每一个路由组件后弹出一句话
router.afterEach(() =>{
    alert('欢迎你！！');
})

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

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

相关文章

M1/M2芯片Parallels Desktop 19安装使用教程（超详细）

M1/M2芯片Parallels Desktop 19安装使用教程（超详细）

引言 在Window上VMware最强&#xff0c;在Mac上毫无疑问Parallels Desktop为最强&#xff01; 今天带来的是最新版Parallels Desktop 19的安装使用教程。 1. 下载安装包 Parallels Desktop 19安装包&#xff1a;https://www.aliyundrive.com/s/ThB8Fs6D3AD Parallels Deskto…
阅读更多...
ctfshow web入门（21-28爆破）

ctfshow web入门（21-28爆破）

web21 抓包 进行了base64加密&#xff0c;解码后发现账号和密码格式是 账号:密码 爆破 位置一开始选错了&#xff0c;应该是不含Basic的 模式选择custom iterator(自定义迭代器) 自定义迭代器可以自定义拼接方式 分别设置三个位置&#xff0c;第一个位置为admin 第二个位置…
阅读更多...
HONEYWELL 0574-A-012 0574-A-0131 工控DCS系统模块

HONEYWELL 0574-A-012 0574-A-0131 工控DCS系统模块

工业控制分布式控制系统&#xff08;DCS&#xff09;模块是用于自动化和监控工业过程的关键组件。它们具有多种功能和特点&#xff0c;以满足工业自动化的不同需求。以下是工控DCS系统模块的一些常见产品特点&#xff1a; 分布式控制&#xff1a;HONEYWELL 0574-A-012 0574-A-0…
阅读更多...
外汇天眼：多平台涉嫌欺诈，各监管机构出手打击！

外汇天眼：多平台涉嫌欺诈，各监管机构出手打击！

在当今快速发展的金融领域&#xff0c;随着外汇和加密货币市场的崛起&#xff0c;投资者们享受到了前所未有的多元化投资机会。然而&#xff0c;这个多元化的市场也引来了一些不法分子&#xff0c;威胁着投资者的资金和信任。就在上周&#xff0c;多个平台涉嫌欺诈&#xff0c;…
阅读更多...
VBA学习方法3.2.4：VBA中的查找操作

VBA学习方法3.2.4：VBA中的查找操作

【分享成果&#xff0c;随喜正能量】一旦被欲望的毒箭射中&#xff0c;心会变得麻木&#xff0c;失去觉知&#xff0c;甚至疯狂。如果没有及时清醒&#xff0c;就会如同爱美的飞蛾扑向火焰、贪吃的鱼儿被鱼钩钓起&#xff0c;当发现自己身处险境时&#xff0c;后悔也来不及了。…
阅读更多...
nodeJs+jwt实现小程序tonken鉴权

nodeJs+jwt实现小程序tonken鉴权

nodeJsjwt实现小程序tonken鉴权 自我记录 config\config.js // 配置文件 module.exports {DBHOST: 127.0.0.1,DBPORT: 27017,DBNAME: test,secret: xxxxx,// 小程序的appSecretAppID: xxxxx,// 小程序的appId }token中间件 middlewares\checkTokenMiddleware.js //导入 jwt…
阅读更多...
密码学【第一节：密码学概述】

密码学【第一节：密码学概述】

前言 在区块链的整个体系中大量使用了密码学算法&#xff0c;比如用于 PoW 的哈希算法&#xff0c;用于完整性验证的 Merkle Tree&#xff0c;用于交易签名与验证的数字签名算法&#xff0c;用于隐私保护的零知识证明等等。 可以说密码学是保证区块链安全的基石&#xff0c;而区…
阅读更多...
AIRIOT亮相IOTE2023深圳物联网展，产品创新力再获“IOTE金奖”

AIRIOT亮相IOTE2023深圳物联网展，产品创新力再获“IOTE金奖”

9月20-22日&#xff0c;IOTE 2023第二十届深圳国际物联网展在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为物联网领域年度最重要的行业盛会之一&#xff0c;本届展会以“IoT构建数字经济底座”为主题&#xff0c;汇聚全球来自工业、物流、基建、智慧城市、智慧…
阅读更多...
java项目之旅游景点线路网站（ssm源码+文档）

java项目之旅游景点线路网站（ssm源码+文档）

项目简介 旅游景点线路网站实现了以下功能&#xff1a; 管理员&#xff1a;个人中心、会员管理、景点分类管理、旅游景点管理、旅游线路管理、系统管理。会员&#xff1a;个人中心、旅游景点管理、旅游线路管理、我的收藏管理等操作。 &#x1f495;&#x1f495;作者&#x…
阅读更多...
OSPF特殊区域NSSA和Totally NSSA详解及配置

OSPF特殊区域NSSA和Totally NSSA详解及配置

本文主要介绍OSPF中的另外一种特殊区域&#xff1a;NSSA以及Totally NSSA区域。 如下图&#xff1a; 当AR1和AR3同时连接到某一外部网络&#xff0c;AR3引入外部路由到OSPF域&#xff0c;AR1所在的Area 1为减小LSDB规模被设置为Stub或Totally Stub区域。这时&#xff0c;由于…
阅读更多...
滴答定时器SysTick和os_cpu_a.asm（UCOS的移植）

滴答定时器SysTick和os_cpu_a.asm（UCOS的移植）

一、滴答定时器SysTick 滴答定时器是一个 24 位的倒计数定时器&#xff0c;当计到 0 时&#xff0c;将从 RELOAD 寄存器中自动重装载定时器初值&#xff0c;只要不把它在 SysTick 控制以及状态寄存器中的使能位清零&#xff0c;就将永久不息。SysTick 的最大使命&#xff0c;就…
阅读更多...
Windows Server 2022 安全功能重大更新

Windows Server 2022 安全功能重大更新

这篇文将介绍 Windows Server 2022 中的一些新增的安全功能&#xff0c;在 Windows Server 2019 的强大基础之上引入了许多创新功能。 文章目录 一、传输&#xff1a;Windows Server 2022 上默认启用 HTTPS 和 TLS 1.3二、安全 DNS&#xff1a;通过基于 HTTPS 的 DNS 实现 DNS…
阅读更多...
基于SpringBoot的CSGO赛事管理系统springboot20

基于SpringBoot的CSGO赛事管理系统springboot20

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…
阅读更多...
功率放大器是不是越大越好用

功率放大器是不是越大越好用

功率放大器的大小是个相对的概念&#xff0c;没有绝对的“越大越好用”的说法。不同的应用场景和需求需要不同大小的功率放大器&#xff0c;因此选择适合的功率放大器是很重要的。 我们需要明确功率放大器的作用是对信号进行放大&#xff0c;使其能够驱动负载。因此&#xff0c…
阅读更多...
c++均值滤波：cv::blur

c++均值滤波：cv::blur

c均值滤波&#xff1a;cv::blur cv::blur 是 OpenCV 中用于进行均值滤波的函数。均值滤波是一种基本的图像平滑处理方法&#xff0c;它用于减小图像中的噪声&#xff0c;平滑图像并模糊细节。 以下是 cv::blur 的一般形式&#xff1a; void cv::blur(cv::InputArray src, cv…
阅读更多...
【idea】idea设置远程ssh启动项目

【idea】idea设置远程ssh启动项目

阅读更多...
百分比组件

百分比组件

//组件 <template><div :class"className" :style"{ height: height, width: width }" style"overflow: hidden;" /> </template><script> export default {props: {className: {type: String,default: "chart&quo…
阅读更多...
springboot+vue+java天气预报管理系统1439

springboot+vue+java天气预报管理系统1439

本天气管理系统使用了开源框架SpringBoot开发实现了天气管理系统&#xff0c;并且使用了开发工具idea和数据库MySQL。在开发实现天气管理系统之前&#xff0c;需要对系统进行需求分析和调研&#xff0c;从而分析出天气管理系统需要具备什么样的功能&#xff0c;设计出对应的总体…
阅读更多...
U盘数据防泄密软件（U盘防泄密加密软件都有哪些？）

U盘数据防泄密软件（U盘防泄密加密软件都有哪些？）

随着科技的发展&#xff0c;U盘已经成为了我们日常生活中不可或缺的一部分。然而&#xff0c;U盘的便捷性也带来了安全隐患。为了保护您的数据安全&#xff0c;U盘防泄密加密系统应运而生。本文将从三个方面为您介绍U盘防泄密加密系统是什么、有哪些以及能做什么。 一、U盘防泄…
阅读更多...
DataX: Ⅱ

DataX: Ⅱ

序言 这里使用的是master分支,因为官网上并没有release分支,所以先用master分支吧,可能会有问题cuiyaonan2000163.com 参考资料: https://github.com/alibaba/DataXhttps://github.com/alibaba/DataX/blob/master/introduction.md --插件说明文档 源码打包 首先下载 Git…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023