Vue3[黑马笔记]未完待续

优势

组合式API

复制代码
同功能相关的内容进行集合式管理

使用creat-vue 创建项目

复制代码
执行npm i下载对应的配置文件

项目目录

复制代码
setup 允许直接在script中编写组合式API

组合式api

setup

执行时机

复制代码
1.先于beforeCreat函数 
2.setup 函数中获取不到this
3.数据与函数需要在setup最后return才能在模板中应用
js 复制代码
<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语法糖

js 复制代码
<script setup>

    //数据

    const data="hello vue3"

    //函数

    const logMessage=()=>{

      console.log(data);

    }

</script>

组合式API reactive 与 ref函数

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

reactive()

1.作用

接受对象类型的参数传入,并返回一个响应式的对象

2.核心步骤

接收对象类型数据,返回响应式对象

js 复制代码
<script setup>

//导入

import { reactive } from 'vue';

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

</script>
js 复制代码
<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.操作

js 复制代码
<script setup>

//导入

import { ref } from 'vue';

  

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

  

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

</script>

computed()

js 复制代码
<script setup>

//1.导入computed函数

import { computed } from 'vue';

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

const computedState = computed(()=>{

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

})

</script>
js 复制代码
<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响应式数据,和回调函数)

深度监听

js 复制代码
<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变化的时候才执行回调

js 复制代码
const userInfo=ref({

  name:'ww',

  age:18

})
js 复制代码
//5.对对象中的属性进行监视

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

  console.log(newValue,oldValue)

})

生命周期函数

js 复制代码
<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接收
js 复制代码
父组件
<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>
js 复制代码
<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.父组件中给子组件标签通过@绑定事件
js 复制代码
<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>
js 复制代码
<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即可访问到绑定的元素(必须渲染完成后才能拿到,使用生命周期钩子)

js 复制代码
<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编译宏指定哪些属性与方法允许访问

js 复制代码
//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>
js 复制代码
//组件
<script setup>

const count = 9999

const sayHi=()=>{

    console.log("打招呼");

}

  

defineExpose({

    count,

    sayHi

})

</script>

  

<template>

  

  <div>

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

  </div>

</template>

provide 和 inject


js 复制代码
//顶层组件
<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>
js 复制代码
//底层组件
<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


js 复制代码
//主组件
<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>
js 复制代码
<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的替代品

相关推荐
Cathy Bryant1 天前
矩阵乘以向量?向量乘以向量?
笔记·神经网络·考研·机器学习·数学建模
递归不收敛1 天前
Conda 常用命令汇总(新手入门笔记)
笔记·conda
前端橙一陈1 天前
Salesforce Developer Edition(开发者版) 搭建测试环境
经验分享·笔记·其他
电子小子洋酱1 天前
BearPi小熊派 鸿蒙入门开发笔记(4)
笔记·华为·harmonyos
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 通过配置类代码方式修改静态资源配置 笔记32
java·spring boot·笔记
JNU freshman1 天前
Element Plus组件
前端·vue.js·vue3
聪明的笨猪猪1 天前
Java JVM “内存(1)”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
_dindong1 天前
Linux网络编程:Socket编程TCP
linux·服务器·网络·笔记·学习·tcp/ip
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 属性优先级 行内写法 变量选择 笔记42
java·spring boot·笔记
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 总结 热部署 常用配置 笔记44
java·spring boot·笔记