Vue从入门到实战Day11

一、为什么要学Vue3

 Vue3官网:简介 | Vue.js

1. Vue3的优势

2. Vue2选项式API vs Vue3组合式API

示例:

二、create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供极速响应。

2. 使用create-vue创建项目

1. 前提环境条件

已安装16.0或更高版本的Node.js

node -v

2. 创建一个Vue应用

npm init vue@latest

这一指令将会安装并执行create-vue

①创建项目

②安装依赖

③启动项目

三、熟悉项目目录和关键文件

①禁用Vue2的插件“Vetur”

②安装Vue3的插件“Vue - Official”

四、组合式API - setup选项

1. setup选项的写法和执行时机

示例:

App.vue

<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>

2. setup选项中写代码的特点

示例:

App.vue

<script>
// setup
// 1. 执行时机,比beforeCreate还要早
// 2. setup函数中,获取不到this(this是undefined)
// 3. 数据和函数,需要在setup最后return,才能在模板中应用
// 问题:每次都要return,好麻烦?
// 4. 通过setup语法糖简化代码
export default {
  setup () {
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script>

<template>
  {{ message }}
  <br>
  <button @click="logMessage">log message</button>
</template>

3. <script setup>语法糖

示例:

App.vue

<script setup>
const message = 'this is a message'
const logMessage = () => {
  console.log(message)
}
</script>

<template>
  {{ message }}
  <br>
  <button @click="logMessage">log message</button>
</template>

<script setup> 语法糖原理

4. 总结

1. setup选项的执行时机?

答:beforeCreate钩子之前 自动执行。

2. setup写代码的特点是什么?

答:定义数据 + 函数,然后以对象方式return。

3. <script setup>解决了什么问题?

答:经过语法糖的封装更简单的使用组合式API。

4. setup中的this还指向组件实例吗?

答:指向undefined。

五、组合式API - reactive和ref函数

1. reactive()

作用:接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤:

1. 从vue包中导入reactive函数

2. 在<script setup>中执行reactive函数并传入类型为对象的初始值,并使用变量接收返回值

示例:

App.vue

<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>

2. ref()

作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤:

1. 从vue包中导入ref函数

2. 在<script setup>中执行ref函数并传入初始值,使用变量接收ref函数的返回值

示例:

App.vue

<script setup>
// ref: 接收简单类型或复杂类型,返回一个响应式的对象
// 本质:在原有传入数据的基础上,外层包了一层对象,包含了复杂类型
// 底层,包成复杂类型之后,再借助reactive实现的响应式
// 注意点:
// 1. 脚本中访问数据,需要通过.value
// 2. 在template中,value不需要加(帮我们拔了一层)

// 推荐:以后声明数据,统一用ref => 统一了编码规范
import { ref } from 'vue'
const count = ref(1)

const setCount = () => {
  count.value++
}
</script>

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

3. 总结

1. reactive和ref函数的共同作用是什么?

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

2. reactive vs ref ?

答:①reactive不能处理简单类型的数据;

       ②ref参数类型支持更好但是通过.value访问修改;

       ③ref函数的内部实现依赖于reactive函数。

3. 在实际工作中推荐使用哪个?

答:推荐使用ref函数,更加灵活统一。

六、组合式API - computed

1. computed计算属性函数

计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法

核心步骤:

1. 导入computed函数

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

示例:计算属性小案例

App.vue

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

import { ref, computed } from 'vue'

// 声明数据
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])

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

// 创建一个可读的计算属性
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})
plusOne.value = 1  // set
console.log(count.value)  // 0

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

</script>

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


 

2. 总结

1. 计算属性中不应有“副作用”

比如异步请求/修改dom

2. 避免直接修改计算属性的值

计算属性应该是只读的,特殊情况可以配置get set

七、组合式API - watch

1. watch函数

作用:侦听一个或者多个数据的变化,数据变化时执行回调函数

两个额外参数:①immediate(立即执行)②deep(深度侦听)

2. 基础使用 - 侦听单个数据

①导入watch函数

②执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

3. 基础使用 - 侦听多个数据

说明:同时侦听多个响应式数据的变化,不管哪个数据变化都需要执行回调函数

示例:

App.vue

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

const changeCount = () => {
  count.value++
}

const changeNickname = () => {
  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="changeNickname">改昵称</button>
</template>

4. immediate

说明:在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调

示例:

App.vue

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

const changeCount = () => {
  count.value++
}

const changeNickname = () => {
  nickname.value = '李四'
}

// 3. immediate立即执行
watch([count, nickname], (newArr, oldArr) => {
  console.log(newArr, oldArr)
}, {
  immediate: true
}
)
</script>

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

5. deep

说明:deep,深度监视,默认watch进行的是浅层级的监视。

示例:

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

const changeCount = () => {
  count.value++
}

const changeNickname = () => {
  nickname.value = '李四'
}

// 4. deep 深度监视,默认watch进行的是浅层监视
// const ref1 = ref(简单类型) 可以直接监视
// const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  // 如果userInfo一整个对象的地址没有发生任何变化,监视不到
  // 如果想要对象内部数据的变化也能监视到,deep: true
  userInfo.value.age++

  // 修改了userInfo.value 修改了对象的地址,才能监视到
  // userInfo.value = {name: 'ls', age: 20}
}

watch(userInfo, (newValue) => {
  console.log(newValue)
}, {
  deep: true
})

</script>

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

6. 精确侦听对象的某个属性

需求:在不开启deep的前提下,侦听age的变化,只有age变化时才执行回调

示例:

App.vue

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

const changeCount = () => {
  count.value++
}

const changeNickname = () => {
  nickname.value = '李四'
}

const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  userInfo.value.age++
}

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

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

7. 总结

1. 作为watch函数的第一个参数, ref对象需要添加.value吗?

答:不需要,第一个参数就是传ref对象

2. watch只能侦听单个数据吗?

答:单个 或 多个

3. 不开启deep,直接监视复杂类型,修改属性能触发回调吗?

答:不能,默认是浅层侦听

4. 不开启deep,精确侦听对象的某个属性?

答:可以把第一个参数写成函数的写法,返回要监听的具体属性

八、组合式API - 生命周期函数

1. Vue3的生命周期API(选项式 VS 组合式)

选项式API组合式API
beforeCreate / createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted

示例:

<script setup>
import { onMounted } from 'vue';

// beforeCreate和created的相关代码,一律放在setup中执行
const getList = () => {
  setTimeout(() => {
    console.log('发送请求,获取数据')
  }, 2000)
}
// 一进入页面的请求
getList()

// 如果有些代码需要在mounted生命周期中执行
onMounted(() => {
  console.log('mounted生命周期函数 - 逻辑1')
})

// 写成函数的调用方式,可以调用多次,并不会冲突,而是按照顺序依次执行
onMounted(() => {
  console.log('mounted生命周期函数 - 逻辑2')
})
</script>

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

九、组合式API - 父子通信

1. 组合式API下的父传子

基本思想:

1. 父组件给子组件绑定属性

2. 子组件内部通过props选项接收

defineProps原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

示例:

App.vue

<script setup>
// 父传子
// 1. 父组件给子组件绑定属性
// 2. 子组件内部通过props选项接收

// 局部组件(导入进来就能用)
import SonCom from '@/components/son-com.vue'

import { ref } from 'vue'
const money = ref(10000)

const getMoney = () => {
  money.value += 5000
}
</script>

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

components/son-com.vue

<script setup>
// 子组件
// 由于写了setup,所以无法直接配置props选项
// 所以,此处需要借助于“编译器宏”函数接收子组件传递的数据
const props = defineProps({
    car: String,
    money: Number
})
console.log(props.car)
console.log(props.money)
</script>

<template>
    <!-- 对于props传递过来的数据,模板中可以直接使用 -->
  <div class="son">
    我是子组件 - {{ car }} - {{ money }}
  </div>
  
</template>

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

2. 组合式API下的子传父

基本思想:

1. 父组件中给子组件标签通过@绑定事件

2. 子组件内部通过emit方法触发事件

示例:

App.vue

<script setup>
// 父传子
// 1. 父组件给子组件绑定属性
// 2. 子组件内部通过props选项接收

// 子传父
// 1. 在子组件内部通过emit触发事件(编译器宏获得)
// 2. 在父组件中,通过@监听

// 局部组件(导入进来就能用)
import SonCom from '@/components/son-com.vue'

import { ref } from 'vue'
const money = ref(10000)

const getMoney = () => {
  money.value += 5000
}

const changeFn = (newMoney) => {
  money.value = newMoney
}
</script>

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

son-com.vue

<script setup>
// 子传父
// 由于写了setup,所以无法直接配置props选项
// 所以,此处需要借助于“编译器宏”函数接收子组件传递的数据
const props = defineProps({
    car: String,
    money: Number
})
console.log(props.car)
console.log(props.money)

const emit = defineEmits(['changeMoney'])
const buy = () => {
    // 需要emit触发事件
    emit('changeMoney', props.money - 500)
}

</script>

<template>
    <!-- 对于props传递过来的数据,模板中可以直接使用 -->
  <div class="son">
    我是子组件 - {{ car }} - {{ money }}
    <button @click="buy">花钱</button>
  </div>
  
</template>

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

3. 总结

父传子

1. 父传子的过程中通过什么方式接收props?

答:defineProps({属性名: 类型})

2. setup语法糖中如何使用父组件传过来的数据?

答:const props = defineProps({属性名: 类型})

        props.xxx

子传父

1. 子传父的过程中通过什么方式得到emit方法?

答:defineEmits(['事件名称'])

2. 怎么触发事件?

答:emit('自定义事件名', 参数)

十、 组合式API - 模板引用

1. 模板引用的概念

通过ref标识获取真实的dom对象或者组件实例对象

2. 如何使用(以获取dom为例 组件同理)

3. defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法允许访问

示例:

App.vue

<script setup>
import TestCom from './components/test-com.vue'
import { onMounted, ref } from 'vue'

// 模板引用(可以获取dom,也可以获取组件)
// 1. 调用ref函数,生成一个ref对象
// 2. 通过ref标识,进行绑定
// 3. 通过ref对象.value即可访问到绑定的元素(必须渲染完成后,才能拿到)
const inp = ref(null)

// 生命周期钩子 onMounted
onMounted(() => {
  // console.log(inp.value)
  // inp.value.focus()
})
const clickFn = () => {
  inp.value.focus()
}


const testRef = ref(null)
const getCom = () => {
  console.log(testRef.value.count)
  testRef.value.sayHi()
}

</script>

<template>
  <div>
    <input ref="inp" type="text">
    <button @click="clickFn">点击让输入框聚焦</button>
  </div>
  <TestCom ref="testRef"></TestCom>
  <button @click="getCom">获取组件</button>
</template>

test-com.vue

<script setup>
const count = 999
const sayHi = () => {
    console.log('打招呼')
}

defineExpose({
    count,
    sayHi
})
</script>

<template>
  <div>
    我是用于测试的组件 - {{ count }}
  </div>
</template>

4. 总结

1. 获取模板引用的时机是什么?

答:组件挂载完毕

2. defineExpose编译宏的作用是什么?

答:显示暴露组件内部的属性和方法

十一、组合式API - provide和inject

1. 作用和场景

顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

2. 跨层传递普通数据

1. 顶层组件通过provide函数提供数据

2. 底层组件通过inject函数获取数据

3. 跨层级传递响应式数据

在调用provide函数时,第二个参数设置为ref对象

4. 跨层级传递方法

顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件中的数据

示例:

App.vue 父组件

<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 = 666
}, 2000)

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

</script>

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

center-com.vue 子组件

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

</script>

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

bottom-com.vue 孙组件

<script setup>
import { inject } from 'vue';

const themeColor = inject('theme-color')
const count = inject('count')
const changeCount = inject('changeCount')

const clickFn = () => {
    changeCount(888)
}
</script>

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

十二、Vue3.3新特性 - defineOptions

1. 背景说明

        有<script setup>之前,如果要定义props,emits可以轻而易举地添加一个setup平级的属性。但是用了<script setup>后,就没法这么干了,setup属性已经没有了,自然无法添加与其平级的属性。

        为了解决这一问题,引入了 defineProps 与 defineEmits这两个宏。但这只解决了props与emits这两个属性。如果我们要定义组件的name或其他自定义的属性,还是得回到最原始的用法——再添加一个普通的<script>标签。这样就会存在两个<script>标签,让人无法接受。

        所以,在Vue3.3中新引入了defineOptions宏。顾名思义,主要是用来定义Options API的选项。可以用defineOptions定义任意的选项,props,emits,expose,slots除外(因为这些可以使用defineXXX来做到)。

示例:

src/views/login/index.vue

<script setup>
defineOptions({
    name: 'LoginIndex'
})
</script>

<template>
    <div>我是登录页</div>
</template>

十三、Vue3.3新特性 - defineModel

Vue3中的v-model和defineModel

在Vue3中,自定义组件上使用v-model,相当于传递一个modelValue属性,同时触发update:modelValue事件

之前:我们需要先定义props,再定义emits。其中有许多重复的代码。如果需要修改此值,还需要手动调用emit函数。

示例:

App.vue

<script setup>
import MyInput from './components/my-input.vue';
import { ref } from 'vue'

const txt = ref('123456')


</script>

<template>
  <div>
    <MyInput v-model="txt"></MyInput>
    {{ txt }}
  </div>
</template>

my-input.vue

<script setup>
import { defineModel } from 'vue'
const modelValue = defineModel()
</script>

<template>
<div>
  <input 
    type="text" 
    :value="modelValue" 
    @input="e => modelValue = e.target.value"
  >
</div>
</template>



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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【OpenGL实践-09】用图元作图笔记

文章目录 一、说明二、下列程序使用库三、OpenGL图元盘点四、图元解析4.1 线段4.2 表面surface4.3 三角形表面surface 五、图元作图示例5.1 三角链和圆环GL_TRIANGLE_STRIP5.2 三角链和圆环 六、三维物体渲染6.1 直纹面6.2 旋转面 七、GLSL程序优化代码7.1 顶点着色器7.2 几何着…

AI视频教程下载:全面掌握ChatGPT和LangChain开发AI应用(附源代码)

这是一门深入的课程&#xff0c;涉及ChatGPT、LangChain和Python。打造专注于现实世界AI集成的AI应用&#xff0c;课件附有每一节涉及到的源代码。 **你将学到什么&#xff1a;** - 将ChatGPT集成到LangChain的生产风格应用中 - 使用LangChain组件构建复杂的文本生成管道 - …

AI助力农田作物智能化激光除草,基于轻量级YOLOv8n开发构建农田作物场景下常见20种杂草检测识别分析系统

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;技术在各个领域的应用愈发广泛&#xff0c;其中农业领域也不例外。近年来&#xff0c;AI助力农田作物场景下智能激光除草的技术成为了农业领域的一大亮点&#xff0c;它代表着农业智能化、自动化的新趋势。智…

【小tips】当机器里面有多个版本的gcc时,该如何切换当前的gcc版本?

背景切换gcc版本 背景 有时候因为项目需求&#xff0c;可能不同的项目需要不同的gcc版本&#xff0c;所以机器上会安装多个版本的gcc&#xff0c;那我们如何切换到想要使用的版本&#xff1f; 切换gcc版本 比如我的机器上有两个版本的gcc&#xff1a; 我当前的版本是gcc-4…

node版本管理nvm详细教程

安装 nvm 之前先清理node相关的所有配置&#xff0c;如环境变量、.npmrc文件、node_cache、node_global 等 一、下载nvm 任选一处下载即可 官网&#xff1a;Releases coreybutler/nvm-windows (github.com) 码云&#xff1a;nvm下载仓库: nvm下载仓库 百度网盘&#xff1…

strcpy函数及其模拟实现

1. 前言 在本文中&#xff0c;我将带着各位读者从了解strcpy函数&#xff0c;到会用strcpy函数去实现我们编程时的需求&#xff0c;最后再来自己模拟实现一个strcpy函数。 “毕竟只有自己做的&#xff0c;自己才敢放心食用“&#x1f602;&#x1f602;&#x1f602; 2. strc…

开源网页视频会议,WebRTC音视频功能比较

1. 概述 OpenAI 发布了新一代旗舰生成模型 GPT-4o,这是一款真正的多模态大模型,可以「实时对音频、视觉和文本进行推理」。 支持与 AI 实时语音对话,且响应时间达到毫秒级;交互中可识别人类情绪并以相应的情感做出回应;多语言能力的提升,WebRTC 成为大模型关键能力。 视频会议…

系统架构师-考试-基础题-错题集锦2

108.总线-全双工、半双工&#xff1a; 109.软件配置管理-产品配置&#xff1a; 产品配置&#xff1a;指一个产品在其生命周期各个阶段所产生的各种形式和各种版本的文档、计算机程序、部件及数据的集合。 注意&#xff1a;选项中的需求规格说明、设计说明等均可归属于文档。 …

远动通讯屏柜的组成及各装置的作用

远动通讯屏柜的组成及各装置的作用 远动通讯屏是基于公共电网安全而投入的远方监控遥控设备&#xff1b;主要由远动装置、通讯管理机、交换机、调制解调器、GPS对时装置、数字通道防雷器、模拟通道防雷器、插线板、空气开关、屏柜及附件等设备组成、标配尺寸2260*800*600&…

软考之信息系统管理知识点(3)

流水线&#xff1a;是指在程序执行时多条指令重叠进行操作的一种准并行处理实现技术。各种部件同时处理是针对不同指令而言的&#xff0c;它们可同时为多条指令的不同部分进行工作&#xff0c;以提高各部件的利用率和指令的平均执行速度。 编译得过程 关系数据库是表的集合 …

初步学习pygame,使用pygame搭建简单的窗口效果

在VSCode上使用pygame 第一步&#xff1a;创建 Python 虚拟环境 打开 VSCode 中的 Terminal&#xff08;在菜单栏中选择 View > Terminal&#xff09;使用 cd 命令切换到你的项目文件夹输入以下命令来创建一个新的虚拟环境&#xff1a; python3 -m venv env这将在你的项目…

计算机毕业设计hadoop+spark微博舆情大数据分析 微博爬虫可视化 微博数据分析 微博采集分析平台 机器学习(大屏+LSTM情感分析+爬虫)

电商数据建模 一、分析背景与目的 1.1 背景介绍 电商平台数据分析是最为典型的一个数据分析赛道&#xff0c;且电商数据分析有着比较成熟的数据分析模型&#xff0c;比如&#xff1a;人货场模型。此文中我将通过分析国内最大的电商平台——淘宝的用户行为&#xff0c;来巩固数…

element ui 的密码输入框点击显示隐藏密码时,图标随之改变

场景图&#xff1a; 原理&#xff1a; 通过修改el-input框的type属性&#xff0c;来设置显示或者隐藏。从而改变图标地址。 <el-input class"passwordinput" :type"pwdObj.pwdType" ref"pwdInput" placeholder"密码"v-model"…

Unity LayerMask避坑笔记

今天使用Physics2D.OverlapAreaNonAlloc进行物理检测时候&#xff0c;通过LayerMask.NameToLayer传入了int值的LayerMask&#xff0c;结果一直识别不到&#xff0c;经过Debug才找到问题&#xff0c;竟是LayerMask的“值”传输有问题&#xff0c;记录一下。 直接贴代码输出结果&…

蓝桥杯Web开发【模拟题三】15届

1.创意广告牌 在"绮幻山谷"的历史和"梦幻海湾"的繁华交汇之处&#xff0c;一块创意广告牌傲然矗立。它以木质纹理的背景勾勒出古朴氛围&#xff0c;上方倾斜的牌子写着"绮幻山谷的风吹到了梦幻海湾"&#xff0c;瞬间串联了过去与现在&#xff0…

AI爆文写作:关注热点,提前埋伏好关键词,吃系统的热点推荐,吃搜索流量,让你的文章直接爆了!

做内容&#xff0c;要对热点敏感。 小米汽车的发布会时间&#xff0c;我们是不是提前就知道&#xff0c;发布会前&#xff0c;大家最关注的就是价格。 你看这个相关关键词搜索&#xff0c;10W太多了。 我看到有博主在发布会前&#xff0c;埋伏了一篇&#xff0c;公众号也有推…

玩机社区 - 2024年最美社区源码开源

玩机社区 - 2024年最美社区源码开源 教程源码文档都内置到压缩包了 https://pan.baidu.com/s/1xwcscTne-JMbmKEntiuAuA?pwd78oi

python实用系列:按顺序重命名文件

啊&#xff0c;好久没更博客了&#xff0c;今天偶然想换个桌面壁纸&#xff0c;于是上网搜了两个比较满意的桌面壁纸&#xff0c;都是压缩包&#xff1a; 当我想要给他们放到我的桌面壁纸文件里的时候患了难&#xff0c;因为他们的名字有相同的&#xff1a; anime文件夹里边&a…

如何在 Ubuntu 24.04 (桌面版) 上配置静态IP地址 ?

如果你想在你的 Ubuntu 24.04 桌面有一个持久的 IP 地址&#xff0c;那么你必须配置一个静态 IP 地址。当我们安装 Ubuntu 时&#xff0c;默认情况下 DHCP 是启用的&#xff0c;如果网络上可用&#xff0c;它会尝试从 DHCP 服务器获取 IP 地址。 在本文中&#xff0c;我们将向…

VUE3 学习笔记(十)查看vue版本

命令&#xff1a; npm list vue(空) (在项目的根目录下执行以下命令即可查看项目所使用的vue版本) npm list vue version(空) npm info vue (全局查看vue版本号&#xff0c;详细) npm list vue -g(全局查看vue版本号&#xff0c;简单) npm view vue version(查看项目依赖的vue…