Vue3[黑马笔记]未完待续

最新推荐文章于 2024-06-28 23:05:31 发布
最新推荐文章于 2024-06-28 23:05:31 发布
阅读量370 收藏 4
点赞数 4
分类专栏： 前端 文章标签： 笔记 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73270720/article/details/138254414
版权

优势

在这里插入图片描述

组合式API

同功能相关的内容进行集合式管理

在这里插入图片描述

在这里插入图片描述

使用creat-vue 创建项目

在这里插入图片描述

在这里插入图片描述

执行npm i下载对应的配置文件

项目目录

在这里插入图片描述

在这里插入图片描述

setup 允许直接在script中编写组合式API

组合式api

setup

执行时机

1.先于beforeCreat函数 
2.setup 函数中获取不到this
3.数据与函数需要在setup最后return才能在模板中应用

<script>

export default{

  setup(){

    console.log("setup函数" + this);

    //数据

    const data="hello vue3"

    //函数

    const logMessage=()=>{

      console.log(data);

    }

    //使用数据与函数需要return  

    return{

      data,

      logMessage

    }

  

  },

  beforeCreate(){

    console.log("beforecreate函数")

  }

}

</script>

4.每次都需要return麻烦
---使用语法糖

setup语法糖

<script setup>

    //数据

    const data="hello vue3"

    //函数

    const logMessage=()=>{

      console.log(data);

    }

</script>

组合式API reactive 与 ref函数

用函数调用的方式生成响应式数据

reactive()

1.作用
接受对象类型的参数传入,并返回一个响应式的对象
2.核心步骤
接收对象类型数据,返回响应式对象

<script setup>

//导入

import { reactive } from 'vue';

//执行函数 传入参数 变量接收
const state=reactive(对象类型数据)

</script>

<script setup>

//导入

import { reactive } from 'vue';

//执行函数 传入参数 变量接收

const state=reactive({

  count:100

})

  

const res=()=>{

  state.count++

}

</script>

  
  

<template>

  <div>学习vue3</div>

  

 <div>{{ state.count }}

 </div>

  

 <button @click="res">加一</button>

</template>

ref()

1.作用
接收简单类型或对象类型的数据 传入
返回一个响应式的对象
2.本质
在原有数据的基础上外层包了一层对象,包成了复杂数据类型
3.底层
包成复杂类型之后,再借用reactive实现响应式
4.注意
脚本中访问数据: .value
template中 .value不需要加(帮我们扒了一层)
5.操作

<script setup>

//导入

import { ref } from 'vue';

  

//执行函数 传入参数 变量接收

  

const count =ref(简单数据类型或者复杂类型数据)

</script>

computed()

<script setup>

//1.导入computed函数

import { computed } from 'vue';

//2.执行函数在回调参数中 return 基于响应式数据做计算的值,用于变量的接收

const computedState = computed(()=>{

  return 基于响应式数据做计算之后的值

})

</script>

<script setup>

import { computed ,ref} from 'vue';

//声明数据

const list = ref([1,2,3,4,5,6,7])

console.log(list);

console.log(list.value)

//基于list 派生计算属性,从list中过滤出>2

  

const computedState = computed(()=>{
  return list.value.filter(item => item > 2 )

})

//定义一个修改数据的方法

const addFn = ()=>{
  list.value.push(666)
}

</script>

  
  

<template>

  <div>学习vue3</div>

  <div>原始数据: {{ list }}</div>

  <div>计算后的数据:{{ computedState }}</div>

  <button @click="addFn">加666</button>

</template>

watch

监听一个或多个数据的变换,数据变化时执行回调函数
1.导入watch函数
2.执行watch函数(传入ref响应式数据,和回调函数)

深度监听

<script setup>

//1.导入watch

import { ref,watch } from 'vue';

//2.调用watch 监听变化

  

const count = ref(0)

const name=ref('zs')

  

const chageCount=()=>{

  count.value++;

}

  

const changeName=()=>{

  name.value='ls'

}

  
  

//1 监听单个数据变化

// 3.immediate  立即执行(一进页面就触发)

  

watch(count,(newvalue,oldValue)=>{

  console.log(`count 发生变化,老值为${oldValue}新值为${newvalue}`);

},

{

  immediate:true

  

})

  

//2.监听多个数据变化

watch(

  [count,name],
  ([newCount,newName],[oldCount,oldName])=>{

    console.log('count或name的值变化了',[newCount,newName],[oldCount,oldName]);

  }

)

  
  

// 4.deep 深度监视(默认watch进行浅层监视

//  const ref1=ref(简单数据类型)   可以直接监视简单数据的变化, 监视不到复杂数据类型内部(只有修改复杂数据类型的地址的时候,才能监听到)

// const ref2=ref(复杂数据类型)

  
  

const userInfo=ref({

  name:'ww',

  age:18

})

const setUserInfo=()=>{

  userInfo.value.age++

}

  

watch(userInfo,(newvalue)=>{

  console.log(newvalue);

},{

  deep:true

})

</script>

  
  

<template>

  <div>{{ count }}</div>

  <button @click="chageCount">改数字</button>

  <div>{{ name }}</div>

  <button @click="changeName">改名字</button>

  _______________

  

  <div>{{ userInfo }}</div>

  <button @click="setUserInfo">改复杂类型中的名字</button>

</template>

精准侦听对象的某个属性

在不开启deep的前提下侦听age的变化,只有当age变化的时候才执行回调

const userInfo=ref({

  name:'ww',

  age:18

})

//5.对对象中的属性进行监视

watch(()=>userInfo.value.age,(newValue,oldValue)=>{

  console.log(newValue,oldValue)

})

生命周期函数

在这里插入图片描述

<script setup>

//1.beforeCreated 和 created 的相关代码

// 一律放在setup中执行

  

import { onMounted } from 'vue';

// beforeCreated 和 created

const getList=()=>{

  setTimeout(()=>{

console.log("发送请求,获取数据");

  },2000)

}

//模拟一进入页面发送请求

getList()

  
  

//2.如果有代码需要在mounted生命周期函数中执行

onMounted(()=>{

  console.log("Mounted生命周期函数 - 逻辑1");

})

  

//2.写成函数的调用方式,可以调用多次,不会冲突,而是按照顺序依次执行

onMounted(()=>{

  console.log("Mounted生命周期函数 - 逻辑2");

})

</script>

父子通信

父传子

defineProps的原理
  编译阶段的标识,遇到后会进行编译转化

1.给子组件以添加属性的方式传值

2.在子组件中,通过props接收

父组件
<script setup>

import { ref } from 'vue';

const money=ref(100)

  

const changeMoney=()=>{

  money.value+=100

}

//1.局部导入子组件

import SonCom from '@/components/son-com.vue'

  
  

</script>

  
  

<template>

<!-- 2.导入后直接使用 -->

  <div>

    <div>父组件-- {{ money }}</div>

    <button @click="changeMoney">挣钱</button>

    <!-- 给子组件以添加属性的方式传值 -->

    <!-- 1.传递固定值:car="宝马车" -->

    <!-- 2.动态传递值: :money="money"-->

    <SonCom car="宝马车" :money="money"></SonCom>

  </div>

</template>

<script setup>
子组件
//Attention : 由于写了setup,无法直接配置props选项,此处借用'编译器宏'函数来接收子组件传递的数据

const props=defineProps({

    car:String,

    money:Number

})

console.log(props.car,props.money);

  

</script>

  
  

<template>

<!-- 对于props传递过来的数据,模板中可以直接使用 -->

  <div class="son">我是子组件--{{ car }}  {{ money }}</div>

</template>

  

<style scoped>

.son{

    border: 1px solid #000;

    padding: 30px;

}

  

</style>

子传父

1.子组件内部通过emit方法触发事件
2.父组件中给子组件标签通过@绑定事件

<script setup>
子组件
const props=defineProps({

    car:String,

    money:Number

})

console.log(props.car,props.money);

const emit=defineEmits([

    'changeMoney'

])

const buy=()=>{

    //1.子组件中通过emit触发事件(通过编译器宏定义)

    emit('changeMoney',5)

}

</script>

  
  

<template>

  <div class="son">我是子组件--{{ car }}  {{ money }}</div>

  <button @click="buy">花钱</button>

</template>

  

<style scoped>

.son{

    border: 1px solid #000;

    padding: 30px;

}

  

</style>

<script setup>
父组件
import { ref } from 'vue';

const money=ref(100)

  

const changeMoney=()=>{

  money.value+=100

}

import SonCom from '@/components/son-com.vue'

  

const changeFn=(newMoney)=>{

money.value=newMoney

}

</script>

  
  

<template>

  <div>

    <div>父组件-- {{ money }}</div>

    <button @click="changeMoney">挣钱</button>

   <!-- 2.给子组件添加属性的方式,父组件接收 -->

    <SonCom

    @changeMoney="changeFn"

     car="宝马车"

      :money="money"></SonCom>

  </div>

</template>

模板引用 与 defineExporse宏函数

模板引用,可以获取dom,也可以获取组件

// 1.通过ref函数生成ref对象

// 2.通过ref标识,进行绑定

// 3.通过ref对象,.value即可访问到绑定的元素(必须渲染完成后才能拿到,使用生命周期钩子)

<script setup>

import { onMounted, ref } from 'vue';

const inp=ref(null)

console.log(inp.value);

  

//通过生命周期钩子onMounted

onMounted(()=>{

  console.log(inp.value);

  // inp.value.focus()//一进页面就聚焦

})

  

const changFn=()=>{

  inp.value.focus()

}

</script>

  

<template>

  

  <div>

    <input ref="inp" type="text">

    <button @click="changFn">点击让输入框聚焦</button>

  </div>

</template>

defineExporse()

默认情况在< script setup> 语法糖下,组件内部的属性与方法时不开放给父组件访问的,通过defineExporse编译宏指定哪些属性与方法允许访问

//APP.vue
<script setup>
import TestCom from '@/components/test-com.vue'
import { onMounted, ref } from 'vue';
//----------------------------------------------------------------

const inp=ref(null)

console.log(inp.value);

  

//通过生命周期钩子onMounted

onMounted(()=>{

  console.log(inp.value);

  // inp.value.focus()//一进页面就聚焦

})

  

const changFn=()=>{

  inp.value.focus()

  //当点击按钮的时候,肯定已经渲染完毕

}

//---------------------------------------------------------------

const testRef=ref(null)

const clickFn=()=>{

  console.log(testRef.value);

  console.log(testRef.value.count);

    console.log(testRef.value.sayHi);

}

  

</script>

  

<template>

  

  <div>

    <input ref="inp" type="text">

    <button @click="changFn">点击让输入框聚焦</button>

  </div>

  

  <TestCom ref="testRef"></TestCom>

  <button @click="clickFn">获取组件</button>

  

</template>

//组件
<script setup>

const count = 9999

const sayHi=()=>{

    console.log("打招呼");

}

  

defineExpose({

    count,

    sayHi

})

</script>

  

<template>

  

  <div>

    我是用于测试的组件----{{ count }}

  </div>

</template>

provide 和 inject

在这里插入图片描述

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

//顶层组件
<script setup>

import CenterCom from '@/components/center-com.vue'

import { provide, ref } from 'vue';

  

// 1. 跨层传递普通数据

provide('theme-clolor','pink')

// 2.跨层传递响应式数据

const count=ref(100)

provide('count',count)

// setTimeout(()=>{

// count.value+=100

// },2000)

  
  

// 3.修改数据

const changeCount=(newCount)=>{

  count.value=newCount

}

provide('setCount',changeCount)

</script>

  
  
  
  

<template>

  

<div>我是顶层组件</div>

<CenterCom></CenterCom>

</template>

//底层组件
<script setup>

import { inject } from 'vue';

  
  

const themeColor=inject('theme-clolor')

  

//-----------------------------------

  

const count=inject('count')

  

//-----------------------------

  

const setCount=inject('setCount')

const changeCount=()=>{

    setCount(10000)

}

</script>

  
  
  
  

<template>

  

<div>我是底层组件----{{ themeColor }}---------{{ count }}</div>

<button @click="changeCount">修改数据</button>

</template>

vue3新特性

defineOptions

  1. 背景
    在这里插入图片描述

在这里插入图片描述

defineModel

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

//主组件
<script setup>

import Myinput from '@/components/my-input.vue'

import { ref } from 'vue';

const txt=ref('123456')

</script>

  

<template>

  <Myinput v-model="txt"></Myinput>

  {{ txt }}

</template>

<script setup>

import { defineModel } from 'vue';

const modelValue=defineModel()

</script>

  

<template>

 <input type="text" :value="modelValue"

 @input="e=>modelValue=e.target.value">

</template>

Pinia快速入门

vue的最新 状态管理工具 vueX的替代品
在这里插入图片描述

摇光93
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue笔记黑马
04-08
vue所有笔记--黑马
defineExpose
过客如期的博客
05-13 5372
一，前言 1.在vue3的语法糖setup中，组件默认是关闭的， 2.defineExpose是用于暴露组件属性的编译宏 二，defineExpose使用 1.方法 import { defineExpose,ref } from 'vue' const a =ref(1) const submit =()=>{} defineExpose({ a, submit, }) 2.当父组件通过模板 ref 的方式获取到当前组件的实例， ref 会和在普通实例中一样被自动解包 ...
关于defineExpose的使用
qq_61616359的博客
12-26 2万+
vue3组件通信之defineExpose
Vue3父组件访问子组件数据 defineExpose用法
qq_29585681的博客
08-23 4万+
Vue3 defineExpose用法
vue2升级vue3:单文件组件概述 及 defineExpos/expose
周陆军的博客，分享it技术。
07-25 1761
像我这种react门徒被迫迁移到vue的，用管了TSX，地vue单文件组件也不太感冒，但是vue3单文件组件，造了蛮多api，还不得去了解下、没有什么好说的，就是setup中定义props与emits。、它会返回与setupContext.slots和setupContext.attrsnameprops{typeFunction,},},emits}})...
Vue3 defineProps、defineEmits、defineExpose 的作用
卡尔特斯
08-01 1534
Vue3 defineProps、defineEmits、defineExpose 的作用
vue3快速上手教学笔记.md
12-03
vue3快速上手教学笔记.md
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
VUE3笔记 VUE3 VUE
01-02
VUE3笔记 VUE3 VUE
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue3：语法糖内的defineProps及defineEmits、defineExpose
热门推荐
mosowe
10-21 7万+
defineProps 获取组件传值 <template> <h1>{{ msg }}</h1> <div @click="clickThis">1111</div> </template> <script setup lang="ts"> defineProps<{ // 采用ts专有声明，无默认值 msg: string, num?: number }>() //
vue3.x 语法糖 defineEmits defineExpose父子组件传参 以及 调用方法
小鱼干儿
02-10 3万+
defineExpose defineExpose可以将方法主动暴露出来 父组件 //通过ref <tree :show="show" ref="treeRef"> </tree> // ref const treeRef = ref() const handleClick = () => { //获取ref中的子组件方法handleNodeClick() treeRef.value.handleNodeClick() }
vue3.0 setup语法糖
总结前端开发中遇到的问题，分享前端知识
03-03 1047
<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的<script>语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typescript 声明 props 和抛出事件。 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。 #基本语法 要使用这个语法，需要将setupattribute ...
vue3+ts中 父子组件传参defineProps、defineEmits、defineExpose、defineOptions、defineModel
weixin_43512977的博客
04-23 8006
defineProps 父 <HelloWorld :list="[2, 3, 5]" msg="父组件传递给子组件" /> 子 interface Props { msg: string; list: Array<number>; } 第一种写法 没有默认值 defineProps<Props>(); 第二种写法 有默认值 withDefaults(defineProps<Props>(), { msg: "子组件默认值", list
【UE5.3】笔记6-第一个简单小游戏
最新发布
qq_35064654的博客
06-28 258
在关卡中放置一个cube，放这地面上，将其转换成蓝图类,改名BP_Cube，更换砖块的贴图，按住alt键进行拷贝，堆出一面墙，复制出来的会很多，全选移动到一个新建的文件夹里进行分类放置。这里转换成蓝图类的好处就是后面要修改这面墙的材质就不需要一个个去修改，只要在蓝图类里进行修改就行。注意要打开模拟物理。
操作系统实训复习笔记（2)
m0_74363339的博客
06-24 636
本篇博客的主要内容就是作者本人期末操作系统实训的复习的笔记。包括：Linux 常用命令介绍、Linux文件操作之创建文件，删除文件、Linux 查询命令帮助语句等等以及fork()函数创建进程、进程创建——vfork()函数和进程的终止(注册进程终止函数)等等...
今日AI提示词|新媒体运营场景-小红薯笔记通用指令
Leo-Fighting的博客
06-24 139
此次的输出结果中，配图URL是无效的，可以参考配图建议，自行搭配合适的配图。代入自己的具体场景，改写提示词，应用到实际工作中。多次迭代优化，给出详细的要求。尽量不要直接复制粘贴，
【前端项目笔记】5 分类管理
C_greenbird的博客
06-25 690
在添加分类时，未选择父级分类，则默认添加的分类是一级分类，若选择了父级分类，那么新添加的分类器父级分类id和等级都要随之更新。将当前分支保存到云端origin命名为goods_cate（带不带-u根据云端是否存在当前分支）Cascader 级联选择器：当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。git命令回顾（先本地后云端commit->push，先分支后主线merge）此时本地分支goods_cate已最新，云端分支还是旧的。此时本地master已最新，但是云端还是旧的。
vue3 黑马最新教程
09-07
黑马程序员最新的Vue教程是关于Vue全家桶最新版的视频教程，包含了近200集的内容。教程从基础的Vue组件和常用指令开始，涵盖了Vue动画教学、Vue-CLI、Vue生命周期方法、Vue-ElementUI优化、Vue-MintUI、Vue-Vant等内容，一直延伸到实战项目，可以说几乎是Vue的全栈教程。此外，有一套超过百万播放量的视频《4个小时带你快速入门Vue》，获得了全网好评，是快速入门Vue的良好资源。在教程中，还涵盖了在Vue项目中使用axios的最佳实践方案，以及Vant组件库的主题自定制方案。如果你对Vue3感兴趣，可以查看黑马程序员的最新教程，跟着视频一步步学习Vue的开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值