前端学习——Vue (Day8)

振华首席娱记2023-08-01 21:09

Vue3



create-vue搭建Vue3项目

注意要使用nodejs16.0版本以上，windows升级node可以西安使用where node查看本地node位置，然后到官网下载msi文件，在本地路径下安装即可

安装完可以使用node -v检查版本信息

项目目录和关键文件

组合式API - setup选项

javascript 复制代码 
<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>


javascript 复制代码 
<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>
javascript 复制代码 
<!-- <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()

javascript 复制代码 
<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()

javascript 复制代码 
<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


javascript 复制代码 
<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

基础使用 - 侦听单个数据

基础使用 - 侦听多个数据

javascript 复制代码 
<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

javascript 复制代码 
<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>

精确侦听对象的某个属性

javascript 复制代码 
<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 - 生命周期函数

生命周期函数基本使用

执行多次

javascript 复制代码 
<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下的父传子

javascript 复制代码 
<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>
javascript 复制代码 
<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

跨层传递普通数据

跨层传递响应式数据

跨层传递方法

javascript 复制代码 
<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>
javascript 复制代码 
<script setup>
import BottomCom from './bottom-com.vue'

</script>

<template>
  <div>
    <h2>中间组件</h2>
    <BottomCom></BottomCom>
  </div>
</template>
javascript 复制代码 
<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

相关推荐
hnlucky2 分钟前
redis 数据类型新手练习系列——Hash类型
数据库·redis·学习·哈希算法
DN金猿7 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子7 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
Invinciblenuonuo10 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫12 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（11）： てあります。
学习
志存高远6620 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_32 分钟前
# 构建词汇表：自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
2501_915373881 小时前
Node.js 学习入门指南
学习·node.js
天天扭码1 小时前
总所周知，JavaScript中有很多函数定义方式，如何“因地制宜”？(ˉ﹃ˉ)
前端·javascript·面试
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10【2025年最新】OpenWrt 更换国内源的指南（图形界面版)