前端学习——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

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库（高效将 Markdown 转换为 HTML 的利器）
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类，到底有什么用？——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
zhuyixiangyyds5 小时前
day21和day22学习Pandas库
笔记·学习·pandas
每次的天空5 小时前
Android学习总结之算法篇四（字符串）
android·学习·算法
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】