前端学习——Vue (Day8)

news2024/11/17 16:19:08

Vue3

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

create-vue搭建Vue3项目

在这里插入图片描述在这里插入图片描述
注意要使用nodejs16.0版本以上，windows升级node可以西安使用where node查看本地node位置，然后到官网下载msi文件，在本地路径下安装即可
在这里插入图片描述
安装完可以使用node -v检查版本信息
在这里插入图片描述

项目目录和关键文件

在这里插入图片描述

组合式API - setup选项

在这里插入图片描述

<script>
// setup函数
// 1. 执行时机：比beforeCreate还要早
// 2. setup函数中，获取不到this（this是undefined）
export default{
  setup(){
    // console.log('setup函数',this);
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  }
}
</script>

<template>
  <div>学习Vue3</div>
</template>

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

<script>
// setup函数
// 1. 执行时机：比beforeCreate还要早
// 2. setup函数中，获取不到this（this是undefined）
// 3. 数据和函数，需要在setup最后return才能在模板中应用
export default{
  setup(){
    // console.log('setup函数',this);
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  }
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

在这里插入图片描述

在这里插入图片描述

<!-- <script>
// setup函数
// 1. 执行时机：比beforeCreate还要早
// 2. setup函数中，获取不到this（this是undefined）
// 3. 数据和函数，需要在setup最后return才能在模板中应用
export default{
  setup(){
    // console.log('setup函数',this);
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  }
}
</script> -->

<script setup>
const message = 'hello Vue3'
const logMessage=()=>{
  console.log(message)
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

在这里插入图片描述

在这里插入图片描述

组合式API - reactive和ref函数

reactive()

在这里插入图片描述

<script setup>
// reactive语法：接受对象类型数据的参数传入，并返回一个响应式的对象
import { reactive } from 'vue';
const state = reactive({
  count:100
})
const setCount=()=>{
  state.count++
}
</script>

<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

在这里插入图片描述

ref()

在这里插入图片描述

<script setup>
// reactive语法：接受对象类型数据的参数传入，并返回一个响应式的对象
// import { reactive } from 'vue';
// const state = reactive({
//   count:100
// })
// const setCount=()=>{
//   state.count++
// }

// 如果是简单类型，怎么办？
// 脚本中访问数据，需要通过value
// 在template中，.value不需要加
import { ref } from 'vue'
const count = ref(0)
const setCount=()=>{
  count.value++
}
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

在这里插入图片描述
日后编码统一使用ref()
在这里插入图片描述

组合式API - computed

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

<script setup>
// const 计算属性 = computed(() => {return计算返回的结果})

import { computed, ref } from "vue";
// 声明数据
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);

// 基于list派生一个计算属性，从list中过滤出大于2
const computedList = computed(() => {
  return list.value.filter((item) => item > 2);
});

// 定义一个修改数组的方法
const addFn=()=>{
  list.value.push(666)
}
</script>

<template>
  <div>原始数据：{{ list }}</div>
  <div>计算后的数据：{{ computedList }}</div>
  <button @click="addFn" type="button">修改</button>
</template>

在这里插入图片描述

在这里插入图片描述

组合式API - watch

在这里插入图片描述

基础使用 - 侦听单个数据

在这里插入图片描述

基础使用 - 侦听多个数据

在这里插入图片描述

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

const changeCount=()=>{
  count.value++
}
const changeName=()=>{
  nickname.value = '里四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue)=>{...})
watch(count,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr)=>{...})
watch([count,nickname],(newArr,oldArr)=>{
  console.log(newArr,oldArr)
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeName">改昵称</button>
</template>

在这里插入图片描述

immediate

在这里插入图片描述

deep

在这里插入图片描述

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

const changeCount=()=>{
  count.value++
}
const changeName=()=>{
  nickname.value = '里四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue)=>{...})
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// })

// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr)=>{...})
// watch([count,nickname],(newArr,oldArr)=>{
//   console.log(newArr,oldArr)
// })

// 3.immediate立即执行
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// },{
//   immediate:true
// })

// 4.deep深度监视:默认watch进行的是浅层监视
const useInfo = ref({
  name:'张三',
  age:18
})
const setUserInfo=()=>{
  // 修改了useInfo.value 修改了对象的地址,才能监视到
  // useInfo.value = {name : 'ls',age:50}
  useInfo.value.age++
}
watch(useInfo,(newValue)=>{
  console.log(newValue)
},{
  deep:true
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeName">改昵称</button>
  <div>{{ useInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>

在这里插入图片描述

精确侦听对象的某个属性

在这里插入图片描述

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

const changeCount=()=>{
  count.value++
}
const changeName=()=>{
  nickname.value = '里四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue)=>{...})
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// })

// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr)=>{...})
// watch([count,nickname],(newArr,oldArr)=>{
//   console.log(newArr,oldArr)
// })

// 3.immediate立即执行
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// },{
//   immediate:true
// })

// 4.deep深度监视:默认watch进行的是浅层监视
const useInfo = ref({
  name:'张三',
  age:18
})
const setUserInfo=()=>{
  // 修改了useInfo.value 修改了对象的地址,才能监视到
  // useInfo.value = {name : 'ls',age:50}
  useInfo.value.age++
}

// 4. deep深度监视 
// watch(useInfo,(newValue)=>{
//   console.log(newValue)
// },{
//   deep:true
// })

// 5. 对于对象中的属性,进行监视
watch(()=>useInfo.value.age,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeName">改昵称</button>
  <div>{{ useInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>

在这里插入图片描述

在这里插入图片描述

组合式API - 生命周期函数

在这里插入图片描述

生命周期函数基本使用

在这里插入图片描述

执行多次

在这里插入图片描述

<script setup>

import { onMounted } from 'vue';
// beforeCreated 和 created 的相关代码放在 setup 中执行
const getList = () =>{
  setTimeout(()=>{
    console.log('发送请求,获取数据')
  },2000)
}

// 已进入页面的请求
getList()

// 如果有写代码需要在mounted生命周期中执行
onMounted(()=>{
  console.log('mounted生命周期函数')
})
// 可调用多次,不会冲突,按照顺序依次执行
onMounted(()=>{
  console.log('mounted生命周期函数1')
})
</script>

<template>
  <div></div>
</template>

在这里插入图片描述

在这里插入图片描述

组合式API - 父子通信

组合式API下的父传子

在这里插入图片描述

<script setup>
// 注意:由于写了setup,所以无法直接配置props
// 此处要借助于编译器宏函数接收
const props = defineProps({
    car:String,
    money:Number
})
console.log(props.car)
console.log(props.money)
</script>

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

<style scoped>
.son {
    border: 1px solid #000;
    padding: 30px;
}

</style>

<script setup>
import SonCom from '@/components/son-com.vue'
import {ref} from 'vue'
// 局部组件导入进来就能用
const money = ref(100)
const getMoney = () => {
  money.value+=10
}
</script>

<template>
  <div>
    <h1>
      父组件 - {{ money }}
      <button @click="getMoney">挣钱</button>
    </h1>
    <!-- 给子组件,以添加属性的方式传值 -->
    <SonCom car="宝马车" :money="money"></SonCom>
  </div>
</template>

在这里插入图片描述

在这里插入图片描述

组合式API下的子传父

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

组合式API - 模版引用

在这里插入图片描述

如何使用（以获取dom为例 组件同理）

在这里插入图片描述

defineExpose()

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

组合式API - provide和inject

在这里插入图片描述

跨层传递普通数据

在这里插入图片描述

跨层传递响应式数据

在这里插入图片描述

跨层传递方法

在这里插入图片描述

<script setup>
import CenterCom from "@/components/center-com.vue";
import { provide, ref } from "vue";

// 1.跨层传递普通数据
provide("theme-color", "pink");

// 2.跨层传递响应式数据
const count = ref(100);
provide("count", count);

setTimeout(() => {
  count.value = 500;
}, 2000);

// 3.跨层级传递函数,给子孙后代传递可以修改数据的方法
provide("changeCount", (newCount) => {
  count.value = newCount;
});
</script>

<template>
  <div>
    <h1>顶层组件</h1>
    <CenterCom></CenterCom>
  </div>
</template>


<script setup>
import BottomCom from './bottom-com.vue'

</script>

<template>
  <div>
    <h2>中间组件</h2>
    <BottomCom></BottomCom>
  </div>
</template>


<script setup>
import {inject} from 'vue'
const themeColor = inject('theme-color')
const count = inject('count')
const changeCount = inject('changeCount')
const clickFn=()=>{
    changeCount(1000)
}
</script>

<template>
  <div>
    <h3>底层组件 - {{ themeColor }} - {{ count }}</h3>
    <button @click="clickFn">更新count</button>
  </div>
</template>

在这里插入图片描述

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

Vue3.3新特性-defineOptions

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

Vue3.3新特性-defineModel

在这里插入图片描述

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

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

相关文章

Bean的加载方式

Bean的加载方式

目录 1. 基于XML配置文件 2. 基于XML注解方式声明bean 自定义bean 第三方bean 3.注解方式声明配置类 扩展1&#xff0c;FactoryBean 扩展2,加载配置类并加载配置文件&#xff08;系统迁移) 扩展3&#xff0c;proxyBeanMethodstrue的使用 4. 使用Import注解导入要注入的bean…
阅读更多...
【Liux下6818开发板(ARM)】触摸屏

【Liux下6818开发板(ARM)】触摸屏

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…
阅读更多...
怎么通过通过 p 名称空间配置 bean以及怎么去引用/注入其它 bean 对象--ref和怎么去引用/注入内部 bean 对象-内部 bean 对象

怎么通过通过 p 名称空间配置 bean以及怎么去引用/注入其它 bean 对象--ref和怎么去引用/注入内部 bean 对象-内部 bean 对象

&#x1f600;前言 本章是spring基于XML 配置bean系类中第2篇讲解怎么通过通过 p 名称空间配置 bean以及怎么去引用/注入其它 bean 对象–ref和怎么去引用/注入内部 bean 对象 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0…
阅读更多...
小白三步即可设置企业在线帮助中心？

小白三步即可设置企业在线帮助中心？

设置企业在线帮助中心是提升客户服务质量和用户体验的重要举措。以下将介绍三个简单的步骤&#xff0c;帮助企业建立一个高效的在线帮助中心。 第一步&#xff1a;规划与设计 在设置企业在线帮助中心之前&#xff0c;需要进行一定的规划和设计工作&#xff0c;确保帮助中心能够…
阅读更多...
MPAndroidChart学习及问题处理

MPAndroidChart学习及问题处理

1.添加依赖 项目目录->app->build.gradle dependencies {implementation com.github.PhilJay:MPAndroidChart:v3.0.3 }项目目录->app->setting.gradle dependencyResolutionManagement {repositories {maven { url https://jitpack.io }} }高版本的gradle添加依…
阅读更多...
解决路由缓存问题

解决路由缓存问题

产生原因 路由只有参数发生变化时 会复用组件实例 解决 1.选择key 简单粗暴 2.选择beforeRouteUpdate钩子函数
阅读更多...
【javaSE】 面向对象程序三大特性之继承

【javaSE】 面向对象程序三大特性之继承

目录 为什么需要继承 继承的概念 继承的语法 注意事项 父类成员访问 子类中访问父类的成员变量 子类和父类不存在同名成员变量 子类和父类成员变量同名 访问原则 子类中访问父类的成员方法 成员方法名字不同 总结&#xff1a; 成员方法名字相同 总结&#xff1a; …
阅读更多...
spider-flow可视化爬虫界面从入门到放弃

spider-flow可视化爬虫界面从入门到放弃

目录 下载编译部署官网地址编译部署启动 简单使用输出文件方式可以正常执行的任务 自定义任务获取小说名 总结 下载编译部署 官网地址 修改端口、数据库、存放地址、执行文件等配置&#xff08;前后端不分离&#xff0c;配置文件端口即页面登录端口&#xff09; spider-flow-w…
阅读更多...
Vite+Vue3 开发UI组件库并发布到npm

Vite+Vue3 开发UI组件库并发布到npm

一直对开源UI组件库比较感兴趣&#xff0c;摸索着开发了一套&#xff0c;虽然还只是开始&#xff0c;但是从搭建到发布这套流程基本弄明白了&#xff0c;现在分享给大家&#xff0c;希望对同样感兴趣的同学有所帮助。 目前我的这套名为hasaki-ui的组件库仅有两个组件&#xff0…
阅读更多...
同一个设备，插入电脑的不同USB，映射的是同一个端口号，怎么办？

同一个设备，插入电脑的不同USB，映射的是同一个端口号，怎么办？

1. 网上的说明 2. 自己的操作 3. 修改后的效果
阅读更多...
Meta AI研究团队新AI模型： Llama 2 大语言模型

Meta AI研究团队新AI模型： Llama 2 大语言模型

Llama是Facebook Research团队开发的基础语言模型集&#xff0c;旨在提供广泛的语言理解能力。它基于转换器架构&#xff0c;参数范围从7B到65B。通过使用Llama模型&#xff0c;研究人员和开发人员可以构建更先进的自然语言处理系统。您可以在GitHub上找到相关的代码和资源&…
阅读更多...
JIT 与 C#热更

JIT 与 C#热更

JIT与AOT 一般程序运行有两种方式&#xff0c;静态编译与动态编译。 AOT: Ahead Of Time,预先&#xff08;静态&#xff09;编译 静态编译的程序&#xff0c;需要在执行之前全部翻译为机器码&#xff0c;运行前会使得程序安装时间相对较长&#xff0c;但程序运行的时候&#…
阅读更多...
TDengine时区设置

TDengine时区设置

一般来说&#xff0c;时序数据就是带有时间序列属性的数据。在处理时序数据时&#xff0c;TDengine有着自己独特的方式。但是如果没有正确理解TDengine在写入和查询上的行为&#xff0c;极可能会因为配置了错误的时区&#xff08;timezone&#xff09;&#xff0c;而导致写入和…
阅读更多...
《怎样顺利通过答辩：论文答辩的策略与技巧》

《怎样顺利通过答辩：论文答辩的策略与技巧》

最近在阅读《怎样顺利通过答辩这本书》&#xff0c;记录一下阅读获取的关键信息和心得。 目录 第一章 答辩是什么 在答辩前你需要做到以下几件事情&#xff0c;核查清单如下&#xff1a; 答辩根据考生及其研究的质量&#xff0c;服务于不同的目的&#xff1a; 通常意义上的…
阅读更多...
面向对象编程三大特征

面向对象编程三大特征

1、基本介绍 面向对象编程有三大特征&#xff1a;封装、继承和多态。 1.1封装介绍 1.2封装的理解和好处 1.3封装的实现步骤 (三步) 2、面向对象编程-继承 2.1为什么需要继承 2.2继承基本介绍和示意图 继承可以解决代码复用,让我们的编程更加靠近人类思维.当多个类存在相同的…
阅读更多...
rtabmap 主从机 rviz 订阅 /rtabmap/mapData 时报错

rtabmap 主从机 rviz 订阅 /rtabmap/mapData 时报错

在实体小车上跑rtabmap算法&#xff0c;在rviz上订阅 /rtabmap/mapData 话题时不显示建图信息并且报错&#xff1a; [ERROR] [xxxxxxxx]: Client [/rviz] wants topic /rtabmap/mapData to have datatype/md5sum [rtabmap/mapData/xxxxxxxxxxxxx], but our version has [rtabm…
阅读更多...
【腾讯云 Cloud Studio 实战训练营】Redisgo_task 分布式锁实现

【腾讯云 Cloud Studio 实战训练营】Redisgo_task 分布式锁实现

文章目录 前言问题场景腾讯云 Cloud Studio Redisgo_task长短类型分布式场景介绍Redisgo_task实现原理SetNx(valueexpire)原子性子协程Done()时间点子协程中的Ticker Redisgo_task唯一外部依赖Redisgo_task Lock结构Redisgo_task架构健壮性设计Redisgo_task可扩展性Redisgo_tas…
阅读更多...
ALLEGRO之FlowPlan

ALLEGRO之FlowPlan

本文主要讲述了ALLEGRO的FlowPlan菜单。 &#xff08;1&#xff09;Auto Bundle&#xff1a;暂不清楚&#xff1b; &#xff08;2&#xff09;Create Bundle&#xff1a;暂不清楚&#xff1b; &#xff08;3&#xff09;Delete Bundle&#xff1a;暂不清楚&#xff1b; &…
阅读更多...
earth靶机详解

earth靶机详解

earth靶机复盘 靶场下载地址&#xff1a;https://download.vulnhub.com/theplanets/Earth.ova 这个靶场还是非常有意思的&#xff0c;值得去打一下。 我们对拿到的ip进行一个单独全面的扫描&#xff0c;发现有两个DNS解析。 就把这两条解析添加到hosts文件中去&#xff0c;要…
阅读更多...
IO进程线程第三天（7.31）time，localtime，文件io函数：open，umask，close，write，read，lseek，stat，

IO进程线程第三天（7.31）time，localtime，文件io函数：open，umask，close，write，read，lseek，stat，

用read函数完成图片文件拷贝 #include<stdio.h> #include<head.h> int main(int argc, const char *argv[]) {//umask(0);//将文件权限掩码改为0&#xff0c;使得其他用户可写int fd open("/home/ubuntu/图片/2.jpg",O_RDONLY,0777);//打开图片if(fd&l…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023