前端学习——Vue (Day8)

最新推荐文章于 2024-07-08 18:51:22 发布
最新推荐文章于 2024-07-08 18:51:22 发布
阅读量274 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/132014713
版权

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

在这里插入图片描述

肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目实战实例代码
12-23
在本实践项目中，我们将深入探索Vue.js框架的使用，通过两个具体的实例代码——"day01_eesy_vuejsdemo"和"VueCnodeJS-master"来加深理解。Vue.js是一个轻量级的前端JavaScript框架，它以数据绑定和组件化为核心，极...
前端课程设计资料.7z
04-27
"day01"可能是一个按天划分的学习目录，包含第一天学习的资料，如笔记、代码示例等，帮助系统性地学习前端课程。 "JS网页版贪吃蛇小游戏"是一个基于JavaScript编写的经典游戏——贪吃蛇的实现。这样的项目有助于...
前端学习——Vue #day7#
m0_59482006的博客
04-08 329
前面学习的props是将数据从父级向子级传递，而不能将数据从子级向父级传递，而今天学习的$emit方法触发自定义事件可以将数据从子级传递到父级。1.在子级中，首先是触发事件2.然后通过#emit向父级发送触发事件3.在父级中，首先接受触发事件4.然后是执行事件。
前端学习——vue基础
m0_58149048的博客
07-13 327
前端学习——vue基础
前端学习——Vue#day3#
m0_59482006的博客
03-28 153
clientX、clientY、pageX、pageY、screenX、screenY：由鼠标事件触发时的鼠标相对于浏览器窗口、文档、屏幕的坐标；shiftKey、ctrlKey、altKey、metaKey：由按键事件触发时的 Shift、Ctrl、Alt、Meta 键的状态。button、buttons：由鼠标事件（如 click、mousedown、mouseup）触发时的鼠标按钮的标识码和状态码；keyCode、key：由按键事件（如 keyup、keydown）触发时的按键的键码和键名；
前端学习——Vue #day6#
m0_59482006的博客
04-07 540
要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。在父组件中使用子组件时，不太容易定位子组件的实现。通过props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型的数据，例如：数字、对象、数组等。一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。我们可以使用 Vue实例的。
前端学习——Vue #day5#
m0_59482006的博客
04-01 273
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的ref是一个特殊的 attribute，和v-for章节中提到的key类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。
前端学习——Vue (Day4)
qq_46574748的博客
07-26 159
子组件 父组件 子组件 父组件
前端学习——Vue (Day3)
qq_46574748的博客
07-25 123
template > < div class = "App" > < div class = "box" @click = "fn" > < / div > < / div > < / template > < script > // 导出的是当前组建的配置项 // 里面可以提供data（特殊） methods computed watch 生命周期 export default {console . log('我是created') } , methods : {fn() {
前端学习——Vue (Day6)
qq_46574748的博客
07-30 287
shift+鼠标右键——在powershell中打开vue create + 项目名空格表示选中。
前端学习——Vue (Day1)
qq_46574748的博客
07-22 239
Vue2官网：https://v2.cn.vuejs.org/
【批量下载】day6等.zip
06-28
【批量下载】day6等.zip 是一个包含与Vue.js相关的学习资源的压缩包，其中可能包括教程、文档、代码示例等内容。Vue.js 是一款流行的前端JavaScript框架，由尤雨溪开发，它以其易学易用、高性能和灵活性受到开发者们...
老男孩教育前端笔记
03-20
【老男孩教育前端笔记】是源自知名IT教育机构——老男孩教育的一份前端学习资料，主要涵盖第14和15周的课程内容。这些笔记是深入理解和掌握前端开发技术的重要资源，尤其对于初学者或者想要提升前端技能的开发者来说...
Day19:竞技场Day19
03-27
5. React/Vue/Angular：前端框架，用于构建大型单页应用程序（SPA）。 6. Web APIs：如WebSocket、Geolocation、Canvas等，扩展了JavaScript的功能。 7. 测试和调试：使用Mocha、Chai等工具进行单元测试，使用Chrome...
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 922
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1119
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
HTML_表单 和 表单案例
secret010的博客
07-05 235
【代码】HTML_表单 和 表单案例。
WebGIS面试题
最新发布
热爱WebGIS的博客
07-08 262
文章目录1. 前端1.1. 选择器的优先级1.2. CSS 中它的布局有哪些？1.3. CSS3 的新特性1.4. CSS 的两种盒子模型1.5. CSS 的伪元素选择器和伪类选择器有哪些？1.6. ES6 的新特性1.7. 谈谈你对 promise 的理解1.8. 简单说一下原型链1.9. 简单说一下深浅拷贝1.10. 去掉一个数组的重复元素，你是怎么做的，请具体说说1.11. 说说同步和异步的区别？1.12. 立即执行函数是什么？1.13. 说说 this 的指向1.14. 请你说说 new 操作符具体
前端学习网站 vue2
06-13
有很多学习 Vue.js 的网站，以下是一些推荐的： 1. Vue.js官方文档：https://vuejs.org/ 2. Vue Mastery：https://www.vuemastery.com/ 3. Vue School：https://vueschool.io/ 4. Codecademy Vue.js课程：https://www.codecademy.com/learn/learn-vue-js 5. Udemy Vue.js课程：https://www.udemy.com/topic/vue-js/ 希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值